/* L'apertura della landing (intro.js): il palco sopra l'eroe, il segno vero dove si posa, Salta e Rivedi.
   Finché l'apertura recita (html.intro-attiva) i testi dell'eroe sono invisibili ma occupano il loro posto:
   il segno finale si misura lì. Li fa comparire intro.js, uno per uno; senza JS non si nascondono mai. */

/* il segno dell'eroe: gigante e scritta, come nella barra ma grandi */
.eroe-segno{position:relative;display:flex;flex-direction:column;align-items:center;gap:.9rem}
.segno-lockup{--seg:clamp(140px,13.5vw,200px);display:flex;align-items:center;gap:calc(var(--seg) * .1);color:var(--ink)}
.segno-g svg{width:var(--seg);height:var(--seg)}
.segno-nome{font-weight:600;letter-spacing:-.03em;font-size:calc(var(--seg) * .3);line-height:1}
@media (max-width:959px){.segno-lockup{--seg:clamp(96px,26vw,150px)}.eroe-segno{flex-direction:row;justify-content:space-between;align-items:center}}
.intro-rivedi{display:inline-flex;align-items:center;gap:.4rem;background:transparent;border:1px solid color-mix(in srgb,var(--ink) 16%,transparent);
  color:var(--muted);font-size:.8rem;font-weight:500;padding:.35rem .75rem;border-radius:999px;cursor:pointer;transition:color .15s,border-color .15s}
.intro-rivedi:hover{color:var(--ink);border-color:color-mix(in srgb,var(--ink) 40%,transparent)}
.intro-rivedi .ic{width:15px;height:15px}
@media (max-width:959px){.intro-rivedi{align-self:flex-end}}

/* il palco: copre l'eroe, non prende i clic (tranne Salta, che sta fuori).
   ⚠️ .apertura, non .intro: .intro è la testata di ogni sezione (landing.css), e uno stile
   del palco scritto su .intro (position:absolute) le sovrapponeva tutte al contenuto. */
.apertura{position:absolute;inset:0;z-index:2;pointer-events:none;transition:opacity .45s ease}
.intro-svg{width:100%;height:100%;overflow:visible}
.apertura.sfuma{opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
html:not(.js) .apertura{display:none}

.intro-salta{position:absolute;z-index:3;right:clamp(1rem,3vw,2rem);top:clamp(.8rem,2vw,1.2rem);display:none;align-items:center;gap:.35rem;
  background:color-mix(in srgb,var(--sup) 80%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid var(--linea);color:var(--muted);font-size:.85rem;font-weight:500;padding:.45rem .9rem;border-radius:999px;cursor:pointer}
.intro-salta:hover{color:var(--ink);border-color:var(--linea-forte)}
.intro-salta .ic{width:15px;height:15px}
html.intro-attiva .intro-salta{display:inline-flex}

/* mentre recita: testi, segno vero e Rivedi in attesa (occupano il posto, non si vedono) */
html.intro-attiva [data-intro]{opacity:0}
html.intro-attiva .segno-lockup,html.intro-attiva .intro-rivedi{visibility:hidden}
html.intro-finita [data-intro]{transition:opacity .5s ease,transform .5s ease}
html.intro-attiva .hero .ciclo{transition:none}

/* i pezzi della scena */
.apertura .i-gig{fill:var(--ink)}
.apertura .i-pic{fill:var(--acc)}
.apertura .i-ombra{fill:rgba(17,17,20,.09)}
.apertura .i-tag{font:500 13px 'Geist Mono',monospace;letter-spacing:.04em;fill:var(--muted)}
.apertura .i-goccia{fill:#fff;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.apertura .i-nv-c{fill:var(--sup);stroke:var(--linea-forte);stroke-width:1.4}
.apertura .i-nv-om{fill:rgba(17,17,20,.06)}
.apertura .i-nt{font-family:'Geist',system-ui,sans-serif;font-weight:500;fill:var(--ink)}
.apertura .i-bol{fill:var(--sup);stroke:var(--linea-forte);stroke-width:1.3}
.apertura .i-carta{fill:var(--sup);stroke:var(--linea);stroke-width:1.2;filter:drop-shadow(0 2px 4px rgba(17,17,20,.06))}
.apertura .davanti .i-carta{stroke:color-mix(in srgb,var(--acc) 45%,var(--linea));filter:drop-shadow(0 8px 18px rgba(17,17,20,.14))}
.apertura .i-casella{fill:var(--sup);stroke:var(--linea-forte);stroke-width:1.5}
.apertura .i-spunta{fill:none;stroke:var(--su-acc);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22;stroke-dashoffset:22}
.apertura .fatta .i-casella{stroke:var(--acc)}
.apertura .i-rt{font-family:'Geist',system-ui,sans-serif;font-weight:500;fill:var(--ink)}
.apertura .i-pill{fill:var(--acc-tinta);stroke:color-mix(in srgb,var(--acc) 30%,transparent);stroke-width:1}
.apertura .i-pt{font-family:'Geist',system-ui,sans-serif;font-weight:600;fill:var(--acc-testo)}
.apertura .i-fb{stroke-width:0}
.apertura .i-fum-g .i-fb{fill:var(--ink)}
.apertura .i-fum-g .i-ft{fill:#fff}
.apertura .i-fum-p .i-fb{fill:var(--acc)}
.apertura .i-fum-p .i-ft{fill:var(--su-acc)}
.apertura .i-ft{font-family:'Geist',system-ui,sans-serif;font-weight:500}
/* le grandi nuvole di Bruno: giornata, lista, lavagna, pro e contro */
.apertura .i-ng .i-nv-c{stroke-width:1.5}
.apertura .i-ct{font:600 15px 'Geist',system-ui,sans-serif;fill:var(--ink);letter-spacing:-.01em}
.apertura .i-ct-acc{fill:var(--acc-testo)}
.apertura .i-ct-mu{fill:var(--muted)}
.apertura .i-cm{font:500 12px 'Geist Mono',monospace;fill:var(--muted)}
.apertura .i-co{font:500 11px 'Geist Mono',monospace;fill:var(--muted)}
.apertura .i-cl{stroke:var(--linea);stroke-width:1}
.apertura .i-ev rect{fill:color-mix(in srgb,var(--acc) 12%,var(--sup));stroke:color-mix(in srgb,var(--acc) 35%,transparent);stroke-width:1}
.apertura .i-ev text{font:500 13.5px 'Geist',system-ui,sans-serif;fill:var(--ink)}
.apertura .i-ev .i-eo{font-family:'Geist Mono',monospace;font-size:11.5px;fill:var(--muted)}
.apertura .i-ev-acc rect{fill:var(--acc);stroke:none}
.apertura .i-ev-acc text,.apertura .i-ev-acc .i-eo{fill:var(--su-acc)}
.apertura .i-box-oggi{fill:color-mix(in srgb,var(--acc) 7%,transparent);stroke:color-mix(in srgb,var(--acc) 45%,transparent);stroke-width:1.2}
.apertura .i-dot{fill:var(--acc)}
.apertura .i-pt-map{fill:color-mix(in srgb,var(--acc) 10%,var(--sup));stroke:color-mix(in srgb,var(--acc) 45%,transparent);stroke-width:1.4;stroke-linejoin:round}
.apertura .i-rotta{fill:none;stroke:var(--acc);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.apertura .i-pin circle{fill:var(--acc);stroke:var(--sup);stroke-width:2}
.apertura .i-pn{font:600 12px 'Geist',system-ui,sans-serif;fill:var(--ink)}
.apertura .i-pm{font:600 16px 'Geist',system-ui,sans-serif;fill:var(--muted)}
.apertura .i-pm-acc{fill:var(--acc-testo)}
/* la lista: la scadenza di quello che non è per oggi */
.apertura .i-scad rect{fill:var(--sup);stroke:var(--linea-forte);stroke-width:1}
.apertura .i-scad text{font:500 11px 'Geist Mono',monospace;fill:var(--muted)}
/* la lavagna del viaggio: schede e frecce come nella vista vera */
.apertura .i-scheda{fill:var(--sup);stroke:var(--linea);stroke-width:1.2;filter:drop-shadow(0 3px 6px rgba(17,17,20,.08))}
.apertura .i-scheda-b{fill:var(--acc)}
.apertura .i-st{font:600 14px 'Geist',system-ui,sans-serif;fill:var(--ink)}
.apertura .i-ss{font:500 11px 'Geist Mono',monospace;fill:var(--muted)}
.apertura .i-fr{fill:none;stroke:color-mix(in srgb,var(--acc) 70%,var(--ink));stroke-width:1.8;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.apertura .i-fp{fill:color-mix(in srgb,var(--acc) 70%,var(--ink))}
.apertura .i-fum{filter:drop-shadow(0 6px 14px rgba(17,17,20,.12))}
.apertura .i-nome{font-family:'Geist',system-ui,sans-serif;font-weight:600;letter-spacing:-.03em;fill:var(--ink);dominant-baseline:central}
/* ?debug&intro=12: la foto è l'istante, senza transizioni a metà */
html.intro-congelata [data-intro],html.intro-congelata .apertura{transition:none!important}
.intro-rivedi[hidden]{display:none}