/* =====================================================================
   Hero Strati — fabiofidone.it
   Pagina web esplosa in 4 strati (HTML, CSS, JS, AI) che con lo scroll
   si ricompongono nel sito finito. Ogni strato è un link a una sezione.

   Tutti i colori e i font leggono i token del sito (--bg, --yellow, --teal,
   --font-body...) con un valore di riserva: il componente funziona anche
   fuori dal sito. Tutto è racchiuso sotto .hs per non toccare il resto.
   ===================================================================== */

.hs {
  /* token del sito con riserva */
  --hs-bg: var(--bg, oklch(0.16 0.014 60));
  --hs-surface: var(--surface, oklch(0.20 0.016 60));
  --hs-text: var(--text, oklch(0.94 0.008 80));
  --hs-text-soft: var(--text-soft, oklch(0.80 0.012 80));
  --hs-muted: var(--text-muted, oklch(0.58 0.020 60));
  --hs-border: var(--border, oklch(0.28 0.018 60));
  --hs-accent: var(--yellow, oklch(0.82 0.17 75));
  --hs-accent-2: var(--yellow-2, oklch(0.85 0.18 75));
  --hs-mono: var(--font-body, "JetBrains Mono", ui-monospace, monospace);
  --hs-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* un colore per strato: anche la scena 3D li legge da qui */
  --hs-c1: var(--teal, oklch(0.72 0.10 220));     /* struttura  */
  --hs-c2: oklch(0.72 0.15 320);                   /* design     */
  --hs-c3: var(--yellow, oklch(0.82 0.17 75));     /* interazione */
  --hs-c4: var(--success, oklch(0.78 0.15 160));   /* AI         */

  /* layout (sovrascrivibili dalla pagina) */
  --hs-top: 0px;                          /* altezza di una barra FISSA sopra la hero */
  --hs-nav: 0px;                          /* altezza di ciò che sta sopra la hero: la hero la sottrae per stare nel primo schermo */
  --hs-scroll: 240svh;                    /* lunghezza dello scroll "fermo" su desktop */
  --hs-pad: clamp(16px, 5vw, 96px);       /* margine sinistro del testo su desktop */
  --hs-panel-max: 560px;                  /* larghezza massima del testo su desktop */
  --hs-pad-m: 16px;                       /* margini laterali su mobile */
  --hs-flow-h: 46svh;                     /* altezza della fascia 3D su mobile */
  --hs-flow-bottom: 32px;                 /* spazio sotto il testo su mobile (es. barra CTA fissa) */

  position: relative;
  background: var(--hs-bg);
  color: var(--hs-text);
  font-family: var(--hs-mono);
}
.hs *, .hs *::before, .hs *::after { box-sizing: border-box; }

.hs-stage { position: relative; height: var(--hs-scroll); }
.hs-sticky {
  position: sticky; top: var(--hs-top);
  height: calc(100svh - var(--hs-top) - var(--hs-nav)); min-height: 560px;
  overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse 45% 60% at 70% 50%, color-mix(in oklch, var(--hs-c1) 9%, transparent), transparent 70%), var(--hs-bg);
}
/* velo che tiene leggibile il testo sopra la scena; JS lo spegne (--hs-veil) quando il sito è composto */
.hs-sticky::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--hs-veil, 1);
  background: linear-gradient(90deg, var(--hs-bg) 0%, color-mix(in oklch, var(--hs-bg) 86%, transparent) 30%, color-mix(in oklch, var(--hs-bg) 10%, transparent) 52%, transparent 62%);
}
.hs-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -2; }

/* modalità ferma (riduci movimento, niente WebGL): un solo schermo, niente scroll pinnato */
.hs-still .hs-stage { height: auto; }
.hs-still .hs-sticky { position: relative; }
.hs-still .hs-panel-b, .hs-still .hs-hint { display: none; }

/* ---------- Pannelli di testo ---------- */
.hs-panel {
  position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
  left: var(--hs-pad); width: min(var(--hs-panel-max), 44%);
  display: flex; flex-direction: column; gap: 20px;
}
.hs-panel > * { margin-block: 0; }    /* la spaziatura la decide il gap, non i margini delle classi della pagina */
.hs-panel[data-off="1"] { visibility: hidden; }

/* stili propri, usati se la pagina non porta i suoi (la pagina /siti-web/ usa .sw-h1, .tm-btn...) */
.hs-prompt { font-size: .82rem; color: var(--hs-accent); }
.hs-title { font-family: var(--hs-mono); font-weight: 700; font-size: clamp(1.7rem, 2.7vw, 2.9rem); line-height: 1.08; letter-spacing: -.02em; color: var(--hs-text); }
.hs-hl { color: var(--hs-accent); }
.hs-dim { color: var(--hs-muted); }
.hs-lead { font-family: var(--hs-sans); font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.6; color: var(--hs-text-soft); max-width: 52ch; }

.hs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.hs-actions .tm-btn { font-size: .9rem; padding: .85rem 1.4rem; }   /* pulsanti del sito, taglia da hero */

/* legenda: link veri alle sezioni (tastiera, screen reader, Google). JS aggiunge .on quando lo strato è attivo */
.hs-legend { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 6px 26px; margin: 0; padding: 0; list-style: none; font-size: .76rem; }
.hs-legend a { display: inline-flex; align-items: center; gap: 9px; color: var(--hs-muted); text-decoration: none; padding: 3px 0; transition: color .15s; }
.hs-legend a i { width: 9px; height: 9px; flex: none; }
.hs-legend a b { color: var(--hs-text); font-weight: 600; }
.hs-legend a .go { color: var(--hs-accent); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
.hs-legend a:hover, .hs-legend a:focus-visible, .hs-legend a.on { color: var(--hs-text); }
.hs-legend a:hover .go, .hs-legend a:focus-visible .go, .hs-legend a.on .go { opacity: 1; transform: none; }
.hs-legend a:focus-visible { outline: 2px solid var(--hs-accent); outline-offset: 3px; }

.hs-hint { position: absolute; z-index: 2; left: 50%; bottom: 18px; transform: translateX(-50%); font-size: .72rem; color: var(--hs-muted); letter-spacing: .04em; white-space: nowrap; }
.hs-hint b { color: var(--hs-accent); font-weight: 600; }

/* ---------- Etichette agganciate agli strati 3D ---------- */
.hs-tags { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hs-notags .hs-tags { display: none; }
.hs-tag { position: absolute; left: 0; top: 0; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; font-size: .74rem; color: var(--hs-muted); opacity: 0; will-change: transform, opacity; transition: color .2s; }
.hs-tag::after { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .7; align-self: center; }
.hs-tag b { font-weight: 600; }
.hs-tag small { font-size: .9em; opacity: .7; }
/* il testo del link compare SOTTO l'etichetta: la larghezza non cambia, quindi non invade il testo a sinistra */
.hs-tag-go { display: none; position: absolute; right: 34px; top: calc(100% + 2px); color: var(--hs-accent); }
.hs-tag.on { color: var(--hs-text); }
.hs-tag.on .hs-tag-go { display: block; }

/* pulsante "Apri" mostrato sullo strato toccato (touch) */
.hs-chip { position: absolute; left: 0; top: 0; z-index: 3; padding: 10px 14px; background: var(--hs-accent); color: var(--hs-bg); font-family: var(--hs-mono); font-size: .8rem; font-weight: 700; text-decoration: none; white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.5); }

/* immagine statica mostrata se WebGL non è disponibile */
.hs-fallback-img { position: absolute; z-index: -2; right: 32px; top: 50%; transform: translateY(-50%); width: min(44%, 760px); height: auto; border: 1px solid var(--hs-border); }

/* schermi bassi (portatili 1366×768 e simili): il testo deve stare tutto nella fascia */
@media (min-width: 900px) and (max-height: 860px) {
  .hs-panel { gap: 14px; }
  .hs .sw-h1, .hs .hs-title { font-size: 38px; }
  .hs .sw-lede, .hs .hs-lead { font-size: 15px; }
  .hs-legend { grid-template-columns: repeat(4, max-content); gap: 6px 18px; }
  .hs-legend small { display: none; }
}
@media (min-width: 900px) and (max-height: 720px) {
  .hs .sw-h1, .hs .hs-title { font-size: 34px; }
  .hs .sw-note { display: none; }
}

/* ---------- Mobile: scena in una fascia in alto, testo nel flusso normale ---------- */
@media (max-width: 899px) {
  .hs-stage { height: auto; }
  .hs-sticky {
    position: relative; top: auto; height: auto; min-height: 0; overflow: hidden;
    padding-top: max(var(--hs-flow-h), 280px);
    background: radial-gradient(ellipse 80% 30% at 50% 22%, color-mix(in oklch, var(--hs-c1) 10%, transparent), transparent 70%), var(--hs-bg);
  }
  .hs-canvas { inset: 0 0 auto 0; height: max(var(--hs-flow-h), 280px); }
  .hs-sticky::before { inset: auto 0 auto 0; top: calc(max(var(--hs-flow-h), 280px) - 70px); height: 70px; opacity: 1; background: linear-gradient(transparent, var(--hs-bg)); }
  .hs-panel { position: relative; top: auto; left: auto; transform: none; width: auto; padding: 4px var(--hs-pad-m) var(--hs-flow-bottom); gap: 16px; }
  .hs-panel-b, .hs-hint { display: none; }
  .hs-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hs-legend a .go, .hs-legend small { display: none; }
  .hs-fallback-img { right: var(--hs-pad-m); left: var(--hs-pad-m); top: 16px; transform: none; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-legend a, .hs-legend a .go, .hs-tag { transition: none; }
}