/* ANIME · animazioni-tutorial del sito (26 set 2026). Contratto in anime/LEGGIMI.md.
   Una scena e' un <figure class="anima"> con dentro il quadro (telefono o finestra) e i passi scritti sotto.
   Si muove SOLO transform e opacity (compositore: niente lavoro al processore). anima.js mette .in-onda in anticipo, a pagina
   ferma, con le animazioni ferme sul punto di partenza (data-via); le fa partire quando la scena sta per entrare nello schermo,
   anche mentre si scorre, e la ferma da capo quando esce.
   Senza script o con movimento ridotto resta il fotogramma «manifesto»: lo stato di base di ogni elemento. */
.anima{--durata:16s;--passi:4;margin:34px 0 0;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(22px,4vw,56px);align-items:center}
.anima.a-stretta{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}
.an-palco{position:relative;container-type:inline-size;min-width:0}
.an-palco>*{pointer-events:none;user-select:none;-webkit-user-select:none}
/* telefono: 100cqw di larghezza, proporzione 9:19 */
.an-tel{position:relative;width:min(100%,340px);margin:0 auto;aspect-ratio:9/19;border-radius:12%/5.6%;background:#0d0b12;padding:3.2%;
  box-shadow:0 0 0 1px rgba(245,242,250,.12),0 30px 60px -24px rgba(0,0,0,.75),inset 0 0 0 1px rgba(255,255,255,.05)}
.an-tel>.an-schermo{position:relative;width:100%;height:100%;border-radius:9.5%/4.4%;overflow:hidden;background:#fff;container-type:inline-size}
.an-tel>.an-schermo::before{content:"";position:absolute;z-index:9;left:50%;top:1.6%;width:30%;height:3.4%;transform:translateX(-50%);border-radius:99px;background:#0d0b12}
/* finestra del computer */
.an-fin{position:relative;width:100%;aspect-ratio:16/10.4;border-radius:14px;overflow:hidden;background:#fff;container-type:inline-size;
  box-shadow:0 0 0 1px rgba(245,242,250,.12),0 30px 70px -28px rgba(0,0,0,.8)}
.an-fin>.an-barra{height:6.2%;display:flex;align-items:center;gap:1.1%;padding:0 2%;background:#ECE8F1;border-bottom:1px solid #DCD6E4}
.an-fin>.an-barra i{width:1.35%;aspect-ratio:1;border-radius:50%;background:#C9C2D3}
.an-fin>.an-barra b{margin-left:3%;flex:1;height:52%;border-radius:99px;background:#fff;font:500 1.35cqw/1 var(--f-body);color:#6b6477;display:flex;align-items:center;padding-left:1.6%}
.an-fin>.an-schermo{position:absolute;inset:6.2% 0 0;overflow:hidden;container-type:inline-size}
/* dito (telefono) e cursore (computer): posizione e tocchi li decide la scena con le sue keyframes */
.an-dito{position:absolute;z-index:20;left:0;top:0;width:13cqw;aspect-ratio:1;margin:-6.5cqw 0 0 -6.5cqw;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0 34%,rgba(255,255,255,.55) 35% 52%,rgba(255,255,255,0) 53%);
  box-shadow:0 0 0 1px rgba(20,16,28,.18),0 6px 16px rgba(20,16,28,.28);opacity:0}
.an-cursore{position:absolute;z-index:20;left:0;top:0;width:2.6cqw;opacity:0;filter:drop-shadow(0 2px 3px rgba(20,16,28,.35))}
.an-cursore svg{display:block;width:100%;height:auto}
.an-cursore em{position:absolute;left:90%;top:95%;font:600 1.25cqw/1 var(--f-body);font-style:normal;color:#fff;background:#B3966B;padding:.35em .6em;border-radius:.5em;white-space:nowrap}
/* passi scritti: il passo attivo si accende a turno, finestre uguali (--i da 0, --passi in tutto) */
.an-passi{margin:0;padding:0;list-style:none;counter-reset:passo;display:grid;gap:10px}
.an-passi li{counter-increment:passo;position:relative;display:block;padding:12px 14px 12px 60px;min-height:56px;border-radius:14px;border:1px solid var(--bordo,rgba(245,242,250,.09));
  color:#D6D1E4;font-size:15.5px;line-height:1.45;opacity:.6;transition:opacity .3s var(--faro-ease)}
.an-passi li::before{content:counter(passo);position:absolute;left:14px;top:12px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid rgba(216,195,160,.45);color:var(--ch-300,#D8C3A0);font:600 13px/1 var(--f-disp)}
.an-passi li b{display:block;color:var(--testo,#F5F2FA);font-weight:600;margin-bottom:2px}
.an-titolo{margin:0 0 14px;font:600 13px/1.3 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--ch-300,#D8C3A0)}
.anima.in-onda .an-passi li{animation:an-passo4 var(--durata) linear infinite;animation-delay:calc((var(--i) / var(--passi) - 1) * var(--durata))}
/* didascalie (28 set, revisione Codex #10): a scena in onda bordo e fondo restano fermi, il passo acceso si distingue solo con
   l'opacità (1 contro 0,55): prima i keyframe animavano anche bordo e fondo, fuori dalla regola «solo transform e opacity». */
@media (prefers-reduced-motion:no-preference){.anima.in-onda .an-passi li{border-color:rgba(216,195,160,.42);background:rgba(216,195,160,.06)}}
/* sul computer i passi si vedono tutti insieme: bordo e fondo più tenui, così i passi spenti (opacità 0,55) restano quasi
   senza cornice come prima e il passo acceso si stacca; sul telefono se ne vede uno alla volta e resta il bordo pieno. */
@media (min-width:861px) and (prefers-reduced-motion:no-preference){.anima.in-onda .an-passi li{border-color:rgba(216,195,160,.24);background:rgba(216,195,160,.02)}}
/* il passo acceso: finestre uguali; 4 passi di serie, classi a-passi3 e a-passi5 per 3 o 5 (calc nei selettori di keyframe non e' ammesso) */
@keyframes an-passo4{0%,24%{opacity:1}25.5%,100%{opacity:.6}}
@keyframes an-passo3{0%,32.5%{opacity:1}34%,100%{opacity:.6}}
@keyframes an-passo5{0%,19%{opacity:1}20.5%,100%{opacity:.6}}
.anima.a-passi3{--passi:3}.anima.a-passi5{--passi:5}
.anima.a-passi3.in-onda .an-passi li{animation-name:an-passo3}
.anima.a-passi5.in-onda .an-passi li{animation-name:an-passo5}
/* a scena ferma si accende il passo del fotogramma manifesto: data-manifesto="N" sul figure (di serie il primo) */
.anima:not(.in-onda):not([data-manifesto]) .an-passi li:first-child,.anima[data-manifesto="1"]:not(.in-onda) .an-passi li:nth-child(1),.anima[data-manifesto="2"]:not(.in-onda) .an-passi li:nth-child(2),.anima[data-manifesto="3"]:not(.in-onda) .an-passi li:nth-child(3),.anima[data-manifesto="4"]:not(.in-onda) .an-passi li:nth-child(4),.anima[data-manifesto="5"]:not(.in-onda) .an-passi li:nth-child(5){opacity:1;border-color:rgba(216,195,160,.42);background:rgba(216,195,160,.06)}
/* fermo quando non si vede: le scene mettono le loro animazioni SOLO sotto .anima.in-onda */
/* TELEFONO E TABLET (una colonna): la scena deve stare tutta in uno schermo, di qualsiasi misura.
   - il telefono finto si misura sull'altezza visibile (svh) meno testata, barra fissa in fondo, occhiello e didascalia (300 px),
     con un minimo per gli schermi piccoli: telefono e didascalia stanno fra la testata e la barra;
   - sotto resta UNA didascalia alla volta: i passi stanno impilati nella stessa cella (altezza fissa = il passo piu' lungo,
     niente salti) e si accendono a turno con le stesse finestre del computer; a scena ferma si vede il passo del manifesto. */
@media (max-width:860px){
  .anima,.anima.a-stretta{grid-template-columns:1fr;gap:18px}
  .an-passi{order:2;display:grid}
  .an-passi li{grid-area:1/1;opacity:0;transform:translateY(6px)}
  .an-tel{width:clamp(200px,calc((100svh - 300px) * 9 / 19),330px)}
  .an-fin{width:100%}
  .an-titolo{margin-bottom:10px}
  .anima.in-onda .an-passi li{animation-name:an-passoM4}
  .anima.a-passi3.in-onda .an-passi li{animation-name:an-passoM3}
  .anima.a-passi5.in-onda .an-passi li{animation-name:an-passoM5}
  .anima:not(.in-onda):not([data-manifesto]) .an-passi li:first-child,.anima[data-manifesto="1"]:not(.in-onda) .an-passi li:nth-child(1),.anima[data-manifesto="2"]:not(.in-onda) .an-passi li:nth-child(2),.anima[data-manifesto="3"]:not(.in-onda) .an-passi li:nth-child(3),.anima[data-manifesto="4"]:not(.in-onda) .an-passi li:nth-child(4),.anima[data-manifesto="5"]:not(.in-onda) .an-passi li:nth-child(5){transform:none}
}
@keyframes an-passoM4{0%{opacity:0;transform:translateY(6px)}1.5%,23.5%{opacity:1;transform:none}25%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes an-passoM3{0%{opacity:0;transform:translateY(6px)}1.5%,32%{opacity:1;transform:none}33.4%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes an-passoM5{0%{opacity:0;transform:translateY(6px)}1.5%,18.5%{opacity:1;transform:none}20%,100%{opacity:0;transform:translateY(-4px)}}
@media (max-width:860px) and (prefers-reduced-motion:reduce){.an-passi li{grid-area:auto;transform:none}}
@media (prefers-reduced-motion:reduce){.anima *,.anima *::before,.anima *::after{animation:none!important;transition:none!important}.an-passi li{opacity:1}}