/* =========================================================
   scroll-3d.css — struttura e stati del motore scroll-3d.js
   Neutro: colori e font si cambiano da queste variabili (nessun brand).
   ========================================================= */
:root {
  --s3d-bg: #0e1418;                 /* fondo dello stage */
  --s3d-bg-glow: #17232b;            /* centro del gradiente */
  --s3d-ink: #fff;                   /* testo sullo stage */
  --s3d-ink-soft: rgba(255,255,255,.78);
  --s3d-accent: #9fdcb9;             /* kicker, indicatore attivo, etichette */
  --s3d-font: system-ui, -apple-system, "Segoe UI", sans-serif;
  --s3d-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --s3d-gutter: clamp(20px, 4vw, 56px);
  --s3d-height: 520vh;               /* lunghezza dello scroll della scena a schermo intero */
}

.s3d { position: relative; background: var(--s3d-bg); color: var(--s3d-ink); font-family: var(--s3d-font); }
.s3d__stage { position: relative; min-height: min(100svh, 860px); overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 66% 48%, var(--s3d-bg-glow) 0%, var(--s3d-bg) 70%); }
.s3d__canvas { position: absolute; inset: 0; }
.s3d__canvas canvas { width: 100%; height: 100%; display: block; }

/* Hero fissato: la sezione è alta, lo stage resta incollato mentre si scorre */
.s3d--live { height: var(--s3d-height); }
.s3d--live .s3d__stage { position: sticky; top: 0; height: 100svh; min-height: 0; }
.s3d--live.s3d--short { --s3d-height: 360vh; }
.s3d--static .s3d__stage { height: min(100svh, 860px); }          /* riduci movimento: un solo fotogramma */

/* Pannello in linea: nessun blocco dello scroll */
.s3d--inline, .s3d--inline.s3d--ready { width: 100%; aspect-ratio: 4 / 3; }
.s3d--inline .s3d__stage { position: absolute; inset: 0; min-height: 0; }

/* Griglia "disegno tecnico": si accende con c.measure() */
.s3d__grid { position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 32px 32px; }

/* Testi che entrano e escono col progresso */
.s3d__overlay { position: absolute; inset: 0; pointer-events: none; }
.s3d__overlay a, .s3d__overlay button { pointer-events: auto; }
.s3d__step { position: absolute; left: var(--s3d-gutter); bottom: 14vh; max-width: 460px; display: none; flex-direction: column; gap: 12px; }
.s3d--live .s3d__step, .s3d--inline .s3d__step { display: flex; opacity: 0; will-change: opacity, transform; }
.s3d--static .s3d__step:not(.s3d__step--final), .s3d--fallback .s3d__step:not(.s3d__step--final) { display: none; }
.s3d--static .s3d__step--final, .s3d--fallback .s3d__step--final { display: flex; }   /* senza animazione resta solo il messaggio finale */
.s3d__step--final { top: 0; bottom: 0; justify-content: center; max-width: 680px; gap: 24px; }
.s3d__kicker { font-family: var(--s3d-mono); font-size: 12px; color: var(--s3d-accent); }
.s3d__title { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.06; letter-spacing: -0.025em; font-weight: 600; margin: 0; }
.s3d__text { color: var(--s3d-ink-soft); font-size: clamp(16px, 1.4vw, 19px); margin: 0; }

/* Etichette agganciate a punti 3D */
.s3d__labels { position: absolute; inset: 0; pointer-events: none; }
.s3d__label { position: absolute; left: 0; top: 0; opacity: 0; }
.s3d__label > span { display: inline-block; transform: translate(-50%, -130%); white-space: nowrap; font-family: var(--s3d-mono); font-size: 13px;
  color: var(--s3d-ink); background: rgba(8,12,15,.82); border: 1px solid var(--s3d-accent); padding: 4px 10px; }

/* Indicatore di fase e suggerimento */
.s3d__rail { position: absolute; right: var(--s3d-gutter); top: 50%; transform: translateY(-50%); list-style: none; margin: 0; padding: 0; display: none; flex-direction: column; gap: 14px;
  font-family: var(--s3d-mono); color: rgba(255,255,255,.55); }
.s3d--live .s3d__rail { display: flex; }
.s3d__rail li { font-size: 0; display: flex; align-items: center; justify-content: flex-end; gap: 10px; transition: color .3s; }
.s3d__rail li::after { content: ""; width: 18px; height: 2px; background: currentColor; transition: width .3s; }
.s3d__rail li.is-active { color: var(--s3d-ink); font-size: 12px; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.s3d__rail li.is-active::after { width: 36px; background: var(--s3d-accent); }
.s3d__hint { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); font-family: var(--s3d-mono); font-size: 12px; color: var(--s3d-ink-soft);
  display: none; flex-direction: column; align-items: center; gap: 8px; }
.s3d__hint::after { content: ""; width: 1px; height: 36px; background: linear-gradient(var(--s3d-accent), transparent); animation: s3d-hintline 1.6s ease-in-out infinite; }
.s3d--live .s3d__hint { display: flex; }
@keyframes s3d-hintline { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* Link per saltare l'animazione (tastiera / lettori di schermo): visibile al focus */
.s3d__skip { position: absolute; left: var(--s3d-gutter); top: 16px; z-index: 2; background: #fff; color: #000; padding: 10px 14px; font-weight: 600; transform: translateY(-200%); }
.s3d__skip:focus { transform: none; }

/* Contenuto di riserva: visibile solo senza JavaScript o senza WebGL */
.s3d__fallback { position: absolute; right: 0; top: 50%; width: min(56%, 720px); transform: translateY(-50%); padding: 24px; }
.s3d--live .s3d__fallback, .s3d--static .s3d__fallback, .s3d--inline.s3d--ready .s3d__fallback { display: none; }

@media (max-width: 720px) {
  .s3d__rail, .s3d__hint { display: none !important; }
  .s3d__step { left: var(--s3d-gutter); right: var(--s3d-gutter); bottom: 8vh; max-width: none; padding: 18px; background: rgba(8,12,15,.72); backdrop-filter: blur(6px); }
  .s3d__step--final { top: auto; bottom: 0; left: 0; right: 0; padding: 24px var(--s3d-gutter) 40px; justify-content: flex-end; background: linear-gradient(to top, rgba(8,12,15,.95) 55%, rgba(8,12,15,0)); backdrop-filter: none; }
  .s3d__fallback { position: relative; width: 100%; top: auto; transform: none; padding: 80px 20px 0; }
}
@media (prefers-reduced-motion: reduce) { .s3d__hint::after { animation: none; } }