/* WHITE HERO variant — overrides index.css .hero only. Loaded after index.css.
   Everything else on the page is untouched. */
.hero.hero-light{background:#FAF8F5;color:var(--obsidian)}
/* Same treatment the brand already uses for light-surface swirls
   (see .intro .swirl-bg in index.css): invert the dark swirl art to
   black-on-white line work and multiply it into the cream. */
.hero.hero-light .swirl{filter:invert(1) grayscale(1) contrast(1.05);mix-blend-mode:multiply;opacity:.22}
.hero.hero-light .swirl-wrap::after{background:radial-gradient(ellipse at center, transparent 0%, transparent 30%, #FAF8F5 80%)}
.hero.hero-light .tagline{opacity:.72}
.hero.hero-light .hint i{background:linear-gradient(to bottom,var(--obsidian),transparent)}

/* Calm the swirl under the wordmark + tagline: the inverse of the edge
   vignette, a soft cream halo behind the hero content. Sits between the
   swirl (z-index auto) and .hero-inner (z-index:2). */
.hero.hero-light::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1180px,90vw);height:min(600px,64vh);z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at center,
    #FAF8F5 0%, rgba(250,248,245,.94) 36%, rgba(250,248,245,.6) 62%, rgba(250,248,245,0) 84%);
}
/* Tagline holds its own on the busy ground: full opacity, weight 500.
   Needs its own keyframes because heroTagIn ends at .85 with fill:both. */
.hero.hero-light .tagline{opacity:1;font-weight:500}
@keyframes heroTagInLight{0%{opacity:0;transform:translateY(10px);letter-spacing:.64em}100%{opacity:1;transform:translateY(0);letter-spacing:.45em}}
.hero.hero-light.replay .tagline{animation:heroTagInLight 1.2s .9s cubic-bezier(.22,.61,.18,1) both}

/* (The teal-cart override is gone: the cart is now an icon-only glass pill
   that already themes light over the cream hero.) */

/* The fixed sound + back-to-top controls now follow the header pills via
   body.nav-dark (see fenara.css) — light when the pills are teal, dark when dark.
   No hero-specific override needed here. */