/* =====================================================================
   Hero Silicio — fabiofidone.it/consulenze-ai/
   Scheda madre con processore: impulsi di dati in arrivo (teal) e risposte
   in uscita (giallo). Su desktop lo scroll porta la camera dentro il chip.
   Legge i token del sito con valori di riserva. Tutto sotto .hsi.
   ===================================================================== */
.hsi {
  --hsi-bg: var(--bg, oklch(0.16 0.014 60));
  --hsi-text: var(--text, oklch(0.94 0.008 80));
  --hsi-text-soft: var(--text-soft, oklch(0.80 0.012 80));
  --hsi-muted: var(--text-muted, oklch(0.58 0.020 60));
  --hsi-border: var(--border, oklch(0.28 0.018 60));
  --hsi-surface: var(--surface, oklch(0.20 0.016 60));
  --hsi-in: var(--teal, oklch(0.72 0.10 220));       /* dati in arrivo */
  --hsi-out: var(--yellow, oklch(0.82 0.17 75));     /* risposte in uscita = colore delle CTA */
  --hsi-copper: oklch(0.66 0.13 55);                 /* piste di rame */
  --hsi-mono: var(--font-body, "JetBrains Mono", ui-monospace, monospace);

  --hsi-nav: 0px;          /* ciò che sta sopra la hero (menu + barra): la hero sta nel primo schermo */
  --hsi-scroll: 250svh;    /* lunghezza dello scroll "fermo" su desktop */
  --hsi-pad: 56px;         /* margine del testo su desktop */
  --hsi-panel-max: 540px;
  --hsi-pad-m: 20px;       /* margini su mobile */
  --hsi-flow-h: 48svh;     /* fascia 3D su mobile */

  position: relative; background: var(--hsi-bg); color: var(--hsi-text); font-family: var(--hsi-mono);
}
.hsi *, .hsi *::before, .hsi *::after { box-sizing: border-box; }
.hsi-stage { position: relative; height: var(--hsi-scroll); }
.hsi-sticky { position: sticky; top: 0; height: calc(100svh - var(--hsi-nav)); min-height: 560px; overflow: hidden; isolation: isolate; background: var(--hsi-bg); }
.hsi-sticky::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--hsi-veil, 1);
  background: linear-gradient(90deg, var(--hsi-bg) 0%, color-mix(in oklch, var(--hsi-bg) 86%, transparent) 32%, color-mix(in oklch, var(--hsi-bg) 12%, transparent) 54%, transparent 64%); }
.hsi-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -2; touch-action: pan-y; }
.hsi-still .hsi-stage { height: auto; }
.hsi-still .hsi-sticky { position: relative; }
.hsi-still .hsi-panel-b, .hsi-still .hsi-hint { display: none; }
.hsi-fallback .hsi-sticky { background: radial-gradient(circle at 72% 50%, color-mix(in oklch, var(--hsi-in) 16%, transparent), transparent 40%), var(--hsi-bg); }

.hsi-panel { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); left: var(--hsi-pad); width: min(var(--hsi-panel-max), 46%); display: flex; flex-direction: column; gap: 18px; }
.hsi-panel > * { margin-block: 0; }
.hsi-panel[data-off="1"] { visibility: hidden; }
.hsi-legend { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: .74rem; color: var(--hsi-muted); }
.hsi-legend span { display: inline-flex; align-items: center; gap: 8px; }
.hsi-legend i { width: 16px; height: 3px; }
.hsi-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--hsi-border); border: 1px solid var(--hsi-border); }
.hsi-stats div { background: color-mix(in oklch, var(--hsi-bg) 88%, transparent); padding: 12px 14px; min-width: 0; }
.hsi-stats span { display: block; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--hsi-muted); }
.hsi-stats b { font-weight: 600; font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.hsi-hint { position: absolute; z-index: 2; left: 50%; bottom: 16px; transform: translateX(-50%); font-size: .72rem; color: var(--hsi-muted); white-space: nowrap; }
.hsi-hint b { color: var(--hsi-out); font-weight: 600; }

/* il titolo della pagina (.ci-h1) nella colonna: la riga più lunga ("// nel tuo flusso di lavoro", 27 caratteri mono) deve stare in ~46% */
@media (min-width: 900px) {
  .hsi .ci-h1 { font-size: clamp(26px, 2.5vw, 36px); line-height: 1.12; }
}
@media (min-width: 900px) and (max-height: 820px) {
  .hsi-panel { gap: 13px; }
  .hsi .ci-h1 { font-size: clamp(24px, 2.3vw, 32px); }
  .hsi .ci-lede { font-size: 15px; }
}
@media (min-width: 900px) and (max-height: 700px) {
  .hsi .ci-h1 { font-size: clamp(22px, 2.1vw, 28px); }
  .hsi .ci-trust-line, .hsi-legend { display: none; }
}
/* mobile: scena in una fascia sopra il testo, niente scroll bloccato */
@media (max-width: 899px) {
  .hsi-stage { height: auto; }
  .hsi-sticky { position: relative; height: auto; min-height: 0; padding-top: max(var(--hsi-flow-h), 300px); }
  .hsi-canvas { inset: 0 0 auto 0; height: max(var(--hsi-flow-h), 300px); }
  .hsi-sticky::before { inset: auto 0 auto 0; top: calc(max(var(--hsi-flow-h), 300px) - 70px); height: 70px; opacity: 1; background: linear-gradient(transparent, var(--hsi-bg)); }
  .hsi-panel { position: relative; top: auto; left: auto; transform: none; width: auto; padding: 4px var(--hsi-pad-m) 36px; gap: 16px; }
  .hsi-panel-b, .hsi-hint { display: none; }
}