/* ============================================================ MOTION — strato sopra il disegno
   Le animazioni partono quando si arriva sulla sezione, mai al caricamento: le muove
   motion.js con un IntersectionObserver.

   Ogni animazione descrive solo lo stato di PARTENZA (il "from") e non riempie dopo la fine
   (animation-fill-mode: backwards): a movimento finito ogni elemento ha esattamente gli stili
   che ha senza motion. Si attiva solo se <html> ha la classe "motion", che lo script in testa
   mette solo quando il visitatore non chiede movimento ridotto. Senza JavaScript la pagina
   e' tutta visibile e ferma: il contenuto non dipende dal movimento. */

:root {
  --m-curva: cubic-bezier(.22, 1, .36, 1);
  --m-y: 22px;
  --m-t: 700ms;
  --m-t-titolo: 820ms;
  --m-t-foto: 1000ms;
  --m-t-linea: 900ms;
}
@media (max-width: 759.98px) { :root { --m-y: 14px; --m-t: 620ms; } }

@keyframes m-su { from { opacity: 0; transform: translateY(var(--m-y)); } }
@keyframes m-fade { from { opacity: 0; } }
@keyframes m-comparsa { from { opacity: 0; transform: scale(.9); } }
@keyframes m-scala { from { scale: 1.03; } }
@keyframes m-traccia-x { from { transform: scaleX(0); } }
@keyframes m-salita { from { opacity: 0; transform: translateY(34px); } }

/* prima dell'ingresso: nascosto, ma solo con JS attivo */
.motion [data-reveal]:not([data-in]) { opacity: 0; }

.motion [data-in] {
  animation-timing-function: var(--m-curva);
  animation-fill-mode: backwards;
  animation-delay: var(--m-d, 0ms);
}
.motion [data-reveal="su"][data-in]      { animation-name: m-su; animation-duration: var(--m-t); }
.motion [data-reveal="titolo"][data-in]  { animation-name: m-su; animation-duration: var(--m-t-titolo); }
.motion [data-reveal="fade"][data-in]    { animation-name: m-fade; animation-duration: 900ms; }
.motion [data-reveal="comparsa"][data-in]{ animation-name: m-comparsa; animation-duration: 650ms; }

/* l'etichetta sopra i titoli: prima il filetto si allunga, poi compare la scritta */
.motion [data-reveal="occhiello"][data-in] { animation-name: m-fade; animation-duration: 560ms; animation-delay: calc(var(--m-d, 0ms) + 240ms); }
.motion [data-reveal="occhiello"]::before { transform-origin: left center; }
.motion [data-reveal="occhiello"][data-in]::before { animation: m-traccia-x var(--m-t-linea) var(--m-curva) var(--m-d, 0ms) backwards; }

/* la foto: dissolvenza della cornice, micro-scala dell'immagine dentro */
.motion [data-reveal="foto"][data-in] { animation-name: m-fade; animation-duration: var(--m-t-foto); }
.motion [data-reveal="foto"][data-in] img { animation: m-scala calc(var(--m-t-foto) + 300ms) var(--m-curva) var(--m-d, 0ms) backwards; }

/* un passo: prima il filetto in cima, poi il numero, poi il testo */
.motion [data-reveal="passo"][data-in] { animation-name: m-fade; animation-duration: 10ms; }
.motion [data-reveal="passo"] { border-top-color: transparent; }
.motion [data-reveal="passo"][data-in] { border-top-color: var(--inchiostro); transition: border-top-color 10ms linear var(--m-d, 0ms); }
.motion [data-reveal="passo"][data-in] .passo-numero { animation: m-comparsa 620ms var(--m-curva) var(--m-d, 0ms) backwards; }
.motion [data-reveal="passo"][data-in] :is(h3, p) { animation: m-su var(--m-t) var(--m-curva) calc(var(--m-d, 0ms) + 150ms) backwards; }

/* un telefono: sale da sotto, uno dietro l'altro */
.motion [data-reveal="telefono"][data-in] { animation-name: m-salita; animation-duration: 900ms; }

/* una scheda di pacchetto: sale, e dentro la cifra arriva un attimo dopo */
.motion [data-reveal="scheda"][data-in] { animation-name: m-su; animation-duration: var(--m-t); }
.motion [data-reveal="scheda"][data-in] .prezzo-cifra { animation: m-su 700ms var(--m-curva) calc(var(--m-d, 0ms) + 120ms) backwards; }

/* ------------------------------------------------------------ passaggi del cursore, sempre attivi */
.domanda > summary { transition: color .2s ease; }
@media (hover: hover) { .domanda > summary:hover { color: var(--oro-scuro); } }

/* ------------------------------------------------------------ movimento ridotto: tutto fermo, tutto visibile */
@media (prefers-reduced-motion: reduce) {
  .motion [data-reveal], .motion [data-reveal] *,
  .motion [data-reveal]::before, .motion [data-reveal]::after {
    animation: none !important; transition: none !important; opacity: 1;
  }
  .motion [data-reveal]:not([data-in]) { opacity: 1 !important; }
  .motion [data-reveal="passo"] { border-top-color: var(--inchiostro); }
  .bottone, .bottone svg, .domanda > summary::after { transition: none !important; }
}