/* Motore Mercurio — la parte che si vede.
   Senza JavaScript nessuna di queste regole nasconde niente: gli stati
   di partenza li mette il motore, non il foglio di stile. */

/* preloader: copre il montaggio della pagina, poi si dissolve */
.velo{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:22px;transition:opacity .6s ease,visibility .6s}
.velo.via{opacity:0;visibility:hidden;pointer-events:none}
.velo .segno{width:min(58vw,300px);animation:respiro 1.6s ease-in-out infinite}
.velo .filo{width:min(52vw,220px);height:2px;background:rgba(255,255,255,.18);overflow:hidden;border-radius:2px}
.velo .filo i{display:block;height:100%;width:40%;background:currentColor;animation:corsa 1.1s ease-in-out infinite}
@keyframes respiro{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes corsa{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}

/* entrata dell'apertura: parte a fine preloader, e comunque dopo 1,2s */
.js.entrata [data-entra]{animation:sali .9s cubic-bezier(.22,.8,.3,1) backwards}
.js.entrata [data-entra="2"]{animation-delay:.1s}
.js.entrata [data-entra="3"]{animation-delay:.2s}
.js.entrata [data-entra="4"]{animation-delay:.3s}
@keyframes sali{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* comparse e parole: il motore scrive opacity/transform a ogni scorrimento */
[data-riv]{will-change:opacity,transform}
.parola{display:inline-block;transition:opacity .18s linear}
[data-par]{will-change:transform}
@media (pointer:coarse){[data-par]{will-change:auto}}

/* schede inclinabili */
[data-tilt]{transition:transform .35s cubic-bezier(.22,.8,.3,1),box-shadow .35s}

/* tela delle scene */
.tela{display:block;width:100%;height:100%}

@media (prefers-reduced-motion:reduce){
  .js.entrata [data-entra]{animation:none}
  [data-riv],[data-par]{transform:none!important;opacity:1!important}
  .parola{opacity:1!important;transform:none!important}
}