/* ==========================================================================
   NetrAI — Gradient wave hero
   --------------------------------------------------------------------------
   The host layer for js/effects/gradient-wave.js, plus the hero type colours.
   Loads after glass.css; only the hero is affected.

   IT FOLLOWS THE THEME. The first pass pinned the band light in both themes
   because black type needs a light field. That was wrong: it left a white
   hero glaring at the top of a black page. Each hero now carries two colour
   sets — a white-based one and a near-black one — and the shader is rebuilt
   when the theme changes. Black type in light, white type in dark, one design
   in both.
   ========================================================================== */

:root {
  /* The band's own ground: what shows before the canvas paints, what shows if
     WebGL is unavailable, and what sits behind the field at the edges. It
     should match the first colour in data-gradient-colors, which the shader
     uses as its base. */
  --gw-ground: #ffffff;
  --gw-ink: #0b0b0f;
  --gw-mist: rgba(11, 11, 15, 0.66);
  --gw-hair: rgba(11, 11, 15, 0.16);
  --gw-panel: rgba(255, 255, 255, 0.58);
}
[data-theme="dark"] {
  --gw-ground: #04060c;
  --gw-ink: #f5f5f7;
  --gw-mist: rgba(245, 245, 247, 0.70);
  --gw-hair: rgba(255, 255, 255, 0.16);
  --gw-panel: rgba(255, 255, 255, 0.07);
}

/* ---- the host ---------------------------------------------------------- */
.gradient-wave {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--gw-ground);
}
.gw-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* The band. Both hero kinds — the homepage's sticky stage and the inner
   pages' .page-hero — take the same ground in both themes, overriding
   css/effects/waves.css, which painted --waves-bg and flipped it. */
.page-hero,
.hero-scene .hero-stage {
  background: var(--gw-ground);
  border-bottom: 0;
}
/* Below 861px and under reduced motion, css/hero-scene.css takes the stage
   out of the box tree with `display: contents`, so it paints nothing and the
   section has to carry the ground instead. */
@media (max-width: 860px), (prefers-reduced-motion: reduce) {
  .hero-scene { background: var(--gw-ground); }
}

/* ---- hero type ---------------------------------------------------------
   --gw-ink and --gw-mist flip with the theme, so these are one set of rules
   rather than two. They exist at all because the site's h1 is --ink, and on a
   field this saturated the mid-blues would take a mid-grey heading down with
   them. */
.page-hero,
.page-hero h1,
.hero-scene,
.hero-scene h1,
.hero-scene .hero-swap,
.hero-scene .marker-word { color: var(--gw-ink); }

.page-hero p.lead,
.hero-scene .hero-sub { color: var(--gw-mist); }

.page-hero .eyebrow { color: var(--gw-mist); }

/* Pricing's trust chips are the only other thing sitting on the band. */
.page-hero .hero-trust span {
  color: var(--gw-mist);
  border-color: var(--gw-hair);
  background: var(--gw-panel);
}
.page-hero .hero-trust b { color: var(--gw-ink); }

/* The homepage buttons. The secondary was a hairline in --ink, which in dark
   mode is nearly white and disappeared here. */
.hero-scene .hero-cta .btn-secondary {
  color: var(--gw-ink);
  border-color: var(--gw-hair);
  background: var(--gw-panel);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}
.hero-scene .hero-cta .btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* The dashboard frame that rises into the homepage hero took --glass-bg,
   which is a dark value at night and landed as a black slab on a white
   field. */
.hero-scene .video-frame {
  background: var(--gw-panel);
  border-color: var(--gw-hair);
}
.hero-scene .video-frame-label { color: var(--gw-mist); }

/* ---- the header sits on the band while it is at rest ------------------- */
/* css/layout/nav-capsule.css paints the bar --waves-bg at rest so the header and the
   hero meet with no seam. That token is gone from this band, so it takes the
   same ground here. The capsule keeps its own frosted fill and its dark
   labels already read on white. */
body:not(.nav-open) .site-header:not(.scrolled) {
  background: var(--gw-ground);
}

/* ---- the client board under the homepage hero -------------------------- */
/* It painted --waves-bg too, and its lamps were tuned for a dark ground. */
.client-marquee.has-led { background: var(--gw-ground); }
.client-marquee::before { background: var(--gw-ground); }
[data-theme="dark"] .client-marquee::before { background: var(--gw-ground); }

/* ---- degradation -------------------------------------------------------
   No WebGL, or a context that failed to create: js/effects/gradient-wave.js marks the
   host and the band keeps a static approximation of the same palette rather
   than a flat white rectangle. */
.gradient-wave[data-gradient-failed] {
  background:
    radial-gradient(80% 60% at 18% 20%, rgba(0, 113, 227, 0.32), transparent 62%),
    radial-gradient(70% 55% at 82% 72%, rgba(0, 113, 227, 0.24), transparent 60%),
    var(--gw-ground);
}

@media print {
  .gradient-wave { display: none; }
}