/* INTRO (dalla v3): il grafico del logo sale, barra dopo barra; poi il nome.
   13/10: tutto quello che si muove e' transform/opacity con ritardi CSS, cosi' lo muove la scheda video
   anche mentre il browser prepara la pagina sotto (prima l'animazione perdeva fino a 130 ms per volta). */
html.intro3-lock, html.intro3-lock body { overflow: hidden; }
.intro3 { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: radial-gradient(60% 50% at 50% 45%, #0b1a3c, #020617 75%); cursor: pointer; transition: opacity .8s cubic-bezier(.22, .61, .36, 1), visibility .8s; }
.intro3--via { opacity: 0; visibility: hidden; pointer-events: none; }
.intro3-in { text-align: center; }
.intro3-logo { position: relative; width: min(46vw, 210px); aspect-ratio: 778 / 780; margin: 0 auto; }
.intro3-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.intro3-logo .pz { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block;
  transform-origin: var(--ox) var(--oy); will-change: transform, opacity;
  transition: transform .9s cubic-bezier(.2, 1.2, .4, 1) var(--d), opacity .5s var(--d); }
.intro3.in-corso .intro3-logo .pz { transform: scaleY(.02); opacity: 0; }
.intro3.in-corso.su .intro3-logo .pz { transform: none; opacity: 1; }
.intro3-nome { margin: 1.3rem 0 0; font-family: "Space Grotesk", "SpaceGrotesk", sans-serif; font-weight: 700; font-size: clamp(1.6rem, 6vw, 2.4rem); letter-spacing: .18em; color: #f1f5f9; transition: opacity .8s 1340ms; }
.intro3-nome span { display: inline-block; will-change: transform; transition: transform 1.2s cubic-bezier(.22, .61, .36, 1) 1340ms; }
.intro3.in-corso .intro3-nome { opacity: 0; }
.intro3.in-corso .intro3-nome span { transform: translateX(calc(var(--k) * .32em)); }   /* le lettere partono larghe (.5em) */
.intro3.in-corso.su .intro3-nome { opacity: 1; }
.intro3.in-corso.su .intro3-nome span { transform: none; }                                /* e si stringono a .18em */
.intro3-riga { margin: .4rem 0 0; font-family: "Space Grotesk", "SpaceGrotesk", sans-serif; font-size: .82rem; letter-spacing: .3em; text-transform: uppercase; color: #22d3ee; transition: opacity .8s 1640ms; }
.intro3.in-corso .intro3-riga { opacity: 0; }
.intro3.in-corso.su .intro3-riga { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .intro3 { display: none !important; } }