/* ==========================================================================
   AUTOPIA — intro.css: la linea del tempo dell'intro (8,5 s) e la comparsa dell'auto sulla home. Solo bianco, celeste, azzurro e blu notte
   (unica eccezione: i fanali posteriori del traffico, disegnati in intro.js).
   Tempi (ms): sale 0–800 · strumenti 800–1600 · start 1600–2200 · accelera in coda 2200–4400 · cambio a sinistra, sorpasso, rientro 4400–6900 ·
   parte 6900–7600 · dissolvenza 7600–8500. La strada, le corsie e il traffico NON stanno qui: li disegna intro.js a ogni frame (stato(t)).
   Percentuali sulla durata di 7600 ms: 10,53% = 800 · 21,05% = 1600 · 23,03% = 1750 · 28,95% = 2200 · 57,89% = 4400 · 81,58% = 6200.
   ========================================================================== */

/* La home, finché l'overlay non è montato, è coperta da un velo dello stesso colore: nessun lampo di pagina nuda. */
html.has-intro:not(.intro-pronta) body::before{content:"";position:fixed;inset:0;z-index:9999;background:#06213a}
html.has-intro .hero-car,html.has-intro .car-halo,html.has-intro .hero-orbit{opacity:0}
html.has-intro .hero-road{opacity:.4}

.intro{position:fixed;inset:0;z-index:10000;overflow:hidden;background:#06213a;opacity:1}
.intro--esci{animation:intro-esci .9s ease-out forwards}
.intro--rapida{animation-duration:.35s}
@keyframes intro-esci{to{opacity:0;visibility:hidden}}
.intro__scena{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* il film fotorealistico: invisibile finché non parte davvero (intro.js), poi copre la scena SVG che resta sotto come ripiego */
.intro__film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity .6s ease}
.intro--film .intro__film{opacity:1}
.intro--film .intro__scena{opacity:0;transition:opacity .6s ease}

.intro__salta{position:absolute;z-index:2;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));min-width:44px;min-height:44px;padding:10px 18px;border-radius:999px;cursor:pointer;font:700 13px/1 system-ui,-apple-system,sans-serif;letter-spacing:.04em;color:#e9f6ff;background:rgba(239,249,255,.14);border:1px solid rgba(255,255,255,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px rgba(255,255,255,.5)}
.intro__salta:hover{background:rgba(239,249,255,.26)}
.intro__salta:focus-visible{outline:3px solid #5ec9ff;outline-offset:3px}

/* cruscotto: si sale (0–0,8 s), regge, avanza con l'accelerazione e si allarga mentre si parte */
.intro__cruscotto,.intro__abitacolo{transform-origin:800px 900px;will-change:transform}
.intro__cruscotto{animation:intro-cruscotto 7.6s linear forwards}
@keyframes intro-cruscotto{
  0%{transform:scale(.92);filter:blur(6px);animation-timing-function:cubic-bezier(.2,.8,.2,1)}
  10.53%{transform:scale(1);filter:blur(0)}
  28.95%{transform:scale(1);filter:blur(0);animation-timing-function:cubic-bezier(.6,0,1,1)}
  81.58%{transform:scale(1.06);filter:blur(0);animation-timing-function:ease-in}
  100%{transform:scale(1.4);filter:blur(8px)}
}
.intro__abitacolo{animation:intro-abitacolo 7.6s linear forwards}
@keyframes intro-abitacolo{0%{transform:scale(.97)}10.53%,28.95%{transform:scale(1)}100%{transform:scale(1.25)}}

/* strumenti */
.intro__tacca{stroke:#bfe8ff;stroke-width:3;stroke-linecap:round;opacity:0;animation:intro-acceso .2s forwards;animation-delay:calc(800ms + var(--i) * 40ms)}
@keyframes intro-acceso{to{opacity:1}}
.intro__ago{stroke:#fff;stroke-width:5;stroke-linecap:round}
.intro__ago--1{transform-origin:620px 800px;animation:intro-ago1 7.6s linear forwards}
.intro__ago--2{transform-origin:980px 800px;animation:intro-ago2 7.6s linear forwards}
@keyframes intro-ago1{0%,21.05%{transform:rotate(-120deg)}23.03%,28.95%{transform:rotate(-90deg)}57.89%,100%{transform:rotate(110deg)}}
@keyframes intro-ago2{0%,28.95%{transform:rotate(-120deg)}57.89%{transform:rotate(60deg)}100%{transform:rotate(100deg)}}

/* start: l'anello pulsa due volte, poi si preme e si accende */
.intro__start{transform-origin:800px 812px;animation:intro-premi .6s 1.6s both}
@keyframes intro-premi{0%{transform:scale(1)}25%{transform:scale(.9)}100%{transform:scale(1)}}
.intro__anello{transform-origin:800px 812px;animation:intro-polso .8s ease-in-out .8s 2 both}
@keyframes intro-polso{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.14);opacity:1}}
.intro__luce{opacity:0;animation:intro-luce 4s 1.6s forwards}
@keyframes intro-luce{0%{opacity:0}4%{opacity:.85}12%{opacity:.35}100%{opacity:.3}}

/* strada e corsie: le disegna intro.js (stato(t)); qui restano le linee di velocità, che compaiono con l'accelerazione e si muovono */
.intro__linea{stroke-width:3;stroke-dasharray:80 520;opacity:0;animation:intro-linee 7.6s linear forwards,intro-linee-moto .5s linear 2.2s infinite}
@keyframes intro-linee{0%,28.95%{opacity:0}57.89%{opacity:.8}100%{opacity:.9}}
@keyframes intro-linee-moto{to{stroke-dashoffset:-600}}

/* lampi: azzurro all'accensione (1,6 s), bianco alla partenza (7,4 s): la dissolvenza finale esce dal bianco */
.intro__flash{opacity:0;pointer-events:none}
.intro__flash--c{animation:intro-flash-c .16s 1.6s both}
@keyframes intro-flash-c{0%{opacity:0}50%{opacity:.45}100%{opacity:0}}
.intro__flash--b{animation:intro-flash-b .2s 7.4s both}
@keyframes intro-flash-b{0%{opacity:0}100%{opacity:1}}

/* l'auto della home compare «come se prima non ci fosse» (parte con la dissolvenza, 7,6 s) */
html.intro-reveal .hero-car{animation:intro-auto .7s cubic-bezier(.16,1,.3,1) both!important}
@keyframes intro-auto{
  0%{opacity:0;scale:.6;translate:0 40px;filter:drop-shadow(0 22px 13px rgba(55,116,154,.15)) drop-shadow(0 0 2px #fff) drop-shadow(0 0 8px rgba(94,201,255,.9)) drop-shadow(0 0 22px rgba(22,137,193,.55))}
  45%{opacity:1;filter:drop-shadow(0 22px 13px rgba(55,116,154,.15)) drop-shadow(0 0 2px #fff) drop-shadow(0 0 8px rgba(94,201,255,.9)) drop-shadow(0 0 22px rgba(22,137,193,.55))}
  100%{opacity:1;scale:1;translate:0 0;filter:drop-shadow(0 22px 13px rgba(55,116,154,.15)) drop-shadow(0 0 0 rgba(255,255,255,0)) drop-shadow(0 0 0 rgba(94,201,255,0)) drop-shadow(0 0 0 rgba(22,137,193,0))}
}
html.intro-reveal .car-halo{animation:intro-alone .6s .2s ease-out both!important}
@keyframes intro-alone{0%{opacity:0;scale:.8}100%{opacity:1;scale:1}}
html.intro-reveal .hero-orbit{animation:intro-orbita .8s .1s ease-out both!important}
@keyframes intro-orbita{0%{opacity:0;scale:.9}100%{opacity:1;scale:1}}
html.intro-reveal .hero-road{animation:intro-strada .5s ease-out both!important}
@keyframes intro-strada{0%{opacity:.4}100%{opacity:1}}

@media (prefers-reduced-motion:reduce){.intro{display:none!important}html.has-intro .hero-car,html.has-intro .car-halo,html.has-intro .hero-orbit{opacity:1}html.has-intro .hero-road{opacity:1}html.has-intro:not(.intro-pronta) body::before{display:none}}
@media (forced-colors:active){.intro{display:none!important}html.has-intro .hero-car,html.has-intro .car-halo,html.has-intro .hero-orbit{opacity:1}html.has-intro:not(.intro-pronta) body::before{display:none}}