/* ============================================================
   AVOKE — Home, la hero: un nastro opaco e scuro disegnato in codice (WebGL),
   che scorre con lo scroll. Nessuna immagine, nessun video. Il motore è assets/js/hero-onda.js.
   ============================================================ */

/* la hero è una scena fissata: lo scroll la attraversa */
.hero.hero--onda{display:block;min-height:0;padding:0;height:220vh}
.hero__stage{
  position:sticky;top:0;height:100vh;height:100svh;overflow:clip;
  display:flex;flex-direction:column;justify-content:center;padding-top:var(--nav-h);
}
.hero--onda .hero__fog::before{display:none}
.hero__gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero--onda .hero__title,.hero--onda .hero__sub{text-shadow:0 2px 34px rgba(5,3,2,.75)}
.hero--onda .hero__sub{color:var(--ink)}

/* il titolo resta leggibile, il fondo si chiude nel nero della pagina */
.hero--onda:has(.hero__body--epi) .hero__fog::after{
  background:
    radial-gradient(50% 34% at 50% 52%,rgba(10,8,6,.34),transparent 80%),
    linear-gradient(180deg,rgba(10,8,6,.45),rgba(10,8,6,0) 20%,rgba(10,8,6,0) 78%,rgba(10,8,6,.96) 100%);
}

/* senza WebGL: una schermata sola, con la luce calda di fondo al posto del nastro */
html.no-gl .hero.hero--onda{height:auto}
html.no-gl .hero__stage{position:relative}
html.no-gl .hero__gl{display:none}
html.no-gl .hero--onda .hero__fog::before{display:block}

@media(prefers-reduced-motion:reduce){
  .hero.hero--onda{height:auto}
  .hero__stage{position:relative}
}