/*
 * Animazioni native Impresa Luchetta (JS: assets/js/animations.js).
 *
 * Palette:  il-rise (sale dal basso) · il-fade (solo dissolvenza) · il-slide-l / il-slide-r (laterale)
 *           il-seq (figli in sequenza, hero) · il-mask (titolo che emerge riga per riga)
 *           il-bar (barretta che si traccia) · il-curtain (foto a sipario dal basso)
 *           data-il-count (contatore numerico)
 *
 * Lo stato nascosto vale solo con html.js (aggiunta inline in <head>): senza JS il sito resta visibile.
 * A fine animazione il JS aggiunge .il-done e queste regole smettono di applicarsi: l'elemento torna
 * alle sue classi originali (hover, transition-all). Le transition sono !important perché
 * .transition-all del tema usa !important.
 */
:root {
  --il-ease: cubic-bezier(0.22, 0.61, 0.24, 1);
  --il-dur: 0.8s;
}

/* Stato iniziale */
html.js .il-rise:not(.il-done),
html.js .il-fade:not(.il-done),
html.js .il-slide-l:not(.il-done),
html.js .il-slide-r:not(.il-done),
html.js .il-seq:not(.il-done) > * {
  opacity: 0;
  transition: opacity var(--il-dur) var(--il-ease) var(--il-d, 0s), transform var(--il-dur) var(--il-ease) var(--il-d, 0s) !important;
}
html.js .il-rise:not(.il-done),
html.js .il-seq:not(.il-done) > * { transform: translate3d(0, 2rem, 0); }
html.js .il-slide-l:not(.il-done) { transform: translate3d(-2.5rem, 0, 0); }
html.js .il-slide-r:not(.il-done) { transform: translate3d(2.5rem, 0, 0); }

/* Stato finale */
html.js .il-rise.is-visible:not(.il-done),
html.js .il-fade.is-visible:not(.il-done),
html.js .il-slide-l.is-visible:not(.il-done),
html.js .il-slide-r.is-visible:not(.il-done),
html.js .il-seq.is-visible:not(.il-done) > * {
  opacity: 1;
  transform: none;
}

/* Sequenza hero: etichetta → titolo (righe a +0.1s) → testo → bottoni */
.il-seq > :nth-child(2) { --il-d: 0.12s; }
.il-seq > :nth-child(3) { --il-d: 0.4s; }
.il-seq > :nth-child(n+4) { --il-d: 0.52s; }

/* Titolo a maschera: il movimento lo fanno le parole, non il titolo */
html.js .il-seq:not(.il-done) > .il-mask.il-split { opacity: 1; transform: none; }
.il-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.il-wi {
  display: inline-block;
  transform: translate3d(0, 110%, 0);
  transition: transform 0.9s var(--il-ease);
  transition-delay: calc(var(--il-d, 0s) + var(--il-line, 0) * 0.1s);
}
.il-mask.is-visible .il-wi,
.il-seq.is-visible .il-wi { transform: none; }

/* Barretta sotto i titoli */
html.js .il-bar:not(.il-done) {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s var(--il-ease) calc(var(--il-d, 0s) + 0.15s) !important;
}
html.js .il-bar.mx-auto:not(.il-done) { transform-origin: center; }
html.js .il-bar.is-visible:not(.il-done) { transform: scaleX(1); }

/* Foto a sipario: una tendina del colore dello sfondo (--il-cover, calcolato dal JS) si ritira
   verso l'alto e scopre la foto dal basso; la foto si assesta da 1.05.
   Solo transform: niente clip-path né opacity sul contenitore (costringono a ridisegnare la foto
   a ogni fotogramma e lo scroll scatta). Il JS apre il sipario solo a foto scaricata e decodificata. */
html.js .il-curtain:not(.il-done) { position: relative; }
html.js .il-curtain:not(.il-done)::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 3;
  background: var(--il-cover, var(--surface));
  transform-origin: top center;
  transition: transform 0.9s var(--il-ease) var(--il-d, 0s);
  pointer-events: none;
}
html.js .il-curtain:not(.il-done) img {
  box-shadow: none !important;
  transition: transform 1s var(--il-ease) var(--il-d, 0s) !important;
}
/* La foto ingrandita e la sua ombra uscirebbero dalla tendina come una cornice: lo zoom solo dove
   il contenitore ritaglia (overflow-hidden), l'ombra torna a sipario aperto con una dissolvenza. */
html.js .il-curtain.overflow-hidden:not(.il-done) img { transform: scale(1.05); }
.il-curtain.il-done:not(.overflow-hidden) img { transition: box-shadow 0.6s var(--il-ease); }
html.js .il-curtain.is-visible:not(.il-done)::after { transform: scaleY(0); }
html.js .il-curtain.is-visible:not(.il-done) img { transform: none; }

/* Riduzione movimento e stampa: tutto visibile, niente animazioni */
@media (prefers-reduced-motion: reduce), print {
  html.js .il-rise:not(.il-done),
  html.js .il-fade:not(.il-done),
  html.js .il-slide-l:not(.il-done),
  html.js .il-slide-r:not(.il-done),
  html.js .il-seq:not(.il-done) > *,
  html.js .il-bar:not(.il-done),
  html.js .il-curtain:not(.il-done),
  html.js .il-curtain:not(.il-done) img,
  .il-wi {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  html.js .il-curtain:not(.il-done)::after { display: none; }
}