/* ============================================================
   GENESIS-GRADE HERO ATMOSPHERE · 2026-05-28 · public homepage
   Additive, external (CSP: style-src 'self'), scoped to the DARK
   hero only (.hero-cinematic) — never touches the light body.
   One decorative child div (.genesis-atmos) at z-index 0, behind
   .cine-content (z-index 1). Adds the genesis signature: a focused
   top light-shaft + a fine drifting/twinkling gold-mote field.
   Its own ::before (static shaft) + ::after (animated motes) — the
   hero's own pseudo-elements are already used by bundle.css, so we
   never touch them.
   ============================================================ */
.hero-cinematic .genesis-atmos{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}

/* focused light shaft from the top centre — the spotlight on the coin */
.hero-cinematic .genesis-atmos::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(62vw,720px); height:88%;
  background:
    radial-gradient(ellipse 44% 74% at 50% 0%, rgba(244,221,141,.20) 0%, transparent 62%),
    radial-gradient(circle 38% at 50% 42%, rgba(244,221,141,.09) 0%, transparent 70%);
}

/* fine gold-mote field — drifts + twinkles, layered over the orb mesh */
.hero-cinematic .genesis-atmos::after{
  content:''; position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 14% 22%, rgba(248,228,150,.55) 0, transparent .4%),
    radial-gradient(circle at 80% 30%, rgba(248,228,150,.40) 0, transparent .35%),
    radial-gradient(circle at 40% 72%, rgba(248,228,150,.45) 0, transparent .4%),
    radial-gradient(circle at 88% 80%, rgba(248,228,150,.32) 0, transparent .35%),
    radial-gradient(circle at 24% 50%, rgba(248,228,150,.40) 0, transparent .35%),
    radial-gradient(circle at 64% 60%, rgba(248,228,150,.42) 0, transparent .35%),
    radial-gradient(circle at 52% 30%, rgba(248,228,150,.40) 0, transparent .35%),
    radial-gradient(circle at 8%  66%, rgba(248,228,150,.30) 0, transparent .3%),
    radial-gradient(circle at 92% 54%, rgba(248,228,150,.30) 0, transparent .3%),
    radial-gradient(circle at 33% 38%, rgba(248,228,150,.28) 0, transparent .28%),
    radial-gradient(circle at 70% 16%, rgba(248,228,150,.30) 0, transparent .28%);
  opacity:.78;
  animation: gh-drift 84s linear infinite, gh-twinkle 7s ease-in-out infinite;
}

@keyframes gh-drift{0%{transform:translate(0,0)}50%{transform:translate(10px,-12px)}100%{transform:translate(0,0)}}
@keyframes gh-twinkle{0%,100%{opacity:.6}50%{opacity:.92}}

@media (prefers-reduced-motion:reduce){
  .hero-cinematic .genesis-atmos::after{animation:none}
}
/* the ≤640px desktop hero is replaced by mobile story-mode — keep this off there,
   and instead bring the atmosphere to the mobile story hook (Panel 1). */
@media (max-width:640px){
  .hero-cinematic .genesis-atmos{display:none}

  /* MOBILE STORY HOOK · genesis atmosphere behind the SOV coin + content.
     isolation:isolate makes .story-hook a stacking context so the z-index:-1
     layer paints ABOVE the panel background but BELOW the content/coin. */
  .story-hook{isolation:isolate}
  .story-hook .story-atmos{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
  /* sharper spotlight onto the coin */
  .story-hook .story-atmos::before{
    content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:90%; height:72%;
    background:radial-gradient(ellipse 62% 66% at 50% 6%, rgba(244,221,141,.16) 0%, transparent 62%);
  }
  /* fine drifting/twinkling gold motes */
  .story-hook .story-atmos::after{
    content:''; position:absolute; inset:0;
    background-image:
      radial-gradient(circle at 16% 22%, rgba(248,228,150,.60) 0, transparent .6%),
      radial-gradient(circle at 82% 28%, rgba(248,228,150,.45) 0, transparent .5%),
      radial-gradient(circle at 30% 66%, rgba(248,228,150,.50) 0, transparent .6%),
      radial-gradient(circle at 76% 74%, rgba(248,228,150,.40) 0, transparent .5%),
      radial-gradient(circle at 50% 12%, rgba(248,228,150,.45) 0, transparent .5%),
      radial-gradient(circle at 10% 82%, rgba(248,228,150,.34) 0, transparent .45%),
      radial-gradient(circle at 92% 56%, rgba(248,228,150,.36) 0, transparent .45%),
      radial-gradient(circle at 40% 40%, rgba(248,228,150,.30) 0, transparent .4%);
    opacity:.72;
    animation: gh-drift 84s linear infinite, gh-twinkle 7s ease-in-out infinite;
  }
  /* ── HEADER TIDY (mobile) · keep the bars, but as single clean lines.
        Heritage strip → one centered line (drop the wrapping tagline);
        polygon tape → one no-wrap swipeable row (no mid-word cut). ── */
  .yarn-strip{
    display:flex; align-items:center; justify-content:center;
    white-space:nowrap; overflow:hidden; padding:5px 14px;
  }
  .yarn-strip .yarn-label{font-size:8px; letter-spacing:1.4px; overflow:hidden; text-overflow:ellipsis}
  .yarn-strip .yarn-anchor{display:none}

  .tape:not([role="region"]){
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .tape:not([role="region"])::-webkit-scrollbar{display:none}
  .tape:not([role="region"]) .tape-row{flex-wrap:nowrap; justify-content:flex-start}
  .tape:not([role="region"]) .item{flex:0 0 auto; font-size:9px}

  /* ── MOBILE-CONSUMER HERO · genesis atmosphere behind the SOV coin ── */
  .msc-hero{isolation:isolate}
  .msc-hero .msc-atmos{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
  .msc-hero .msc-atmos::before{
    content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:92%; height:72%;
    background:radial-gradient(ellipse 60% 64% at 50% 8%, rgba(244,221,141,.15) 0%, transparent 62%);
  }
  .msc-hero .msc-atmos::after{
    content:''; position:absolute; inset:0;
    background-image:
      radial-gradient(circle at 16% 20%, rgba(248,228,150,.55) 0, transparent .6%),
      radial-gradient(circle at 82% 26%, rgba(248,228,150,.42) 0, transparent .5%),
      radial-gradient(circle at 28% 60%, rgba(248,228,150,.46) 0, transparent .6%),
      radial-gradient(circle at 78% 66%, rgba(248,228,150,.38) 0, transparent .5%),
      radial-gradient(circle at 50% 12%, rgba(248,228,150,.42) 0, transparent .5%),
      radial-gradient(circle at 10% 76%, rgba(248,228,150,.32) 0, transparent .45%),
      radial-gradient(circle at 92% 52%, rgba(248,228,150,.34) 0, transparent .45%),
      radial-gradient(circle at 40% 38%, rgba(248,228,150,.30) 0, transparent .4%);
    opacity:.7;
    animation: gh-drift 84s linear infinite, gh-twinkle 7s ease-in-out infinite;
  }

  @media (prefers-reduced-motion:reduce){
    .story-hook .story-atmos::after,
    .msc-hero .msc-atmos::after{animation:none}
  }
}