/* Scuola Fatoma — animazioni.
   Un solo linguaggio: le cose "salgono" di poco e compaiono, come la data che si sposta in avanti.
   Una curva (--ease), tre durate. Tutto parte solo se <html> ha la classe .anim, che viene aggiunta
   solo quando chi visita non ha chiesto di ridurre il movimento. Senza JavaScript tutto resta visibile. */

:root {
  --ease: cubic-bezier(.16, 1, .3, 1);
  --t-breve: .35s;
  --t-media: .8s;
  --t-lunga: 1.1s;
}

/* ---------- apertura della pagina (solo CSS, niente sfarfallio) ---------- */
@keyframes sipario { from { clip-path: inset(0 0 100% 0); transform: translateY(.3em); } to { clip-path: inset(-0.2em 0 -0.3em 0); transform: none; } }
@keyframes sale { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes appare { from { opacity: 0; } to { opacity: 1; } }

/* titoli principali */
.anim .apertura h1,
.anim .intro h1,
.anim .hero .kicker,
.anim main > .wrap.apertura > h1,
.anim .top .apertura h1 { animation: sipario var(--t-lunga) var(--ease) both .1s; }

/* testo che segue il titolo */
.anim .apertura .testo > :not(h1),
.anim .intro-testo > :not(h1),
.anim main > .wrap.apertura > :not(h1),
.anim .top .apertura > div > :not(h1),
.anim .hero-grid > div:first-child > :not(.kicker) { animation: sale var(--t-media) var(--ease) both; animation-delay: .45s; }
.anim .intro-testo > .kicker { animation-delay: 0s; }
.anim .apertura .testo > :nth-child(3), .anim .intro-testo > :nth-child(3), .anim .hero-grid > div:first-child > :nth-child(3) { animation-delay: .55s; }
.anim .apertura .testo > :nth-child(4), .anim .intro-testo > :nth-child(4), .anim .hero-grid > div:first-child > :nth-child(4) { animation-delay: .65s; }
.anim .hero-grid > div:first-child > :nth-child(5) { animation-delay: .75s; }

/* immagini e box della testata */
.anim .intro-foto img { animation: sale var(--t-lunga) var(--ease) both .3s; }
.anim .intro-foto figcaption, .anim .intro .cf-box { animation: sale var(--t-media) var(--ease) both .6s; }
.anim .hero .card, .anim .colonna-form .card, .anim .flusso > .lato, .anim .regalo > *, .anim .top .baffo, .anim .top .orologio { animation: sale var(--t-media) var(--ease) both .5s; }
.anim .apertura > .bg { animation: appare 1.4s ease both; }

/* ---------- elementi che si svelano scorrendo (classi messe da animazioni.js) ---------- */
.anim [data-rivela="testo"] { opacity: 0; transform: translateY(24px); transition: opacity var(--t-media) var(--ease) var(--ritardo, 0s), transform var(--t-media) var(--ease) var(--ritardo, 0s); }
.anim [data-rivela="testo"].visto { opacity: 1; transform: none; }
/* foto: stessa salita del testo, un po' più lenta. Partono solo quando la foto è caricata e decodificata
   (animazioni.js), così non compaiono mai a scatti né mostrano lo sfondo del contenitore. */
.anim [data-rivela="img"] { opacity: 0; transform: translateY(16px); transition: opacity var(--t-lunga) var(--ease) var(--ritardo, 0s), transform var(--t-lunga) var(--ease) var(--ritardo, 0s); }
.anim [data-rivela="img"].visto { opacity: 1; transform: none; }

/* "Love is understand", parola per parola */
.anim .parole .parola { display: inline-block; opacity: 0; transform: translateY(.35em); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i) * 140ms + .15s); }
.anim .parole.visto .parola { opacity: 1; transform: none; }
/* finché il riquadro che la contiene non è comparso, le parole aspettano */
.anim [data-rivela]:not(.visto) .parole .parola { opacity: 0; transform: translateY(.35em); }

/* storia: la data si accende quando arrivi alla sua tappa */
.anim .tappa .pill { background: var(--crema); transition: background-color .6s ease .2s; }
.anim .tappa.visto .pill { background: var(--giallo); }

/* ---------- interazioni ---------- */
.btn { transition: transform var(--t-breve) var(--ease), background-color .2s ease, box-shadow var(--t-breve) var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 3px 0 var(--nero); }
.btn:active { transform: none; box-shadow: none; transition-duration: .08s; }
.btn--chiaro:hover { box-shadow: 0 3px 0 rgba(251,255,241,.7); }
.amounts label, .metodi label, .scelte label, .freq label { transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform var(--t-breve) var(--ease), box-shadow .2s ease; }
.amounts label:hover { transform: translateY(-2px); }
.doc a { transition: transform var(--t-breve) var(--ease), box-shadow var(--t-breve) var(--ease), background-color .2s ease; }
.doc a:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--nero); }

/* menu: la linea si disegna da sinistra */
.site-head .menu a { border-bottom: 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size var(--t-breve) var(--ease); }
.site-head .menu a:hover, .site-head .menu a[aria-current="page"] { background-size: 100% 1.5px; }
.site-head .menu .menu-dona { background-image: none; }

/* footer: stessa linea, più sottile */
.piede a { background: linear-gradient(currentColor, currentColor) 0 calc(100% - 2px) / 0 1px no-repeat; transition: background-size var(--t-breve) var(--ease); }
.piede a:hover { text-decoration: none; background-size: 100% 1px; }

/* menu da telefono: si apre a tendina, le voci arrivano in fila */
@keyframes tendina { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 -40px 0); } }
@media (max-width: 1080px) {
  .site-head.aperto .menu a { background: none; border-bottom: 1px solid var(--linea); }
  .site-head.aperto .menu .menu-dona { border: 1.5px solid var(--nero) !important; background: var(--giallo); }
  .anim .site-head.aperto .menu { animation: tendina .45s var(--ease) both; }
  .anim .site-head.aperto .menu a { animation: sale .5s var(--ease) both; }
  .anim .site-head.aperto .menu a:nth-child(1) { animation-delay: .05s; }
  .anim .site-head.aperto .menu a:nth-child(2) { animation-delay: .1s; }
  .anim .site-head.aperto .menu a:nth-child(3) { animation-delay: .15s; }
  .anim .site-head.aperto .menu a:nth-child(4) { animation-delay: .2s; }
  .anim .site-head.aperto .menu a:nth-child(5) { animation-delay: .25s; }
  .anim .site-head.aperto .menu a:nth-child(6) { animation-delay: .3s; }
}

/* passaggio tra le pagine: dissolvenza breve (browser che supportano le view transition) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }
}

/* movimento ridotto: nessuna animazione, nessuna transizione di spostamento */
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .amounts label:hover, .doc a:hover { transform: none; }
}