/* ==========================================================================
   APPLE LIQUID FROSTED GLASS MERGE & DISSOLVE
   Ultra-Smooth Refractive Glass Fusion (GPU Accelerated)
   ========================================================================== */

#glass-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(40px) saturate(160%);
  -webkit-backdrop-filter: blur(40px) saturate(160%);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  pointer-events: all;
  will-change: opacity, backdrop-filter, transform;
  transition: 
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    backdrop-filter 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    -webkit-backdrop-filter 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.7s;
}

#glass-overlay.dismissed {
  opacity: 0;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  visibility: hidden;
  pointer-events: none;
}

/* Fluid Glass Filter Stage */
.glass-fluid-stage {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: url('#liquid-merge');
  will-change: transform, opacity;
  transform: translateZ(0);
}

/* Subtle Specular Sheen across glass */
.glass-sheen {
  position: absolute;
  width: 140%;
  height: 100%;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.08) 48%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0.08) 52%,
    transparent 70%
  );
  transform: translateX(-100%);
  animation: sheen-sweep 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: none;
}

@keyframes sheen-sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Organic Glass Blobs that coalesce */
.glass-blob {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.85) 0%, rgba(200, 210, 225, 0.4) 45%, rgba(120, 130, 150, 0.1) 85%);
  will-change: transform, opacity;
  transform: translateZ(0);
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: forwards;
}

.blob-1 {
  width: 320px;
  height: 320px;
  top: 15%;
  left: 18%;
  animation: merge-orb-1 1.6s forwards;
}

.blob-2 {
  width: 360px;
  height: 360px;
  bottom: 16%;
  right: 20%;
  animation: merge-orb-2 1.6s forwards;
}

.blob-3 {
  width: 280px;
  height: 280px;
  top: 25%;
  right: 22%;
  animation: merge-orb-3 1.6s forwards;
}

.blob-4 {
  width: 300px;
  height: 300px;
  bottom: 22%;
  left: 24%;
  animation: merge-orb-4 1.6s forwards;
}

.blob-center {
  width: 400px;
  height: 400px;
  animation: center-pulse 1.6s forwards;
}

@keyframes merge-orb-1 {
  0% { transform: translate3d(-120px, -90px, 0) scale(0.6); opacity: 0; }
  35% { opacity: 0.9; }
  75% { transform: translate3d(100px, 60px, 0) scale(1.15); }
  100% { transform: translate3d(140px, 90px, 0) scale(1.3); opacity: 1; }
}

@keyframes merge-orb-2 {
  0% { transform: translate3d(130px, 100px, 0) scale(0.6); opacity: 0; }
  35% { opacity: 0.9; }
  75% { transform: translate3d(-90px, -70px, 0) scale(1.15); }
  100% { transform: translate3d(-130px, -100px, 0) scale(1.3); opacity: 1; }
}

@keyframes merge-orb-3 {
  0% { transform: translate3d(100px, -110px, 0) scale(0.5); opacity: 0; }
  35% { opacity: 0.85; }
  75% { transform: translate3d(-70px, 70px, 0) scale(1.1); }
  100% { transform: translate3d(-100px, 90px, 0) scale(1.2); opacity: 1; }
}

@keyframes merge-orb-4 {
  0% { transform: translate3d(-100px, 120px, 0) scale(0.5); opacity: 0; }
  35% { opacity: 0.85; }
  75% { transform: translate3d(80px, -70px, 0) scale(1.1); }
  100% { transform: translate3d(110px, -90px, 0) scale(1.2); opacity: 1; }
}

@keyframes center-pulse {
  0% { transform: scale3d(0.3, 0.3, 1); opacity: 0; }
  45% { transform: scale3d(0.9, 0.9, 1); opacity: 0.85; }
  75% { transform: scale3d(1.15, 1.15, 1); opacity: 1; }
  100% { transform: scale3d(1.4, 1.4, 1); opacity: 1; }
}

/* Glass dispersion transition */
#glass-overlay.dissolving {
  opacity: 0;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
}

#glass-overlay.dissolving .glass-fluid-stage {
  animation: glass-fluid-dissolve 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes glass-fluid-dissolve {
  0% { transform: scale3d(1, 1, 1); opacity: 1; filter: blur(0); }
  100% { transform: scale3d(1.8, 1.8, 1); opacity: 0; filter: blur(25px); }
}