/* ============================================================================ MOTION — livello sopra il design
   Home di Irene Carrer. Il design V2 (tag carrer-irene-desktop-v2 / mobile-v2) resta lo stato finale: ogni
   animazione definisce solo lo stato di PARTENZA (keyframe "from") e non riempie dopo la fine
   (animation-fill-mode: backwards), quindi a movimento finito ogni elemento ha esattamente i suoi stili.
   Si attiva solo se <html> ha la classe "motion" (la mette lo script in testa, e solo se il visitatore non
   chiede movimento ridotto): senza JS o con prefers-reduced-motion tutto e' visibile e fermo.
   Grammatiche (data-reveal): su, titolo, lento, fade, emerge, comparsa, foto, linea, traccia-x, traccia-y,
   passo, dimensione, timeline, scena. Ritardo: --m-d (lo calcola motion.js). Parallax: data-parallax.
   data-segue: entra con il suo capofila (stesso ritardo), non e' osservato da solo. */
:root {
  --m-ease: cubic-bezier(.22, 1, .36, 1);
  --m-y: 22px;          /* salita del testo */
  --m-y2: 26px;         /* salita dei titoli */
  --m-t: 700ms;         /* testo */
  --m-t-titolo: 800ms;
  --m-t-foto: 1000ms;
  --m-t-gruppo: 780ms;
  --m-t-linea: 900ms;
  --m-t-lento: 1500ms;
}
@media (max-width: 767.98px) { :root { --m-y: 14px; --m-y2: 16px; --m-t: 620ms; --m-t-gruppo: 650ms; } }

@keyframes m-su { from { opacity: 0; transform: translateY(var(--m-y)); } }
@keyframes m-titolo { from { opacity: 0; transform: translateY(var(--m-y2)); } }
@keyframes m-fade { from { opacity: 0; } }
@keyframes m-emerge { from { opacity: 0; transform: translateY(10px); } }
@keyframes m-comparsa { from { opacity: 0; transform: scale(.9); } }
@keyframes m-scala { from { scale: 1.025; } }
@keyframes m-traccia-x { from { transform: scaleX(0); } }
@keyframes m-traccia-y { from { transform: scaleY(0); } }
@keyframes m-testo { from { -webkit-text-fill-color: transparent; } }
@keyframes m-diagonale { from { opacity: 0; transform: translateX(-16px); } }

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

/* ---------------------------------------------------------------- ingresso */
.motion [data-in] { animation-timing-function: var(--m-ease); 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-titolo; animation-duration: var(--m-t-titolo); }
.motion [data-reveal="lento"][data-in] { animation-name: m-su; animation-duration: 1100ms; }
.motion [data-reveal="fade"][data-in] { animation-name: m-fade; animation-duration: 900ms; }
.motion [data-reveal="emerge"][data-in] { animation-name: m-emerge; animation-duration: var(--m-t-lento); }
.motion [data-reveal="comparsa"][data-in] { animation-name: m-comparsa; animation-duration: 650ms; }
/* foto: dissolvenza del riquadro, micro-scala della foto dentro (il riquadro taglia) */
.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-ease) var(--m-d, 0ms) backwards; }
/* linee: si disegnano da sinistra (o dall'alto) */
.motion [data-reveal="traccia-x"] { transform-origin: left center; }
.motion [data-reveal="traccia-y"] { transform-origin: center top; }
.motion [data-reveal="traccia-x"][data-in] { animation-name: m-traccia-x; animation-duration: var(--m-t-linea); }
.motion [data-reveal="traccia-y"][data-in] { animation-name: m-traccia-y; animation-duration: var(--m-t-linea); }
/* etichetta sopra i titoli: prima il filo si allunga, poi compare il testo (firma ricorrente) */
.motion [data-reveal="linea"]::after { transform-origin: left center; }
.motion [data-reveal="linea"][data-in] { animation-name: m-testo; animation-duration: 600ms; animation-delay: calc(var(--m-d, 0ms) + 260ms); }
.motion [data-reveal="linea"][data-in]::after { animation: m-traccia-x 800ms var(--m-ease) var(--m-d, 0ms) backwards; }
/* un passo del processo (s06): prima il cerchio, poi il nome */
.motion [data-reveal="passo"][data-in] { animation-name: m-fade; animation-duration: 10ms; }
.motion [data-reveal="passo"][data-in] :is(.cerchio-s06, .cerchio-s07, .cerchio-s10),
.motion [data-reveal="passo"][data-in]::before { animation: m-fade 650ms var(--m-ease) var(--m-d, 0ms) backwards; }
.motion [data-reveal="passo"][data-in] :is(.nome-passo-s06, .nome-s07, .titolo-fase-s10) { animation: m-su var(--m-t) var(--m-ease) calc(var(--m-d, 0ms) + 140ms) backwards; }
/* una dimensione di A.L.I.N.E.A.: prima la grande lettera, poi nome e descrizione (niente cerchi, numeri, linee) */
.motion [data-reveal="dimensione"][data-in] { animation-name: m-fade; animation-duration: 10ms; }
.motion [data-reveal="dimensione"][data-in] .lettera-v2 { animation: m-titolo 900ms var(--m-ease) var(--m-d, 0ms) backwards; }
.motion [data-reveal="dimensione"][data-in] :is(.nome-v2, .testo-v2) { animation: m-su var(--m-t) var(--m-ease) calc(var(--m-d, 0ms) + 170ms) backwards; }
/* timeline verticale del telefono (s06): la linea si costruisce dall'alto */
.motion [data-reveal="timeline"]::before { transform-origin: center top; }
.motion [data-reveal="timeline"]:not([data-in])::before { transform: scaleY(0); }
.motion [data-reveal="timeline"][data-in]::before { animation: m-traccia-y 1400ms var(--m-ease) var(--m-d, 0ms) backwards; }
/* Kreo: il segno diagonale del telefono entra di lato, prima del logo */
.motion #kreo-agency[data-reveal="scena"]:not([data-in])::before { opacity: 0; }
.motion #kreo-agency[data-reveal="scena"][data-in]::before { animation: m-diagonale 700ms var(--m-ease) backwards; }

/* ---------------------------------------------------------------- CTA e link (sempre, anche senza la classe motion) */
.st .cta, .st .cta-s06, .piede-prenota, .menu-telefono-prenota {
  transition: background-color .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease; }
.st :is(.cta, .link, .cta-s06, .link-s09) svg { transition: transform .26s var(--m-ease); }
@media (hover: hover) {
  .st :is(.cta, .link):hover svg { transform: translateX(4px); }
  .st .cta-s06:hover svg { transform: translateY(3px); }          /* freccia in giu': scende, non va a destra */
}
.st :is(.cta, .link):focus-visible svg { transform: translateX(4px); }
.st .cta-s06:focus-visible svg { transform: translateY(3px); }

/* s09: schede del desktop, sollevamento minimo e freccia; righe del telefono, freccia al tocco */
@media (min-width: 768px) {
  #s09 .percorso-s09 { transition: transform .28s var(--m-ease), border-color .24s ease, box-shadow .24s ease; }
  @media (hover: hover) {
    #s09 .percorso-s09:hover { transform: translateY(-3px); }
    #s09 .percorso-s09:hover .link-s09 svg { transform: translateX(4px); }
  }
  #s09 .percorso-s09:focus-within .link-s09 svg { transform: translateX(4px); }
}
@media (max-width: 767.98px) {
  #s09 .percorsi-s09 .link-s09:is(:active, :focus-visible) svg { transform: translateX(4px); }
}

/* ---------------------------------------------------------------- menu del telefono: il pannello scende piano, voci in fila */
@keyframes m-pannello { from { opacity: 0; transform: translateY(-8px); } }
@keyframes m-voce { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) {
  .menu-telefono:not([hidden]) { animation: m-pannello .28s var(--m-ease) backwards; }
  .menu-telefono:not([hidden]) li { animation: m-voce .36s var(--m-ease) backwards; }
  .menu-telefono:not([hidden]) li:nth-child(1) { animation-delay: 60ms; }
  .menu-telefono:not([hidden]) li:nth-child(2) { animation-delay: 90ms; }
  .menu-telefono:not([hidden]) li:nth-child(3) { animation-delay: 120ms; }
  .menu-telefono:not([hidden]) li:nth-child(4) { animation-delay: 150ms; }
  .menu-telefono:not([hidden]) li:nth-child(5) { animation-delay: 180ms; }
  .menu-telefono:not([hidden]) .menu-telefono-prenota { animation: m-voce .36s var(--m-ease) 230ms backwards; }
}

/* ---------------------------------------------------------------- movimento ridotto: nulla si muove, tutto e' visibile */
@media (prefers-reduced-motion: reduce) {
  .motion [data-reveal], .motion [data-reveal] *, .motion [data-reveal]::before, .motion [data-reveal]::after {
    animation: none !important; opacity: 1; }
  .motion [data-reveal]:not([data-in]) { opacity: 1 !important; }
  .st :is(.cta, .link, .cta-s06, .link-s09) svg, #s09 .percorso-s09 { transition: none !important; }
  .st :is(.cta, .link, .cta-s06):is(:hover, :focus-visible) svg, #s09 .percorso-s09:hover,
  #s09 .percorso-s09 :is(:hover, :focus-within) .link-s09 svg, #s09 .percorso-s09:hover .link-s09 svg { transform: none !important; }
}