/* Home: effetti in stile Framer «spinti» (assets/js/home-fx.js, 07/10/2026).
   La classe html.hfx la mette lo script solo quando GSAP c'è e il movimento non è ridotto:
   senza, valgono le animazioni CSS di prima. */

/* dove la regia passa a GSAP, le animazioni CSS legate a view() si spengono */
html.hfx .where__media, html.hfx .where__media img,
html.hfx .dish__media, html.hfx .dish__media img, html.hfx .dish__card,
html.hfx .riccione__media img,
html.hfx .offers__head, html.hfx .offer,
html.hfx .faq__head .h2 { animation: none; }

/* zoom delle foto: «scale» si somma al transform dell'hover, invece di toglierlo */
html.hfx .where__media img, html.hfx .dish__media img,
html.hfx .offer__media img, html.hfx .riccione__media img { scale: var(--hfx-z, 1); }
html.hfx .where__media, html.hfx .dish__media, html.hfx .offer__media { will-change: clip-path, transform; }

/* hero: attorno alla finestra finale c'è il colore del manifesto, e il velo scuro se ne va */
html.hfx .hero { background: var(--warm); }
html.hfx .hero::after { opacity: var(--hfx-ov, 1); }

/* Riccione: attorno alla finestra iniziale il petrolio profondo (= il velo, quindi senza stacco) */
html.hfx .riccione { background: var(--teal-deep); }

/* offerte: prospettiva per il ribaltamento delle schede */
html.hfx .offers__grid { perspective: 1400px; }

/* filo di avanzamento sotto l'header */
.hfx-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 1000; background: var(--sand);
  transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }