/* La base comune delle due landing nuove (nuova-a, nuova-b): solo meccanica, niente gusto. Il gusto sta in stile.css
   di ogni direzione. Movimento: solo transform e opacity. prefers-reduced-motion: tutto fermo e già al suo posto. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
img, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.salta { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 8px 14px; background: #fff; color: #000; }
.salta:focus { left: 8px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* entrate allo scroll */
.vivo [data-entra] { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.vivo [data-entra].dentro { opacity: 1; transform: none; }
[data-parallasse] { will-change: transform; }
.quieto *, .quieto *::before, .quieto *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; scroll-behavior: auto !important; }

/* i segnaposto delle riprese nuove: si vedono nel prototipo, ?pulito li toglie */
.segnaposto { position: absolute; z-index: 6; left: 12px; bottom: 12px; max-width: min(520px, calc(100% - 24px)); margin: 0; padding: 6px 10px;
  font: 600 12px/1.35 'Signika', system-ui, sans-serif; letter-spacing: .01em; color: #1b1300; background: #ffd34d; border: 2px dashed #1b1300; border-radius: 6px; }
.pulito .segnaposto { display: none; }

/* il palco degli eroi */
.palco { position: relative; }
.palco canvas { width: 100%; height: 100%; touch-action: pan-y; cursor: crosshair; opacity: 0; transition: opacity .9s ease; }
[data-palco].pronto .palco canvas { opacity: 1; }
.eroi-ripiego { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: 2%; pointer-events: none; transition: opacity .6s; }
.eroi-ripiego img { width: 17%; aspect-ratio: 1; object-fit: contain; }
[data-palco].pronto .eroi-ripiego { opacity: 0; }
.fila-nomi { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.fila-nomi button { display: grid; gap: 1px; padding: 8px 14px; text-align: center; cursor: pointer; border-radius: 999px; }
.fila-nomi small { font-size: 11px; opacity: .75; }

/* i dadi */
.dadi-box { position: relative; }
.tela-dadi { width: 100%; aspect-ratio: 16 / 7; opacity: 0; transition: opacity .8s; touch-action: pan-y; cursor: grab; }
.dadi-box.pronto .tela-dadi { opacity: 1; }
.dadi-ripiego { display: none; }
.dadi-box.senza-3d .tela-dadi { display: none; }
.dadi-box.senza-3d .dadi-ripiego { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }

/* video di fondo: il poster resta sotto finché il video non va */
[data-video] { position: relative; }
.tasto-video { position: absolute; z-index: 5; right: 16px; bottom: 16px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.5); background: rgba(0,0,0,.55); color: #fff; cursor: pointer; }

/* la finestra del video vero */
.finestra { width: min(1100px, 94vw); padding: 0; border: 0; background: #000; border-radius: 10px; overflow: visible; }
.finestra::backdrop { background: rgba(0,0,0,.82); }
.finestra video { width: 100%; height: auto; border-radius: 10px; }
.finestra .chiudi { position: absolute; top: -44px; right: 0; width: 40px; height: 40px; font-size: 28px; line-height: 1; background: none; border: 0; color: #fff; cursor: pointer; }
/* la figura che gira in «My heroes» (riprese del 18/10): un video 4:5 dentro la cornice del «dopo» */
.vetrina-video { position: relative; }
.vetrina-video video { display: block; width: 100%; max-width: 380px; aspect-ratio: 4 / 5; height: auto; object-fit: cover; margin: 0 auto; background: #120c08; }
/* l'attribuzione SRD ha due indirizzi lunghi: al telefono vanno a capo anche a metà */
.attribuzione { overflow-wrap: anywhere; }
/* (18/10, revisione AD) niente parola sola in coda a titoli e paragrafi */
h1, h2, h3 { text-wrap: balance; }
p, li, blockquote { text-wrap: pretty; }
.intro, .promessa { text-wrap: balance; }