/* ============================================================
   HaloWave band + CRT/phosphor overlay — ported from the Halo app
   (HaloWave.tsx / CRTOverlay.tsx / warden.css). A pixel-spectrum
   canvas scaled up with chunky pixels, dressed with an RGB aperture
   grille and curved-glass vignette, behind a legibility scrim.
   ============================================================ */

/* ---- Wave band shell ---- */
.halo-band {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #000;
  pointer-events: none;
}
.halo-band--rounded { border-radius: var(--r-panel); }

.halo-wave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
}

/* Legibility scrim — the spectrum crest is hot white/yellow at the top, so the
   title band is darkened too; the spectrum still reads through mid + base. */
.halo-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(8, 12, 28, 0.62) 0%,
    rgba(8, 12, 28, 0.34) 34%,
    rgba(8, 12, 28, 0.52) 74%,
    rgba(8, 12, 28, 0.82) 100%
  );
}
/* Slim banner variant — lighter top so the wave ghosts through behind a card. */
.halo-scrim--soft {
  background: linear-gradient(
    180deg,
    rgba(8, 12, 28, 0.18) 0%,
    rgba(8, 12, 28, 0.5) 55%,
    rgba(8, 12, 28, 0.8) 100%
  );
}

/* ---- CRT / phosphor overlay ---- */
.w-crt {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
.w-crt__layer { position: absolute; inset: 0; }
/* RGB aperture grille — vertical phosphor triads */
.w-crt__grille {
  background: repeating-linear-gradient(
    to right,
    rgba(255, 0, 0, 0.06) 0px,
    rgba(0, 255, 0, 0.06) 1px,
    rgba(0, 0, 255, 0.06) 2px,
    rgba(0, 0, 0, 0) 3px
  );
  mix-blend-mode: screen;
  opacity: 0.5;
}
/* Curved-glass vignette + edge phosphor bloom */
.w-crt__vignette {
  background: radial-gradient(
    100% 100% at 50% 50%,
    rgba(0, 0, 0, 0) 38%,
    rgba(0, 0, 0, 0.28) 70%,
    rgba(0, 0, 0, 0.62) 90%,
    rgba(0, 0, 0, 0.92) 100%
  );
  box-shadow:
    inset 0 0 120px rgba(0, 0, 0, 0.7),
    inset 0 0 40px rgba(0, 0, 0, 0.55),
    inset 0 0 18px rgba(28, 100, 242, 0.08);
}
.w-crt--flicker { animation: w-crt-flicker 4.5s steps(1) infinite; }
@keyframes w-crt-flicker {
  0%, 100% { opacity: 1; }
  3%  { opacity: 0.94; }
  6%  { opacity: 1; }
  48% { opacity: 1; }
  50% { opacity: 0.97; }
  52% { opacity: 1; }
  80% { opacity: 1; }
  82% { opacity: 0.92; }
  84% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .w-crt--flicker { animation: none; }
}

/* ---- Hero: the showcase wave sits behind the hero content ---- */
.hero { position: relative; }
.hero .wrap { position: relative; z-index: 3; }
.hero .halo-band { z-index: 0; }

/* The hero wave only fills the upper band so the page's own aurora takes over
   below — the wave is the hero island, not the whole page. Anchored to the top
   edge with a fixed height (overrides .halo-band's inset:0). */
.hero-wave-band {
  inset: 0 0 auto 0;
  height: clamp(440px, 78vh, 820px);
}
.hero-wave-band .halo-scrim {
  /* Fade the band's bottom edge fully into the page background so there's no
     hard seam between the spectrum island and the aurora below. */
  background: linear-gradient(
    180deg,
    rgba(8, 12, 28, 0.6) 0%,
    rgba(8, 12, 28, 0.3) 30%,
    rgba(8, 12, 28, 0.55) 66%,
    var(--bg) 100%
  );
}

/* ---- Slim divider band (between sections / behind the final CTA) ---- */
.wave-divider {
  position: relative;
  height: 132px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.wave-divider .halo-band { z-index: 0; }
.wave-divider .halo-scrim {
  background: linear-gradient(
    180deg,
    var(--bg) 0%,
    rgba(8, 12, 28, 0.32) 26%,
    rgba(8, 12, 28, 0.32) 74%,
    var(--bg) 100%
  );
}

/* Final CTA: the wave glows behind the glass invitation card. */
.final { position: relative; }
.final .halo-band { z-index: 0; opacity: 0.9; }
.final .wrap { position: relative; z-index: 3; }
.final .halo-scrim {
  background: linear-gradient(
    180deg,
    var(--bg) 0%,
    rgba(8, 12, 28, 0.5) 40%,
    rgba(8, 12, 28, 0.5) 60%,
    var(--bg) 100%
  );
}

@media (max-width: 640px) {
  .hero-wave-band { height: clamp(380px, 64vh, 560px); }
  .wave-divider { height: 96px; }
}