/* ═══════════════════════════════════════════════════════════
   fx.css — effetti in stile Framer (Network Service)
   Va caricato DOPO lo style.css del sito. Lavora in coppia con js/fx.js:
   senza fx.js (o con «riduci movimento») il sito resta quello del CSS base.
   ═══════════════════════════════════════════════════════════ */

/* ── Lenis (scroll morbido) ── */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ── Gli elementi animati da GSAP non usano il .reveal del CSS base:
      due motori sulla stessa proprietà si contendono il fotogramma ── */
.fx-on .reveal[data-fx] { opacity: 1; transform: none; transition: none; }

/* ── SplitText: righe mascherate, parole che restano in linea ── */
.fx-line { padding-bottom: .06em; margin-bottom: -.06em; }   /* non taglia le discendenti (g, p, q) */
.fx-w-inline { display: inline !important; }                   /* serve al capolettera (::first-letter) */

/* ── Marquee: lo muove GSAP, con velocità legata allo scroll ── */
.fx-on [data-fx="marquee"] .marquee-track { animation: none; }

/* ── Clip: l'immagine dentro la maschera non deve avere transizioni CSS
      mentre GSAP la scala (riprendono a fine animazione) ── */
.fx-busy, .fx-busy * { transition: none !important; }

/* ── Cursore con etichetta (data-fx-cursor="Scopri") ── */
.cursor-dot.fx-label {
  width: 92px; height: 92px; margin: -41px;
  background: var(--gold, #B08D57); mix-blend-mode: normal; opacity: .96;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font: 600 10px/1 var(--sans, sans-serif); letter-spacing: .22em; text-transform: uppercase;
}

/* ── Scroll orizzontale fissato (data-fx="hscroll") ── */
[data-fx="hscroll"] { overflow: hidden; }
[data-fx-track] { display: flex; width: max-content; will-change: transform; }
@media (max-width: 900px) {
  [data-fx="hscroll"] { overflow: visible; }
  [data-fx-track] { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  [data-fx-track] > * { scroll-snap-align: start; }
}

/* ═══════════ TRANSIZIONI FRA PAGINE (View Transitions API) ═══════════
   Funziona fra pagine dello stesso sito servite in http(s) — non da file://.
   Chrome/Edge 126+, Safari 18.2+; dove non c'è, la pagina cambia e basta. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: fx-vt-out .55s cubic-bezier(.7, 0, .3, 1) both; }
::view-transition-new(root) { animation: fx-vt-in .9s cubic-bezier(.16, 1, .3, 1) .1s both; }
@keyframes fx-vt-out { to { opacity: 0; transform: scale(.965); filter: blur(6px); } }
@keyframes fx-vt-in  { from { opacity: 0; transform: translateY(48px); } }

/* L'immagine con lo stesso view-transition-name sulle due pagine si trasforma
   dall'una all'altra (foto della scheda → copertina della pagina). */
::view-transition-group(*) { animation-duration: 1s; animation-timing-function: cubic-bezier(.7, 0, .2, 1); }
::view-transition-old(*), ::view-transition-new(*) { height: 100%; object-fit: cover; overflow: clip; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}