/* Shared Hero / final CTA: flowing colors beneath stationary fractal glass. */
.hero-glass-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  visibility: hidden;
}

.glass-surface .glass-ready .hero-glass-canvas { visibility: visible; }
.glass-surface .glass-ready > .color-field,
.glass-surface .glass-ready > .glass-texture,
.glass-surface .glass-ready > .hero-grain { display: none; }
.glass-surface .glass-ready > .light-veil {
  background: linear-gradient(180deg, #fff 0%, #ffffffb3 5%, transparent 20%, transparent 84%, #ffffff85 100%);
}

.glass-surface .color-scene {
  --scene-play-state: running;
  --glass-width: clamp(24px, 5vw, 96px);
  background: #839af6;
}

.glass-surface .color-field {
  inset: -15%;
  background: linear-gradient(160deg, #81e5f5 5%, #269de9 36%, #9880e8 65%, #ec9fe8 95%);
  filter: blur(clamp(18px, 2.1vw, 36px));
  animation: none;
  will-change: auto;
}

.hero-wave {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: var(--scene-play-state);
}

.hero-wave--cyan {
  width: 125%;
  height: 80%;
  left: -38%;
  top: -2%;
  background: radial-gradient(ellipse, #05c8f5 12%, #00b2ffb3 40%, #00b2ff00 70%);
  animation-name: hero-cyan-wave;
  animation-duration: 14s;
  animation-delay: -4s;
}

.hero-wave--blue {
  width: 115%;
  height: 100%;
  left: 22%;
  top: 2%;
  background: radial-gradient(ellipse, #5374f3 8%, #477ff4cc 35%, #5374f300 69%);
  animation-name: hero-blue-wave;
  animation-duration: 18s;
  animation-delay: -7s;
}

.hero-wave--pink {
  width: 145%;
  height: 78%;
  left: -22%;
  top: 48%;
  background: radial-gradient(ellipse, #ff63ef 6%, #f275edcc 37%, #ff63ef00 70%);
  animation-name: hero-pink-wave;
  animation-duration: 16s;
  animation-delay: -3s;
}

/* Matching moving rose light for the non-WebGL fallback, still below the glass. */
.glass-surface .color-field::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 46% 72% at 14% 50%, #c72ea8e6 0%, #b92a9e99 35%, #b92a9e00 78%);
  animation: hero-left-rose-wave 16s ease-in-out infinite;
  animation-play-state: var(--scene-play-state);
}

.glass-surface .glass-texture {
  /* Broad, low-contrast glass faces, following the Framer reference. */
  background: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, .075) 0,
    rgba(255, 255, 255, 0) calc(var(--glass-width) * .2),
    rgba(0, 0, 0, .025) calc(var(--glass-width) * .5),
    rgba(0, 0, 0, .055) calc(var(--glass-width) * .8),
    rgba(255, 255, 255, .075) var(--glass-width));
  background-size: auto;
  mix-blend-mode: normal;
  opacity: 1;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.glass-surface .glass-texture::before,
.glass-surface .glass-texture::after {
  content: none;
}

.hero-grain {
  position: absolute;
  inset: 0;
  background: url('assets/hero-fractal-noise.svg') repeat;
  background-size: 180px 180px;
  mix-blend-mode: soft-light;
  opacity: .07;
}

.glass-surface .light-veil {
  background: linear-gradient(180deg,
    #fff 0%, #fffffff0 4%, #ffffff85 13%,
    transparent 31%, transparent 75%, #ffffff33 91%, #ffffffb0 100%);
}

/* A shorter colored band blends the final CTA into the white sections. */
.final-cta.glass-surface .color-scene {
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%, rgba(0, 0, 0, .03) 5%, rgba(0, 0, 0, .14) 10%,
    rgba(0, 0, 0, .45) 18%, rgba(0, 0, 0, .8) 24%, #000 30%,
    #000 70%, rgba(0, 0, 0, .8) 78%, rgba(0, 0, 0, .45) 86%,
    rgba(0, 0, 0, .1) 94%, transparent 100%);
  mask-image: linear-gradient(180deg,
    transparent 0%, rgba(0, 0, 0, .03) 5%, rgba(0, 0, 0, .14) 10%,
    rgba(0, 0, 0, .45) 18%, rgba(0, 0, 0, .8) 24%, #000 30%,
    #000 70%, rgba(0, 0, 0, .8) 78%, rgba(0, 0, 0, .45) 86%,
    rgba(0, 0, 0, .1) 94%, transparent 100%);
}
.final-cta.glass-surface .light-veil { background: none; }

/* Matching first and last transforms keep every wave continuous at the loop. */
@keyframes hero-cyan-wave {
  0%, 100% { transform: translate3d(-8%, 12%, 0) rotate(-14deg) scale(1.08, .92); }
  33% { transform: translate3d(20%, -12%, 0) rotate(13deg) scale(1.16, 1.12); }
  66% { transform: translate3d(7%, 26%, 0) rotate(-6deg) scale(.94, 1.18); }
}

@keyframes hero-blue-wave {
  0%, 100% { transform: translate3d(9%, -8%, 0) rotate(16deg) scale(1.08, .94); }
  33% { transform: translate3d(-24%, 13%, 0) rotate(-15deg) scale(1.18, .86); }
  66% { transform: translate3d(-7%, -18%, 0) rotate(8deg) scale(.98, 1.14); }
}

@keyframes hero-pink-wave {
  0%, 100% { transform: translate3d(-12%, 10%, 0) rotate(-12deg) scale(1.04, .9); }
  33% { transform: translate3d(12%, -24%, 0) rotate(11deg) scale(1.12, 1.15); }
  66% { transform: translate3d(24%, 5%, 0) rotate(-5deg) scale(.96, 1.08); }
}

@keyframes hero-left-rose-wave {
  0%, 100% { transform: translate3d(-3%, 2%, 0) scale(1.02); }
  50% { transform: translate3d(4%, -5%, 0) scale(1.08); }
}

@media (max-width: 760px) {
  .hero-grain { opacity: .06; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-wave, .glass-surface .color-field::after { animation: none !important; will-change: auto; }
}