/* ==========================================================================
   home-scroll-hero.css — la hero della home resta ferma mentre si scorre (blocco più lungo)
   e dalle linee del grafico partono le card dei messaggi.
   Non ridefinisce il disegno del grafico: linee, punti ed etichette restano quelli di north-star.html.
   Tutte le regole sono sotto .hs-pin, il contenitore creato da js/home/02-hero-cards.js:
   senza JS nessuna regola si applica e la hero resta identica a prima.
   ========================================================================== */
/* lo spazio di scorrimento è un blocco vero (::after): un padding non conta per position:sticky */
.hs-pin{position:relative}
.hs-pin::after{content:"";display:block;height:190vh}
.hs-pin > #hero.stage{position:sticky;top:var(--hs-top,0px);min-height:100vh;min-height:100svh}

/* strato delle card: stessa viewBox del grafico, sotto i testi (#hero .container ha z-index 2) */
.hs-pin .hs-cards{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.hs-cards .card-body{fill:#0b0b10;stroke-width:1.6}
.hs-cards .glyph{fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hs-cards .std .card-body,.hs-cards .std .glyph{stroke:#f97316}
.hs-cards .ach .card-body,.hs-cards .ach .glyph{stroke:#34d399}
.hs-cards .ach .card-body{filter:drop-shadow(0 0 6px rgba(52,211,153,.45))}
.hs-cards .plus{fill:#34d399;font-family:Inter,-apple-system,"Segoe UI",sans-serif;font-weight:700;letter-spacing:.01em}

/* desktop: le linee vivono in una fascia in basso e i testi stanno sopra, come su telefono.
   La fascia non supera il 44% dell'altezza: su schermi larghi e bassi il grafico resta centrato sotto i testi. */
@media (min-width:921px){
  .hs-pin #hero{--band:min(32.64vw,44vh)}
  .hs-pin #hero .hero-chart,.hs-pin #hero .hs-cards{top:auto;bottom:0;height:var(--band)}
  .hs-pin > #hero.stage{padding-bottom:calc(var(--band) * .64)}
  .hs-pin::after{height:150vh}
  /* il blocco dopo arriva subito: le card che scendono fanno da passaggio, senza fascia nera in mezzo */
  .hs-pin ~ #gallery{padding-top:72px}
}
/* schermi desktop bassi: fascia più bassa e meno margine sopra, per tenere il titolo in vista */
@media (min-width:921px) and (max-height:800px){
  .hs-pin #hero{--band:min(32.64vw,38vh)}
  .hs-pin > #hero.stage{padding-top:84px}
}
/* le card che scendono possono uscire dal fondo della hero */
.hs-pin > #hero.stage{overflow-x:clip;overflow-y:visible}

.hs-pin #hero .scroll-cue{transition:opacity .4s ease}
.hs-pin #hero.hs-scrolled .scroll-cue{opacity:0}

@media (max-width:920px){
  .hs-pin::after{height:160vh}
  /* telefono: la hero è più alta dello schermo; si accorcia il margine senza toccare i testi */
  .hs-pin > #hero.stage{padding-top:92px;padding-bottom:196px}
}
@media (prefers-reduced-motion:reduce){
  .hs-pin::after{display:none}
  .hs-pin > #hero.stage{position:relative;top:0;min-height:88vh}
}