/* Effetti — supporto stilistico a matrix-text.js e blur-reveal.js.
   Nessuna modifica a font, colori o spaziature: solo stabilità del layout. */

/* Matrix: solo durante l'animazione ogni parola è un blocco che non va a capo e ogni lettera uno span
   di larghezza bloccata sul carattere originale. Il testo non cambia dimensione e non viene tagliato.
   Le voci di header e menu restano sempre su una riga. */
.site-header [data-matrix],.menu-overlay [data-matrix]{white-space:nowrap}
.matrix-label{display:inline}
.matrix-word{display:inline-block;white-space:nowrap}
.matrix-char{display:inline-block;white-space:pre;text-align:center;vertical-align:baseline}

/* Blur reveal: lo stato nascosto vale solo quando il JS ha marcato l'elemento
   con .reveal-ready. Senza JS (o se qualcosa va storto) il testo è visibile. */
[data-reveal] .reveal-word{display:inline-block}
[data-reveal].reveal-ready .reveal-word{filter:blur(8px);opacity:0;color:#8a8a8a;transition:filter .9s cubic-bezier(.22,.68,.24,1),opacity .9s cubic-bezier(.22,.68,.24,1),color .9s ease}
[data-reveal].reveal-ready .reveal-word.on{filter:blur(0);opacity:1;color:#fff}

/* Cursor FX (assets/js/cursor-fx.js) — attivo solo con mouse fine e finestra
   >= 901px, dove lo script mette .cursorfx-on su <html>.
   Le transizioni di ritorno stanno qui; mentre il cursore guida l'elemento lo
   script mette .is-tilting / .is-magnet che le disattivano. */
.cursorfx-on [data-cursor="tilt"]{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.22,.68,.24,1)}
.cursorfx-on [data-cursor="tilt"].is-tilting{transition:none}
.cursorfx-on [data-cursor="tilt"].is-tilting .work-media>*{transition:none}
.cursorfx-on [data-cursor="magnet"]{transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.cursorfx-on [data-cursor="magnet"].is-magnet{transition:none}
.cursorfx-on [data-cursor="glow"]{overflow:hidden;isolation:isolate}
.cursor-glow{position:absolute;left:0;top:0;z-index:-1;width:360px;height:360px;margin:-180px 0 0 -180px;border-radius:50%;pointer-events:none;background:var(--brand);filter:blur(60px);opacity:0;transition:opacity .6s ease}
.cursor-glow.is-on{opacity:.25}

/* Scroll FX: parallax e rotazione sono composti in un unico transform da
   scroll-fx.js, quindi l'animazione CSS "float" della goccia va spenta quando
   lo script è attivo (classe .scrollfx-on su <html>). Senza JS il float resta. */
.scrollfx-on .hero-mark{animation:none}
[data-parallax],[data-rotate]{transform:translate3d(0,0,0);backface-visibility:hidden}

/* Entrate allo scroll (assets/js/enter-fx.js, 20 ottobre 2026): data-fx="tipo" sull'elemento.
   Nascosto solo con l'opacità (il layout non cambia) finché lo script non mette data-fx-in; senza JS
   (niente html.fx-on) compare da solo dopo 4 s. Fill "backwards": finita l'entrata l'elemento torna ai
   suoi stili, hover compresi. Ritardo (stagger + data-fx-delay) in --fx-d, messo dallo script. */
@media (prefers-reduced-motion:no-preference){
  [data-fx]:not([data-fx-in]){opacity:0}
  html:not(.fx-on) [data-fx]:not([data-fx-in]){animation:fx-safe 0s 4s forwards}
  [data-fx][data-fx-in]{animation-duration:1.1s;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-delay:var(--fx-d,0ms);animation-fill-mode:backwards}
  [data-fx="sali"][data-fx-in]{animation-name:fx-sali;animation-duration:.9s;animation-timing-function:cubic-bezier(.22,.68,.24,1)}
  [data-fx="tenda"][data-fx-in]{animation-name:fx-tenda;animation-timing-function:cubic-bezier(.77,0,.18,1)}
  [data-fx="carta"][data-fx-in]{animation-name:fx-carta}
  [data-fx="riga"][data-fx-in]{animation-name:fx-riga;animation-duration:.9s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
  [data-fx="sipario"][data-fx-in]{animation-name:fx-sipario;animation-duration:1.2s;animation-timing-function:cubic-bezier(.77,0,.18,1)}
  [data-fx="zoom"][data-fx-in]{animation-name:fx-zoom;animation-duration:1.3s;animation-timing-function:cubic-bezier(.22,.68,.24,1)}
  [data-fx="bolla"][data-fx-in]{animation-name:fx-bolla;animation-duration:.75s;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}
  [data-fx="sx"][data-fx-in]{animation-name:fx-sx}
  [data-fx="dx"][data-fx-in]{animation-name:fx-dx}
  [data-fx="pagina"][data-fx-in]{animation-name:fx-pagina;transform-origin:0 50%}
  [data-fx="scala"][data-fx-in]{animation-name:fx-scala}
  .section:has([data-fx="dx"]){overflow-x:clip}
}
@media (prefers-reduced-motion:no-preference) and (max-width:900px){
  [data-fx="sx"][data-fx-in],[data-fx="dx"][data-fx-in]{animation-name:fx-sali;animation-duration:.9s;animation-timing-function:cubic-bezier(.22,.68,.24,1)}
}
@keyframes fx-safe{to{opacity:1}}
@keyframes fx-sali{from{opacity:0;transform:translateY(var(--fx-sali-y,22px));filter:blur(var(--fx-sali-b,6px))}}
@keyframes fx-tenda{from{clip-path:inset(0 100% 0 0);transform:translateX(var(--fx-tenda-x,-14px))}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes fx-carta{from{opacity:0;transform:perspective(1100px) translateY(var(--fx-carta-y,64px)) rotateX(var(--fx-carta-r,20deg)) scale(.96)}55%{opacity:1}}
@keyframes fx-riga{from{opacity:0;transform:translateX(var(--fx-riga-x,-36px))}}
@keyframes fx-sipario{from{clip-path:inset(100% 0 0 0 round 22px);transform:translateY(var(--fx-sipario-y,32px))}to{clip-path:inset(0 0 0 0 round 22px);transform:none}}
@keyframes fx-zoom{from{opacity:0;transform:scale(var(--fx-zoom-s,1.07));filter:blur(var(--fx-zoom-b,14px))}}
@keyframes fx-bolla{from{opacity:0;transform:scale(.3)}50%{opacity:1}}
@keyframes fx-sx{from{opacity:0;transform:translateX(calc(-1 * var(--fx-lato,56px)));filter:blur(4px)}}
@keyframes fx-dx{from{opacity:0;transform:translateX(var(--fx-lato,56px));filter:blur(4px)}}
@keyframes fx-pagina{from{opacity:0;transform:perspective(1200px) rotateY(var(--fx-pagina-r,-40deg)) translateX(var(--fx-pagina-x,-24px))}60%{opacity:1}}
@keyframes fx-scala{from{opacity:0;transform:translateY(var(--fx-scala-y,40px)) scale(var(--fx-scala-s,.92))}}
/* Telefono e tablet touch (23 ottobre 2026): stesse entrate, movimenti più corti (telefono circa 60%, tablet touch 80%) e sul
   telefono un filo più svelte. Le distanze sono variabili dei keyframe qui sopra: sul desktop valgono i valori di sempre. */
@media (max-width:600px){
  :root{--fx-sali-y:14px;--fx-sali-b:4px;--fx-tenda-x:-10px;--fx-carta-y:36px;--fx-carta-r:13deg;--fx-riga-x:-20px;--fx-sipario-y:20px;--fx-zoom-s:1.04;--fx-zoom-b:10px;--fx-lato:28px;--fx-pagina-r:-26deg;--fx-pagina-x:-14px;--fx-scala-y:24px;--fx-scala-s:.95}
  [data-reveal].reveal-ready .reveal-word{transition-duration:.75s}
}
@media (min-width:601px) and (max-width:1024px) and (hover:none),(min-width:601px) and (max-width:1024px) and (pointer:coarse){
  :root{--fx-sali-y:18px;--fx-sali-b:5px;--fx-tenda-x:-12px;--fx-carta-y:50px;--fx-carta-r:16deg;--fx-riga-x:-28px;--fx-sipario-y:26px;--fx-zoom-s:1.055;--fx-zoom-b:12px;--fx-lato:44px;--fx-pagina-r:-32deg;--fx-pagina-x:-18px;--fx-scala-y:32px;--fx-scala-s:.935}
}
@media (prefers-reduced-motion:no-preference) and (max-width:600px){
  [data-fx][data-fx-in]{animation-duration:.95s}
  [data-fx="sali"][data-fx-in],[data-fx="riga"][data-fx-in],[data-fx="sx"][data-fx-in],[data-fx="dx"][data-fx-in]{animation-duration:.75s}
  [data-fx="sipario"][data-fx-in]{animation-duration:1s}
  [data-fx="zoom"][data-fx-in]{animation-duration:1.1s}
  [data-fx="bolla"][data-fx-in]{animation-duration:.65s}
}
@media print{[data-fx]{opacity:1!important;animation:none!important}}

@media (prefers-reduced-motion:reduce){
  [data-reveal].reveal-ready .reveal-word{filter:none;opacity:1;color:#fff;transition:none}
  [data-parallax],[data-rotate]{transform:none;will-change:auto}
  .cursor-glow{display:none}
}