/* Apertura della home (intro-home.js). Tutto vale solo se <html> ha la classe "intro-home", messa da uno script in testa a home.html:
   senza di essa (riduci movimento, gia' vista in questa visita, senza JavaScript) la pagina e' quella di sempre. */
html.intro-home { overflow: hidden; }
/* finche' lo script non ha messo il velo, la copertura e' questa: la pagina non lampeggia prima dell'apertura */
html.intro-home:not(.intro-scopri)::before { content: ""; position: fixed; inset: 0; z-index: 199; background: var(--carta); }

.intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--carta); }
.intro__tela { display: block; width: min(86vw, 980px, 145vh); height: auto; }   /* 145vh = 70% dell'altezza per la proporzione del logo */

.intro-nastro { position: fixed; z-index: 201; background: var(--rosso); pointer-events: none; will-change: transform; }
.intro-salta { position: fixed; z-index: 202; right: 16px; bottom: 16px; padding: 10px 16px; border: 1px solid var(--inchiostro); background: var(--carta); color: var(--inchiostro); font: 600 0.85rem/1 var(--f-testo); cursor: pointer; }
.intro-salta:hover { background: var(--inchiostro); color: var(--carta); }

/* lo slogan entra parola per parola: ogni parola esce da una "fessura" (il margine in basso evita di tagliare le code delle lettere) */
.intro-parola { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.intro-parola > span { display: inline-block; will-change: transform; }

@media print { .intro, .intro-nastro, .intro-salta { display: none !important; } html.intro-home { overflow: visible; } }