/* ═══════════════════════════════════════════════════════════════
   intro-overlay.css — Overlay full-viewport dell'intro
   Carica DOPO intro-tokens.css. Classi prefissate .intro-*
═══════════════════════════════════════════════════════════════ */
.intro-overlay{position:absolute;inset:0;background:var(--intro-bg);overflow:hidden;font-family:var(--intro-font-body);color:var(--intro-text);z-index:900;image-rendering:pixelated}
/* Cornice pixel a bordo schermo (doppia linea oro/nero come il client) */
.intro-overlay::before{content:"";position:absolute;inset:10px;border:2px solid var(--intro-gold-d);outline:1px solid #000;outline-offset:-4px;pointer-events:none;z-index:5;opacity:.55}

/* ── Stage immagini: due layer per il crossfade ── */
.intro-stage{position:absolute;inset:0}
.intro-slide{position:absolute;inset:0;opacity:0;transition:opacity var(--intro-xfade) linear}
.intro-slide.is-on{opacity:1}
.intro-slide img,.intro-slide canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;transform-origin:50% 50%}
/* Ken-Burns: due direzioni alternate, scala max 1.06 (lofi, non cinematico) */
.intro-slide.kb-a.kb-go img,.intro-slide.kb-a.kb-go canvas{animation:introKbA var(--intro-kb) linear forwards}
.intro-slide.kb-b.kb-go img,.intro-slide.kb-b.kb-go canvas{animation:introKbB var(--intro-kb) linear forwards}
@keyframes introKbA{from{transform:scale(1) translate(0,0)}to{transform:scale(1.06) translate(-1.2%,-.8%)}}
@keyframes introKbB{from{transform:scale(1.06) translate(1%,.6%)}to{transform:scale(1) translate(0,0)}}

/* ── Layer stack (pannelli 3/4 dèi, 8 baluardo) ── */
.intro-layers{position:absolute;inset:0}
.intro-layer{position:absolute;inset:0;opacity:0;transition:opacity 600ms steps(6,end)}
.intro-layer.is-on{opacity:1}

/* ── Griglia dèi (pannelli 3/4) ── */
.intro-gods{position:absolute;left:50%;top:50%;transform:translate(-50%,-56%);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2.5vw,36px);width:min(78vw,1100px)}
.intro-god{position:relative;opacity:0;transform:translateY(8px);transition:opacity 520ms steps(5,end),transform 520ms steps(5,end)}
.intro-god.is-on{opacity:1;transform:none}
.intro-god-frame{aspect-ratio:160/270;border:2px solid var(--intro-gold-d);outline:1px solid #000;outline-offset:-4px;box-shadow:4px 4px 0 #000;background:var(--intro-void);overflow:hidden}
.intro-god-frame canvas,.intro-god-frame img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated;display:block}
.intro-gods.is-dark .intro-god-frame{border-color:var(--intro-mauve)}
.intro-god-name{margin-top:10px;text-align:center;font-family:var(--intro-font-ui);font-size:clamp(8px,1vw,12px);letter-spacing:.14em;text-transform:uppercase;color:var(--intro-gold);text-shadow:2px 2px 0 #000}
.intro-gods.is-dark .intro-god-name{color:var(--intro-lilac)}
.intro-god-dom{text-align:center;font-size:clamp(14px,1.5vw,20px);color:var(--intro-text-dim);margin-top:2px}

/* ── Scrim + testo narrazione (banda bassa, safe-area) ── */
.intro-scrim{position:absolute;left:0;right:0;bottom:0;height:34%;background:var(--intro-scrim);pointer-events:none}
.intro-caption{position:absolute;left:50%;bottom:clamp(56px,9vh,110px);transform:translateX(-50%);width:min(94vw,1500px);text-align:left}
.intro-kicker{font-family:var(--intro-font-ui);font-size:clamp(8px,.9vw,11px);letter-spacing:.16em;text-transform:uppercase;color:var(--intro-gold);text-shadow:2px 2px 0 #000;margin-bottom:12px;opacity:0;transition:opacity 400ms}
.intro-text{font-size:clamp(20px,2.4vw,34px);line-height:1.3;color:var(--intro-text);text-shadow:2px 2px 0 #000,0 0 18px rgba(8,6,18,.9);text-wrap:pretty;text-align:left;opacity:0;transform:translateY(6px);transition:opacity 600ms,transform 600ms}
.intro-caption.is-on .intro-kicker,.intro-caption.is-on .intro-text{opacity:1;transform:none}
/* Testo segmentato pannelli 3/4: la clausola di ogni dio entra in sincrono con la sua card */
.intro-lead{color:var(--intro-text-dim)}
.intro-seg{opacity:0;transition:opacity 500ms}
.intro-seg.is-on{opacity:1}
/* Macchina da scrivere: testo pieno subito (no fade "a comparsa"). I caratteri
   sono tutti in layout (visibility) -> niente reflow/salti a fine riga. */
.intro-text{position:relative}
.intro-text.intro-typing{opacity:1;transform:none;transition:none}
.intro-char{visibility:hidden}
.intro-char.on{visibility:visible}
.intro-caret{position:absolute;pointer-events:none;color:var(--intro-gold);animation:introCaret .8s steps(1,end) infinite}
@keyframes introCaret{50%{opacity:0}}
.intro-gold-word{color:var(--intro-gold)}

/* ── CRT: scanline + vignetta a tutto schermo (sopra tutto, sotto la UI) ── */
.intro-crt{position:absolute;inset:0;pointer-events:none;z-index:4;background:repeating-linear-gradient(180deg,transparent 0 3px,rgba(0,0,0,.22) 3px 4px)}
.intro-crt::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 55%,rgba(8,6,18,.75) 100%)}

/* ── UI: Salta + avanzamento ── */
.intro-ui{position:absolute;inset:0;pointer-events:none;z-index:6}
.intro-skip{pointer-events:auto;position:absolute;top:22px;right:26px;font-family:var(--intro-font-ui);font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--intro-text-dim);background:rgba(8,6,18,.7);border:1px solid var(--intro-gold-d);padding:8px 12px;cursor:pointer;box-shadow:2px 2px 0 #000}
.intro-skip:hover{color:var(--intro-gold);border-color:var(--intro-gold)}
.intro-skip:active{transform:translate(1px,1px);box-shadow:1px 1px 0 #000}
.intro-skip kbd{color:var(--intro-gold);margin-left:6px}
/* Pallini conta-slide rimossi: rompevano l'immersivita' (richiesta utente). */
.intro-progress{display:none !important}
.intro-dot{width:8px;height:8px;background:var(--intro-void);border:1px solid var(--intro-gold-d);box-shadow:1px 1px 0 #000}
.intro-dot.is-done{background:var(--intro-gold-d)}
.intro-dot.is-on{background:var(--intro-gold);box-shadow:1px 1px 0 #000,0 0 6px rgba(232,200,56,.6)}
/* barra tempo sottile (residuo pannello) */
/* Barra di avanzamento per-slide rimossa (richiesta utente). */
.intro-bar{display:none !important}

/* ── Conferma Esc ── */
.intro-confirm{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(8,6,18,.8);z-index:8;pointer-events:auto}
.intro-confirm.is-on{display:flex}
.intro-confirm-box{background:#12101e;border:1px solid var(--intro-gold-d);outline:1px solid #000;outline-offset:-3px;box-shadow:4px 4px 0 #000;padding:16px 18px;min-width:300px;text-align:center}
.intro-confirm-title{font-family:var(--intro-font-ui);font-size:9px;color:var(--intro-gold);letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;text-shadow:1px 1px 0 #000}
.intro-confirm-msg{font-size:17px;color:var(--intro-text-dim);margin-bottom:14px}
.intro-btn{font-family:var(--intro-font-ui);font-size:7px;letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;cursor:pointer;box-shadow:2px 2px 0 #000;margin:0 3px;border-radius:0}
.intro-btn--ghost{background:#1a1828;border:1px solid #2a2440;color:var(--intro-text-dim)}
.intro-btn--primary{background:var(--intro-gold);border:1px solid var(--intro-gold);color:var(--intro-bg)}

/* ── prefers-reduced-motion: niente KB, transizioni istantanee, layer compositi ── */
@media (prefers-reduced-motion:reduce){
  .intro-slide,.intro-layer,.intro-god,.intro-kicker,.intro-text,.intro-seg{transition:none}
  .intro-slide img,.intro-slide canvas{animation:none;transform:none}
  .intro-god{transform:none}
}
.intro-overlay.reduced .intro-slide,.intro-overlay.reduced .intro-layer,.intro-overlay.reduced .intro-god,.intro-overlay.reduced .intro-kicker,.intro-overlay.reduced .intro-text,.intro-overlay.reduced .intro-seg{transition:none}
.intro-overlay.reduced .intro-slide img,.intro-overlay.reduced .intro-slide canvas{animation:none!important;transform:none!important}