/* ConduCodice · animazioni ed effetti 3D. Tutto si spegne con "riduci movimento" del sistema operativo. */

/* ---------- Transizioni tra le pagine (browser recenti: View Transitions; gli altri: dissolvenza in entrata) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root){animation:vt-out .38s cubic-bezier(.4,0,.2,1) both}
::view-transition-new(root){animation:vt-in .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes vt-out{to{opacity:0;transform:perspective(1400px) translateZ(-90px) rotateX(4deg);filter:blur(4px)}}
@keyframes vt-in{from{opacity:0;transform:perspective(1400px) translateZ(70px) translateY(24px)}}
.top{view-transition-name:testata}
::view-transition-group(testata){animation-duration:.4s}
html.pg-enter body>main,html.pg-enter body>section{animation:pg-in .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes pg-in{from{opacity:0;transform:translateY(18px)}}
.pg-curtain{position:fixed;inset:0;z-index:9999;pointer-events:none;background:radial-gradient(circle at var(--cx,50%) var(--cy,50%),rgba(255,194,26,.18),#0b0c0e 60%);opacity:0;transition:opacity .28s ease}
.pg-curtain.on{opacity:1}

/* ---------- Comparse 3D allo scorrimento ---------- */
.js .rv.pre{opacity:.001;transform:perspective(1100px) translateY(46px) rotateX(10deg) scale(.97);transform-origin:50% 100%}
.rv{transition:opacity .9s ease,transform 1s cubic-bezier(.16,1,.3,1),filter .9s ease}
.js .rv.pre.rv-l{transform:perspective(1100px) translateX(-50px) rotateY(12deg)}
.js .rv.pre.rv-r{transform:perspective(1100px) translateX(50px) rotateY(-12deg)}
/* i figli delle griglie entrano uno dopo l'altro */
.stg>*{transition:opacity .8s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.js .stg.pre>*{opacity:0;transform:perspective(900px) translateY(36px) rotateX(8deg)}
.js .stg.pre{opacity:1;transform:none}
.stg>*:nth-child(2){transition-delay:.08s}.stg>*:nth-child(3){transition-delay:.16s}.stg>*:nth-child(4){transition-delay:.24s}.stg>*:nth-child(5){transition-delay:.32s}.stg>*:nth-child(6){transition-delay:.4s}.stg>*:nth-child(n+7){transition-delay:.46s}

/* ---------- Card che si inclinano in 3D seguendo il mouse, con riflesso ---------- */
.tilt{transform-style:preserve-3d;will-change:transform;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s ease,border-color .3s}
.tilt.tilting{transition:transform .08s linear,box-shadow .3s ease}
.tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.10),transparent 45%)}
.tilt.tilting::after{opacity:1}
.tilt.tilting{box-shadow:0 30px 60px -20px rgba(0,0,0,.6),0 0 0 1px rgba(255,194,26,.12)}
.tilt .pop{transform:translateZ(30px)}

/* ---------- Veicoli ---------- */
.tier .car{perspective:600px;overflow:visible}
.veh{overflow:visible;transform-origin:50% 90%;transition:transform .7s cubic-bezier(.16,1,.3,1),filter .5s}
.veh .wh{transform-box:fill-box;transform-origin:center}
.veh .bd{transform-box:view-box;transform-origin:50% 100%}
.veh .spd line{stroke-dasharray:26;stroke-dashoffset:26;opacity:0}
.veh .lamp{transition:filter .4s}
.veh .mz{opacity:0;transform-box:fill-box;transform-origin:center}
.veh .gun{transform-box:view-box}
.veh .tur{transform-box:fill-box;transform-origin:30% 100%}
/* entrata: il veicolo arriva da sinistra, frena e si assesta sulle sospensioni */
.js .tier.pre .veh{transform:translateX(-120%);opacity:0}
.tier .veh{animation:none}
.tier.drive .veh{animation:drive-in 1.25s cubic-bezier(.16,1,.3,1) both}
.tier.drive .veh .wh{animation:spin-in 1.25s cubic-bezier(.16,1,.3,1) both}
.tier.drive .veh .bd{animation:brake 1.25s ease both}
.tier.drive .veh .spd line{animation:speed 1s ease-out both}
@keyframes drive-in{from{transform:translateX(-120%);opacity:0}30%{opacity:1}to{transform:none;opacity:1}}
@keyframes spin-in{from{transform:rotate(-900deg)}to{transform:rotate(0)}}
@keyframes brake{0%,62%{transform:none}74%{transform:rotate(2.2deg) translateY(1px)}86%{transform:rotate(-1deg)}100%{transform:none}}
@keyframes speed{0%{stroke-dashoffset:26;opacity:0}30%{opacity:1}100%{stroke-dashoffset:-26;opacity:0}}
/* al passaggio del mouse: motore acceso, ruote che girano, sospensioni, fari */
.tier:hover .veh{transform:rotateY(-14deg) rotateX(6deg) translateX(6px) scale(1.04);filter:drop-shadow(0 14px 18px rgba(0,0,0,.45))}
.tier:hover .veh .wh{animation:spin .55s linear infinite}
.tier:hover .veh .bd{animation:idle .32s ease-in-out infinite alternate}
.tier:hover .veh .spd line{animation:speed .7s linear infinite}
.tier:hover .veh .spd line:nth-child(2){animation-delay:.2s}.tier:hover .veh .spd line:nth-child(3){animation-delay:.4s}
.tier:hover .veh .lamp{filter:drop-shadow(0 0 6px #fff6d0) drop-shadow(0 0 14px #ffc21a)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes idle{from{transform:translateY(0)}to{transform:translateY(-1.3px) rotate(-.4deg)}}
/* carri armati: cingoli che scorrono, torretta che punta, colpo con rinculo */
.veh-tank .trk{animation:track 1.6s linear infinite paused}
.tier:hover .veh-tank .trk,.tier.drive .veh-tank .trk{animation-play-state:running}
@keyframes track{to{stroke-dashoffset:-24}}
.tier:hover .veh-tank .wh{animation-duration:.9s}
.tier:hover .veh-tank .bd{animation:rumble .14s linear infinite alternate}
@keyframes rumble{from{transform:translateY(0)}to{transform:translateY(-.8px)}}
.tier:hover .veh-tank .tur{animation:aim 2.4s ease-in-out infinite}
.tier:hover .veh-tank .gun{animation:recoil 2.4s ease-in-out infinite}
.tier:hover .veh-tank .mz{animation:flash 2.4s ease-out infinite}
@keyframes aim{0%,100%{transform:rotate(0)}30%,55%{transform:rotate(-4deg)}}
@keyframes recoil{0%,54%{transform:translateX(0)}57%{transform:translateX(-7px)}75%,100%{transform:translateX(0)}}
@keyframes flash{0%,54%{opacity:0;transform:scale(.3)}56%{opacity:1;transform:scale(1.5)}66%{opacity:0;transform:scale(2.2)}100%{opacity:0}}

/* ---------- Pulsanti magnetici e luccichio ---------- */
.btn-taxi,.btn-y{position:relative;overflow:hidden}
.btn-taxi::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:shine 4.5s ease-in-out infinite}
@keyframes shine{0%,70%{left:-60%}100%{left:130%}}
.mag{transition:transform .35s cubic-bezier(.16,1,.3,1)}

/* ---------- Titoli: la parte gialla si accende con un riflesso quando entra in vista ---------- */
.sec-head .hl{background-size:100% 220%;background-position:0 100%;transition:background-position 1.2s cubic-bezier(.16,1,.3,1) .3s}
.sec-head.in-done .hl{background-position:0 0}

/* ---------- Barra di avanzamento della lettura ---------- */
.readbar{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#ffc21a,#ffe07a);z-index:200;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .js .rv.pre,.js .stg.pre>*,.js .tier.pre .veh{opacity:1;transform:none}
  .tier .veh,.tier .veh *,.btn-taxi::before{animation:none!important}
  .tilt{transform:none!important}
}