/* ============================================================
   motion.css · movimento del sito (Julien 19/09: "ultra rich", disposizione invariata)
   Tre livelli, nessuno cambia misure o posizioni:
   1. Stati iniziali SOLO sotto html.m-js:not(.m-done). m-js lo mette lo script in <head> (mai con
      reduced-motion), m-done lo mette motion.js a setup finito o su errore, e comunque il failsafe a 4s.
      Senza JS, senza GSAP o con la CDN giù tutto resta visibile.
   2. Micro-interazioni al passaggio e alla pressione: solo CSS, funzionano anche senza JS.
   3. Transizioni di pagina (View Transitions), header escluso.
   Solo transform, opacity, clip-path (più translate/scale, che sono transform). Con reduced-motion: niente.
   ============================================================ */

:root {
  --m-expo: cubic-bezier(.16, 1, .3, 1);
  --m-power3: cubic-bezier(.215, .61, .355, 1);
}

/* ---------- 1. Stati iniziali prima che motion.js prenda il controllo ---------- */
html.m-enter:not(.m-done) .site-header { opacity: 0; }
html.m-js:not(.m-done) :is(.hhero__h1, .hhero__sub, .hhero__bar, .phero__h1, .phero__sub, .phero .crumb, .phero .facts > div) { opacity: 0; }
html.m-js:not(.m-done) .hhero__img { transform: scale(1.04); }
html.m-js:not(.m-done) :is(.phero__media, main > .bleed:first-child) { opacity: 0; }
html.m-js:not(.m-done) main :is(h2:not(.sr-only), .tiles > li, .hubcard, .pack, .world, .lead, .facts > div) { opacity: 0; }
html.m-js:not(.m-done) :is(.seq, .steps) { --m-line: 0; }
html.m-js:not(.m-done) :is(.seq__item, .step, .marquee__list li) { --m-dot: 0; }

/* Parole dei titoli: maschera per riga. Elementi personalizzati, così nessuna regola "h2 span" li tocca */
m-w { clip-path: inset(-.12em -.3em -.2em -.3em); }
m-i { display: inline-block; }

/* Pallini e filetti disegnati da pseudo-elementi: motion.js li anima con variabili CSS */
.marquee__list li::after { transform: scale(calc(var(--m-dot, 1) * (1 + var(--m-pulse, 0) * .7))); }
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .marquee__list li::after { background: color-mix(in srgb, var(--p-800) calc(var(--m-pulse, 0) * 100%), var(--p-300)); }
}
:is(.seq, .steps)::before { transform-origin: 50% 0; transform: scaleY(var(--m-line, 1)); }
:is(.seq__item, .step)::before { transform: scale(var(--m-dot, 1)); }

/* Il riquadro a tutta larghezza resta tagliato (lo zoom lento dell'hero non esce dai bordi) */
:is(.bleed, .full-bleed, .phero__media) { overflow: hidden; }

/* Pallini del marquee (23/10): la pulsazione gira in CSS (compositore). motion.js mette --m-i su ogni pallino e la classe
   m-pulsing (m-paused fuori dallo schermo): ogni pallino cresce in 0,55 s e torna in 1,1 s, 0,32 s dopo il precedente,
   e il giro ricomincia ogni 6,4 s (i 12 pallini della home: 11 × 0,32 + 1,65 + 1,2 di pausa, come la timeline di prima) */
.marquee.m-pulsing .marquee__list li::after { animation: m-pulse 6.4s ease-in-out infinite; animation-delay: calc(var(--m-i, 0) * .32s); }
.marquee.m-pulsing.m-paused .marquee__list li::after { animation-play-state: paused; }
@keyframes m-pulse {
  0% { transform: scale(1); background: var(--p-300); }
  8.6% { transform: scale(1.7); background: var(--p-800); }
  25.8%, 100% { transform: scale(1); background: var(--p-300); }
}

/* GSAP arrivato dopo il failsafe dei 4 s (rete lenta; lo script nel head mette m-done e m-late): quello che era
   nascosto si dissolve in 0,9 s invece di comparire di colpo (23/10). Solo con m-js: con reduced-motion niente. */
html.m-js.m-late :is(.hhero__h1, .hhero__sub, .hhero__bar, .phero__h1, .phero__sub, .phero .crumb, .phero .facts > div, .phero__media, main > .bleed:first-child),
html.m-js.m-late main :is(h2:not(.sr-only), .tiles > li, .hubcard, .pack, .world, .lead, .facts > div),
html.m-js.m-late.m-enter .site-header { animation: m-fade 900ms var(--m-power3) both; }

/* ---------- 2. Micro-interazioni (anche senza JS) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Pulsanti: riempimento che scorre da sinistra, freccia che avanza, pressione a .98 */
  .btn, .btn:hover {
    background-image: linear-gradient(var(--m-fill, transparent), var(--m-fill, transparent));
    background-repeat: no-repeat; background-position: 0 0;
  }
  .btn {
    background-size: 0% 100%;
    transition: background-color var(--durata-breve) var(--ease), border-color var(--durata-breve) var(--ease), color var(--durata-breve) var(--ease),
      background-size 700ms var(--m-expo), scale 220ms var(--m-expo);
  }
  .btn--primary { --m-fill: var(--btn-primary-hover); }
  .btn--outline { --m-fill: var(--bg-row-hover); }
  [data-surface="dark"] .btn--outline { --m-fill: var(--bg-dark-inset); }
  .btn--primary:hover { background-color: var(--btn-primary-bg); }
  .btn--outline:hover { background-color: transparent; }
  .btn:hover { background-size: 100% 100%; }
  .btn:active { scale: .98; }
  .btn .arrow, .tlink .arrow { transition: transform 700ms var(--m-expo); }
  .btn:hover .arrow, .tlink:hover .arrow { transform: translateX(6px); }
  .tlink { transition: border-color 400ms var(--m-expo); }
  .tlink:active, .rail-btn:active { scale: .98; }

  /* Riquadri, card, pacchetti: zoom lento dell'immagine, didascalia che sale, sfumatura più scura */
  .tile__img, .hubcard .media img, .pack .media img, .gal__open img, .world .media img, .cars figure img {
    transition: transform 900ms var(--m-expo);
  }
  .tile__body, .pack__body, .hubcard .h3, .world__body { transition: transform 900ms var(--m-expo); }
  .tile::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(0deg, rgb(0 26 27 / .45) 0, rgb(0 26 27 / 0) 70%);
    opacity: 0; transition: opacity 900ms var(--m-expo);
  }
  :is(.hubcard, .pack) .media::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(0deg, rgb(0 26 27 / .32) 0, rgb(0 26 27 / 0) 65%);
    opacity: 0; transition: opacity 900ms var(--m-expo);
  }
  @media (hover: hover) {
    .tile:hover .tile__img,
    :is(.hubcard, .pack, .world):hover .media img,
    .gal__open:hover img, .cars figure:hover img { transform: scale(1.06); }
    .tile:hover .tile__body, .pack:hover .pack__body, .hubcard:hover .h3, .world:hover .world__body { transform: translateY(-4px); }
    .tile:hover::before, :is(.hubcard, .pack):hover .media::after { opacity: 1; }
  }
  .tile:active, .pack:active, .hubcard:active { scale: .995; transition: scale 220ms var(--m-expo); }

  /* Voci del menu: filetto che cresce da sinistra (la voce corrente resta col suo filetto) */
  .nav__links .nav__item > a:not([aria-current]) {
    background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
    transition: background-size 600ms var(--m-expo);
  }
  .nav__links .nav__item > a:not([aria-current]):hover { border-bottom-color: transparent; background-size: 100% 1px; }
  .footer a { transition: opacity 400ms var(--m-expo); }

  /* Tabelle prezzi: riga evidenziata con morbidezza */
  .opts tbody tr { transition: background-color 450ms var(--m-expo); }
  .opts tbody tr td:first-child .opts__name { transition: transform 600ms var(--m-expo); }
  @media (hover: hover) { .opts tbody tr:hover td:first-child .opts__name { transform: translateX(4px); } }

  /* Righe piegate su telefono: le imbarcazioni entrano in sequenza */
  .opts--fold tbody tr.is-open > td:not(:first-child) { animation: m-drop 600ms var(--m-expo) backwards; }
  .opts--fold tbody tr.is-open > td:nth-child(3) { animation-delay: 50ms; }
  .opts--fold tbody tr.is-open > td:nth-child(4) { animation-delay: 100ms; }
  .opts--fold tbody tr.is-open > td:nth-child(5) { animation-delay: 150ms; }
  .opts--fold tbody tr.is-open > td:nth-child(6) { animation-delay: 200ms; }
  .opts--fold tbody tr.is-open > td:nth-child(n+7) { animation-delay: 250ms; }

  /* Tendine del menu, lingua, scelta multipla del servizio: dissolvenza e 6px */
  .nav__panel:not([hidden]), .nav__lang-list:not([hidden]), .msel.is-open .msel__pop { animation: m-drop 420ms var(--m-expo); }
  .msel--up.is-open .msel__pop { animation-name: m-rise6; }

  /* Overlay mobile: fondo in dissolvenza, voci in sequenza */
  .menu:not([hidden]) { animation: m-fade 450ms var(--m-expo); }
  .menu:not([hidden]) :is(.menu__links > *, .menu__bottom) { animation: m-rise 800ms var(--m-expo) backwards; }
  .menu:not([hidden]) .menu__links > :nth-child(1) { animation-delay: 60ms; }
  .menu:not([hidden]) .menu__links > :nth-child(2) { animation-delay: 120ms; }
  .menu:not([hidden]) .menu__links > :nth-child(3) { animation-delay: 180ms; }
  .menu:not([hidden]) .menu__links > :nth-child(4) { animation-delay: 240ms; }
  .menu:not([hidden]) .menu__links > :nth-child(5) { animation-delay: 300ms; }
  .menu:not([hidden]) .menu__links > :nth-child(6) { animation-delay: 360ms; }
  .menu:not([hidden]) .menu__links > :nth-child(n+7) { animation-delay: 420ms; }
  .menu:not([hidden]) .menu__bottom { animation-delay: 480ms; }
  .menu__sub:not([hidden]) { animation: m-drop 500ms var(--m-expo); }

  /* Foglio "Verifica disponibilità" su telefono: sale dal basso */
  .avail-sheet[open] { animation: m-sheet 700ms var(--m-expo); }
  .avail-sheet[open]::backdrop { animation: m-fade 500ms var(--m-expo); }

  /* Barra mobile: scorrimento più morbido */
  .mbar { transition: transform 900ms var(--m-expo); }
}

@keyframes m-drop { from { opacity: 0; translate: 0 -6px; } }
@keyframes m-rise6 { from { opacity: 0; translate: 0 6px; } }
@keyframes m-rise { from { opacity: 0; translate: 0 18px; } }
@keyframes m-fade { from { opacity: 0; } }
@keyframes m-sheet { from { translate: 0 100%; } }

/* ---------- 3. Transizioni tra pagine: dissolvenza morbida, header fermo ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-old(root) { animation: 380ms var(--m-power3) both m-vt-out; }
  ::view-transition-new(root) { animation: 620ms var(--m-expo) 80ms both m-vt-in; }
  ::view-transition-group(site-header) { animation-duration: 0s; }
}
@keyframes m-vt-out { to { opacity: 0; } }
@keyframes m-vt-in { from { opacity: 0; } }

/* ---------- Reduced motion: tutto fermo e visibile ---------- */
@media (prefers-reduced-motion: reduce) {
  m-w { clip-path: none; }
  .marquee__list li::after, :is(.seq, .steps)::before, :is(.seq__item, .step)::before { transform: none; }
}