/* Le scene: colori dalle variabili della palette, animazioni solo con .in (in vista).
   Lo stato di base (#fermo, movimento ridotto) è la scena finita, ferma.
   Ogni scena ha UN ciclo (--d) diviso in tempi: gesto, risposta, riposo lungo, ritorno breve.
   Fondi ammessi: bianco, tinta leggera, scuro. Mai l'accento pieno come fondo. */
.scena{position:relative;border-radius:22px;overflow:hidden;background:var(--s-bg);
  --s-bg:var(--sup);--gig:var(--ink);--pic:var(--acc);--altro:color-mix(in srgb,var(--acc-2) 84%,#000);
  --carta:#fff;--bordo:color-mix(in srgb,var(--ink) 14%,transparent);--riga:#D9DBE0;--tenue:var(--muted);--testo:var(--ink);
  --sul-corpo:var(--acc-scuro);
  --ease:cubic-bezier(.45,0,.25,1);--esce:cubic-bezier(.2,.7,.3,1);--entra:cubic-bezier(.6,0,.8,.4);--rimbalzo:cubic-bezier(.3,1.45,.5,1);
  --d:8s}
.scena svg{width:100%;height:auto;display:block}
.scena.tinta{--s-bg:var(--acc-tinta)}
.scena.notte{--s-bg:var(--scuro-2);--gig:var(--su-scuro);--pic:var(--acc-scuro);--carta:#24262C;--bordo:rgba(255,255,255,.12);
  --riga:rgba(255,255,255,.22);--tenue:var(--su-scuro-muted);--testo:var(--su-scuro);--sul-corpo:var(--acc)}

.scena .corpo{fill:var(--gig)}
.scena .pic .corpo{fill:var(--pic)}
.scena .occhio{fill:var(--s-bg);transform-box:fill-box;transform-origin:center}
.scena .gig,.scena .pic{transform-box:fill-box;transform-origin:50% 100%}
.scena .sguardo{transform:translate(var(--lx),var(--ly))}
.scena .ombra{fill:var(--gig);opacity:.08}
.scena .terra{stroke:var(--gig);stroke-opacity:.14;stroke-width:1.2;stroke-dasharray:2 5;stroke-linecap:round}
.scena .carta{fill:var(--carta);stroke:var(--bordo);stroke-width:1.2}
.scena .carta.senza-bordo{stroke:none}
.scena .filo{fill:none;stroke:var(--bordo);stroke-width:1.2;stroke-linejoin:round}
.scena .riga{fill:var(--riga)}
.scena .acc-riga{fill:color-mix(in srgb,var(--acc) 62%,var(--carta))}
.scena .acc-f{fill:var(--acc)} .scena .acc2-f{fill:var(--altro)} .scena .ink-f{fill:var(--gig)}
.scena .rosso{fill:var(--rosso)} .scena .rosso-t{fill:var(--rosso);font-weight:600}
.scena .verde{fill:var(--verde)}
.scena .tratto-bianco{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round}
.scena .t{font:500 10.5px 'Geist',sans-serif;fill:var(--testo)}
.scena .t.forte{font-weight:600}
.scena .t.piccolo{font-size:8.6px}
.scena .t.muto{fill:var(--tenue)}
.scena .t.grosso{font:600 19px 'Geist',sans-serif;letter-spacing:-.03em}
.scena .tm{font:500 8.2px 'Geist Mono',monospace;letter-spacing:.06em;fill:var(--tenue)}
.scena .tm.forte{fill:var(--testo);font-weight:600}
.scena .acc-t{fill:var(--acc-testo);font-weight:600}
.scena.notte .acc-t{fill:var(--acc-scuro)}
.scena .pill-acc{fill:var(--acc)} .scena .su-pill{fill:var(--su-acc);font-weight:600}

/* fumetti e gesti comuni */
.scena .fum,.scena .lcard,.scena .tappa,.scena .scade,.scena .pill-fra,.scena .stella,.scena .voto,.scena .foglio-voce{transform-box:fill-box;transform-origin:50% 100%}
.scena [class*="-x"],.scena [class*="-y"]{transform-box:fill-box}

/* ritmo di base: respiro e battito, lenti e sfasati */
.in .gig{animation:respira 4.6s ease-in-out infinite}
.in .pic{animation:respira 3.8s ease-in-out infinite}
.in .occhio{animation:battito 5.4s infinite}
.in .pic .occhio{animation-duration:4.6s;animation-delay:1.3s}
@keyframes respira{0%,100%{transform:none}50%{transform:scale(1.01,.985)}}
@keyframes battito{0%,94%,100%{transform:none}97%{transform:scaleY(.1)}}
/* il piccolo che parla: tre piccole compressioni */
@keyframes parla{0%,3%,26%,100%{transform:none}6%,13%,20%{transform:scale(1.05,.94)}9.5%,16.5%,23%{transform:none}}
.in .parla{animation:parla var(--d) var(--ease) infinite}
/* il gigante che annuisce, una volta, a metà ciclo */
@keyframes annuisce{0%,49%,60%,100%{transform:none}52%{transform:rotate(-3deg) scaleY(.97)}56%{transform:rotate(1.5deg)}}
.in .annuisce{animation:annuisce var(--d) var(--ease) infinite}
/* il fumetto di chi parla: entra, resta, si trasforma nella cosa detta */
@keyframes fum-dire{0%{opacity:0;transform:scale(.7)}4%{opacity:1;transform:none}24%{opacity:1;transform:none}30%,100%{opacity:0;transform:scale(.85)}}

/* ——— nome ———
   Ciclo da 10 s. 0-28 tu dici il nome (il fumetto «ti chiamo Mia»);
   26-46 il gigante prende la matita e lo scrive sul cartellino che ha sulla pancia;
   46-56 il cordino sale ai lati del collo; 56-70 il gigante ringrazia (un inchino e un cuore);
   70-92 riposo; 92-100 il cartellino si toglie e si ricomincia con un nome nuovo.
   Tu parli e basta. Gli occhi del gigante non si muovono e non si schiacciano: solo il battito. */
.scena[data-scena=nome] .tm{font-size:11px}
.scena[data-scena=nome]{--d:10s}
.scena .t-nome{font-size:15px}
.scena .t-nome .acc-t{font:italic 400 19px 'Instrument Serif',serif}
.scena .cart-fondo{fill:#fff;stroke:var(--bordo);stroke-width:1.2}
.scena .cart-testa{fill:var(--acc)}
.scena .cart-ciao{font:600 6.6px 'Geist Mono',monospace;letter-spacing:.12em;fill:var(--su-acc)}
.scena .cart-nome{font:italic 400 25px 'Instrument Serif',serif;fill:#111114}
.scena .cart-velo{fill:#fff;transform-box:fill-box;transform-origin:100% 50%;transform:scaleX(0)}
.scena .cart-foro{fill:color-mix(in srgb,var(--ink) 30%,#fff)}
.scena .cordino{fill:none;stroke:var(--sul-corpo);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:90;stroke-dashoffset:0}
.scena .mat-corpo{fill:#F2B33D}.scena .mat-punta{fill:#3A3B40}.scena .mat-gomma{fill:#E58A8A}
.scena .matita{opacity:0;transform-box:fill-box}
.scena .grazie path{fill:var(--rosso)}
.scena .grazie{opacity:0;transform-box:fill-box;transform-origin:50% 100%}
.scena .cart,.scena .cart-oscilla{transform-box:fill-box}
.scena .cart{transform-origin:50% 0}
.scena .cart-oscilla{transform-origin:50% 0}
.scena.in[data-scena=nome] .fum{animation:fum-dire var(--d) var(--ease) infinite}
.in .cart{animation:nome-c var(--d) var(--rimbalzo) infinite}
.in .cart-oscilla{animation:nome-osc var(--d) ease-out infinite}
.in .cart-velo{animation:nome-velo var(--d) linear infinite}
.in .matita{animation:nome-mat var(--d) linear infinite}
.in .cordino{animation:nome-cord var(--d) var(--ease) infinite}
.in .grazie{animation:nome-cuore var(--d) var(--esce) infinite}
@keyframes nome-c{0%,24%{opacity:0;transform:scale(.5)}29%{opacity:1;transform:none}93%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
@keyframes nome-osc{0%,48%{transform:none}52%{transform:rotate(6deg)}57%{transform:rotate(-3.5deg)}62%{transform:rotate(1.5deg)}66%,100%{transform:none}}
@keyframes nome-velo{0%,30%{transform:none}45%,100%{transform:scaleX(0)}}
@keyframes nome-mat{0%,27%{opacity:0;transform:translate(-14px,10px)}30%{opacity:1;transform:none}33%{transform:translate(18px,-3px)}37%{transform:translate(34px,1px)}41%{transform:translate(52px,-2px)}45%{opacity:1;transform:translate(68px,0)}49%,100%{opacity:0;transform:translate(84px,10px)}}
@keyframes nome-cord{0%,47%{stroke-dashoffset:90;opacity:1}56%,93%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes nome-cuore{0%,58%{opacity:0;transform:translateY(8px) scale(.4)}62%{opacity:1;transform:scale(1.12)}64%{transform:none}74%{opacity:1;transform:translateY(-10px)}80%,100%{opacity:0;transform:translateY(-18px)}}
/* il piccolo: parla (tre compressioni) e poi, quando il gigante ringrazia, un saltello di gioia */
.in .pic-nome{animation:nome-p var(--d) var(--ease) infinite}
@keyframes nome-p{0%,3%,26%,62%{transform:none}6%,13%,20%{transform:scale(1.05,.94)}9.5%,16.5%,23%{transform:none}65%{transform:translateY(-9px)}68%{transform:none}71%{transform:translateY(-5px)}74%,100%{transform:none}}
.in .sgp-nome{animation:nome-sgp var(--d) var(--ease) infinite}
@keyframes nome-sgp{0%,24%{transform:translate(2px,-1px)}30%,90%{transform:translate(6px,-6px)}100%{transform:translate(2px,-1px)}}
/* il gigante: si china a scrivere sul cartellino, poi un piccolo inchino. Il corpo si muove, gli occhi no. */
.in .gig-nome{animation:nome-g var(--d) var(--ease) infinite}
@keyframes nome-g{0%,25%{transform:none}29%,45%{transform:rotate(-1.8deg) translateY(1px)}50%,54%{transform:none}58%{transform:rotate(-4deg) translateY(2px)}63%{transform:rotate(-4deg) translateY(2px)}68%,100%{transform:none}}

/* il gigante che FA: si sporge verso la cosa (a sinistra) nell'istante in cui la prende e la mette,
   poi annuisce quando è al suo posto. Vale per task, agenda e spese. */
@keyframes fa{0%,22%,40%,49%,60%,100%{transform:none}26%,32%{transform:rotate(-4deg) translateX(-3px)}52%{transform:rotate(-3deg) scaleY(.97)}56%{transform:rotate(1.5deg)}}
.in .fa{animation:fa var(--d) var(--ease) infinite}

/* ——— task ——— */
.scena .r-fondo{fill:color-mix(in srgb,var(--gig) 3%,var(--carta))}
.scena .r-oggi .r-fondo{fill:color-mix(in srgb,var(--rosso) 7%,var(--carta))}
.scena .cerchio{fill:none;stroke:color-mix(in srgb,var(--gig) 30%,transparent);stroke-width:1.3}
.scena .r-nuova{fill:color-mix(in srgb,var(--acc) 9%,var(--carta));stroke:var(--acc);stroke-width:1.4}
.scena .nuova{transform-box:fill-box;transform-origin:center}
.scena.in[data-scena=cose] .fum{animation:fum-dire var(--d) var(--ease) infinite}
.in .nuova-x{animation:cose-x var(--d) var(--ease) infinite}
.in .nuova-y{animation:cose-y var(--d) infinite}
.in .nuova{animation:cose-c var(--d) var(--ease) infinite}
@keyframes cose-x{0%,26%{transform:translateX(78px)}46%,100%{transform:none}}
@keyframes cose-y{0%,26%{transform:translateY(42px);animation-timing-function:var(--esce)}36%{transform:translateY(-18px);animation-timing-function:var(--entra)}46%,100%{transform:none}}
@keyframes cose-c{0%,24%{opacity:0;transform:scale(.7)}28%{opacity:1;transform:scale(.75)}46%{transform:none}49%{transform:scale(1.05)}53%{transform:none}93%{opacity:1}98%,100%{opacity:0}}
.in .r-giu{animation:cose-giu var(--d) var(--ease) infinite}
@keyframes cose-giu{0%,36%{transform:translateY(-28px)}45%,93%{transform:none}100%{transform:translateY(-28px)}}
.in .sg-cose{animation:cose-sg var(--d) var(--ease) infinite}
@keyframes cose-sg{0%,22%{transform:translate(-9px,1px)}28%{transform:translate(-9px,4px)}38%{transform:translate(-9px,-3px)}46%,100%{transform:translate(-8px,0)}}

/* ——— agenda ——— */
.scena .ora-l{stroke:color-mix(in srgb,var(--gig) 10%,transparent);stroke-width:1}
.scena .routine-f{fill:color-mix(in srgb,var(--gig) 7%,var(--carta))}
.scena .tratt-f{fill:color-mix(in srgb,var(--acc) 7%,var(--carta));stroke:var(--acc);stroke-width:1.2;stroke-dasharray:3 2.5}
.scena .slot{fill:color-mix(in srgb,var(--acc) 16%,var(--carta));opacity:0}
.scena .ev-f{fill:color-mix(in srgb,var(--evento) 16%,var(--carta));stroke:var(--evento);stroke-width:1.2}
.scena .ev-t{fill:color-mix(in srgb,var(--evento) 70%,#000);font-weight:600}
.scena .evento{transform-box:fill-box;transform-origin:center}
.scena.in[data-scena=agenda] .fum{animation:fum-dire var(--d) var(--ease) infinite}
.in .evento-x{animation:ag-x var(--d) var(--ease) infinite}
.in .evento-y{animation:ag-y var(--d) infinite}
.in .evento{animation:ag-c var(--d) var(--ease) infinite}
@keyframes ag-x{0%,26%{transform:translateX(66px)}46%,100%{transform:none}}
@keyframes ag-y{0%,26%{transform:translateY(22px);animation-timing-function:var(--esce)}36%{transform:translateY(-24px);animation-timing-function:var(--entra)}46%,100%{transform:none}}
@keyframes ag-c{0%,24%{opacity:0;transform:scale(.7)}28%{opacity:1;transform:scale(.75)}46%{transform:scale(1.04,.92)}50%{transform:none}93%{opacity:1}98%,100%{opacity:0}}
.in .slot{animation:ag-slot var(--d) ease-in-out infinite}
@keyframes ag-slot{0%,22%{opacity:0}28%,44%{opacity:1}48%,100%{opacity:0}}
.in .sg-agenda{animation:ag-sg var(--d) var(--ease) infinite}
@keyframes ag-sg{0%,22%{transform:translate(-9px,1px)}28%,44%{transform:translate(-9px,-3px)}52%,100%{transform:translate(-8px,0)}}

/* ——— diario ——— */
.scena .chiave-f{fill:color-mix(in srgb,var(--acc) 26%,var(--carta))}
.scena .caret{opacity:0}
.scena .scritte .riga{transform-box:fill-box;transform-origin:0 50%}
.scena.in[data-scena=diario] .fum{animation:fum-dire var(--d) var(--ease) infinite}
.in .d-ora{animation:di-ora var(--d) infinite}
@keyframes di-ora{0%,30%{opacity:0}34%,94%{opacity:1}99%,100%{opacity:0}}
.in .scritte .s1{animation:di-s1 var(--d) linear infinite}
.in .scritte .s2{animation:di-s2 var(--d) linear infinite}
.in .scritte .s3{animation:di-s3 var(--d) linear infinite}
.in .scritte .s4{animation:di-s4 var(--d) linear infinite}
@keyframes di-s1{0%,34%{transform:scaleX(0)}44%,94%{transform:none;opacity:1}99%,100%{opacity:0}}
@keyframes di-s2{0%,44%{transform:scaleX(0)}52%,94%{transform:none;opacity:1}99%,100%{opacity:0}}
@keyframes di-s3{0%,52%{transform:scaleX(0)}60%,94%{transform:none;opacity:1}99%,100%{opacity:0}}
@keyframes di-s4{0%,60%{transform:scaleX(0)}65%,94%{transform:none;opacity:1}99%,100%{opacity:0}}
.in .chiave-f{animation:di-chiave var(--d) var(--ease) infinite}
@keyframes di-chiave{0%,68%{opacity:0}74%,94%{opacity:1}99%,100%{opacity:0}}
.in .caret{animation:di-caret var(--d) linear infinite}
@keyframes di-caret{0%,33%{opacity:0;transform:translate(192px,135px)}34%{opacity:1;transform:translate(192px,135px)}44%{transform:translate(242px,135px)}44.01%{transform:translate(192px,143px)}52%{transform:translate(236px,143px)}52.01%{transform:translate(192px,151px)}60%{transform:translate(242px,151px)}60.01%{transform:translate(192px,159px)}65%{opacity:1;transform:translate(218px,159px)}69%,100%{opacity:0;transform:translate(218px,159px)}}
.in .sg-diario{animation:di-sg var(--d) var(--ease) infinite}
.in .scrive{animation:di-g var(--d) var(--ease) infinite}
@keyframes di-g{0%,30%,70%,100%{transform:none}34%,66%{transform:rotate(-3deg)}40%,52%,60%{transform:rotate(-4deg) translateY(1px)}46%,56%{transform:rotate(-2.5deg)}}
@keyframes di-sg{0%,28%{transform:translate(-9px,0)}36%,92%{transform:translate(-8px,5px)}100%{transform:translate(-9px,0)}}

/* ——— tempo (dediche) ——— */
.scena[data-scena=dediche]{--d:9s}
.scena .nastro-fondo{fill:color-mix(in srgb,var(--gig) 7%,transparent)}
.scena .seg{transform-box:fill-box;transform-origin:0 50%}
.scena .n1,.scena .q1{fill:var(--acc)} .scena .n2,.scena .q2{fill:#8E5BB5} .scena .n3,.scena .q3{fill:var(--altro)}
.scena .adesso{fill:var(--rosso)}
.scena.in[data-scena=dediche] .fum.domanda{animation:fum-dire var(--d) var(--ease) infinite}
.in .n1{animation:te-s1 var(--d) var(--ease) infinite}
.in .n2{animation:te-s2 var(--d) var(--ease) infinite}
.in .n3{animation:te-s3 var(--d) var(--ease) infinite}
@keyframes te-s1{0%,26%{transform:scaleX(0)}42%,92%{transform:none;opacity:1}100%{transform:none;opacity:0}}
@keyframes te-s2{0%,42%{transform:scaleX(0)}52%,62%{transform:none;opacity:1}66%,92%{transform:none;opacity:.3}100%{transform:none;opacity:0}}
@keyframes te-s3{0%,52%{transform:scaleX(0)}60%,62%{transform:none;opacity:1}66%,92%{transform:none;opacity:.3}100%{transform:none;opacity:0}}
.in .adesso{animation:te-ora var(--d) linear infinite}
@keyframes te-ora{0%,26%{transform:translateX(-266px);opacity:1}42%{transform:translateX(-126px)}52%{transform:translateX(-46px)}60%,92%{transform:none;opacity:1}100%{transform:none;opacity:0}}
.scena .etich>*{opacity:1}
.in .etich>:nth-child(-n+2){animation:te-e1 var(--d) infinite}
.in .etich>:nth-child(3),.in .etich>:nth-child(4){animation:te-e2 var(--d) infinite}
.in .etich>:nth-child(n+5){animation:te-e3 var(--d) infinite}
@keyframes te-e1{0%,40%{opacity:0}44%,92%{opacity:1}100%{opacity:0}}
@keyframes te-e2{0%,50%{opacity:0}54%,62%{opacity:1}66%,92%{opacity:.35}100%{opacity:0}}
@keyframes te-e3{0%,58%{opacity:0}62%{opacity:1}66%,92%{opacity:.35}100%{opacity:0}}
.in .fum.risposta{animation:fum-risposta var(--d) var(--ease) infinite}
@keyframes fum-risposta{0%,62%{opacity:0;transform:scale(.7)}66%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
.in .sg-tempo{animation:te-sg var(--d) var(--ease) infinite}
@keyframes te-sg{0%,24%{transform:translate(-8px,0)}30%,60%{transform:translate(-5px,-7px)}66%,100%{transform:translate(-8px,1px)}}

/* ——— lavagna ——— */
.scena[data-scena=lavagna]{--d:9s}
.scena .tavola{fill:var(--carta);stroke:var(--bordo);stroke-width:1.2}
.scena .lcard{transform-origin:center}
.scena .freccia{fill:none;stroke:var(--acc);stroke-width:2;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:0}
.scena .punta{fill:none;stroke:var(--acc);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.in .lcard.c1{animation:la-c1 var(--d) var(--rimbalzo) infinite}
.in .lcard.c2{animation:la-c2 var(--d) var(--rimbalzo) infinite}
.in .lcard.c3{animation:la-c3 var(--d) var(--rimbalzo) infinite}
@keyframes la-c1{0%,6%{transform:scale(0);opacity:0}13%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
@keyframes la-c2{0%,24%{transform:scale(0);opacity:0}31%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
@keyframes la-c3{0%,42%{transform:scale(0);opacity:0}49%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
.in .f1{animation:la-f1 var(--d) var(--ease) infinite}.in .p1{animation:la-p1 var(--d) infinite}
.in .f2{animation:la-f2 var(--d) var(--ease) infinite}.in .p2{animation:la-p2 var(--d) infinite}
@keyframes la-f1{0%,32%{stroke-dashoffset:80;opacity:1}40%,93%{stroke-dashoffset:0;opacity:1}99%,100%{opacity:0}}
@keyframes la-p1{0%,39%{opacity:0}41%,93%{opacity:1}99%,100%{opacity:0}}
@keyframes la-f2{0%,50%{stroke-dashoffset:80;opacity:1}58%,93%{stroke-dashoffset:0;opacity:1}99%,100%{opacity:0}}
@keyframes la-p2{0%,57%{opacity:0}59%,93%{opacity:1}99%,100%{opacity:0}}
.scena.in[data-scena=lavagna] .fum-lav{animation:fum-dire var(--d) var(--ease) infinite}
.in .parla-l{animation:la-parla var(--d) var(--ease) infinite}
/* il gigante appende ogni card: un gesto verso la tavola nell'istante in cui compare */
.in .appende{animation:la-g var(--d) var(--ease) infinite}
@keyframes la-g{0%,3%,11%,21%,29%,39%,47%,100%{transform:none}6%,24%,42%{transform:rotate(-4deg) translateX(-3px)}}
@keyframes la-parla{0%,2%,10%,20%,28%,38%,46%,100%{transform:none}5%,23%,41%{transform:scale(1.06,.93)}}
.in .sg-lav{animation:la-sg var(--d) var(--ease) infinite}
@keyframes la-sg{0%,4%{transform:translate(-7px,-3px)}10%,22%{transform:translate(-9px,-6px)}28%,40%{transform:translate(-7px,-7px)}46%,92%{transform:translate(-9px,-1px)}100%{transform:translate(-7px,-3px)}}

/* ——— conoscenza (archivio) ———
   0-28 tu dici «salvali»; il gigante prende lo scontrino e lo mette nel cassetto delle spese (24-44),
   poi il PDF in quello di casa (52-76). Il cassetto si apre verso di lui. */
.scena[data-scena=archivio]{--d:9s}
.scena .mobile{fill:color-mix(in srgb,var(--gig) 9%,var(--carta));stroke:var(--bordo);stroke-width:1.2}
.scena .cass-f{fill:var(--carta);stroke:var(--bordo);stroke-width:1.2}
.scena .maniglia{fill:var(--acc)}
.scena .pdf{fill:var(--rosso)} .scena .su-pdf{fill:#fff;font-weight:600;letter-spacing:.04em}
.scena .cassetto{transform-box:fill-box}
.scena .foglio1,.scena .foglio2{transform-box:fill-box;transform-origin:center;opacity:0}
.scena.in[data-scena=archivio] .fum{animation:fum-dire var(--d) var(--ease) infinite}
.in .foglio1-x{animation:ar-x1 var(--d) var(--ease) infinite}
.in .foglio1-y{animation:ar-y1 var(--d) infinite}
.in .foglio1{animation:ar-c1 var(--d) var(--ease) infinite}
.in .foglio2-x{animation:ar-x2 var(--d) var(--ease) infinite}
.in .foglio2-y{animation:ar-y2 var(--d) infinite}
.in .foglio2{animation:ar-c2 var(--d) var(--ease) infinite}
@keyframes ar-x1{0%,28%{transform:none}42%,100%{transform:translateX(-64px)}}
@keyframes ar-y1{0%,28%{transform:none;animation-timing-function:var(--esce)}35%{transform:translateY(-70px);animation-timing-function:var(--entra)}42%,100%{transform:translateY(-46px)}}
@keyframes ar-c1{0%,22%{opacity:0;transform:scale(.5)}26%,28%{opacity:1;transform:none}40%{opacity:1;transform:scale(.85)}45%,100%{opacity:0;transform:scale(.3)}}
@keyframes ar-x2{0%,58%{transform:none}72%,100%{transform:translateX(-64px)}}
@keyframes ar-y2{0%,58%{transform:none;animation-timing-function:var(--esce)}65%{transform:translateY(-40px);animation-timing-function:var(--entra)}72%,100%{transform:translateY(-4px)}}
@keyframes ar-c2{0%,52%{opacity:0;transform:scale(.5)}56%,58%{opacity:1;transform:none}70%{opacity:1;transform:scale(.85)}75%,100%{opacity:0;transform:scale(.3)}}
.in .k1{animation:ar-k1 var(--d) var(--ease) infinite}
.in .k2{animation:ar-k2 var(--d) var(--ease) infinite}
@keyframes ar-k1{0%,34%{transform:none}39%,44%{transform:translateX(14px)}50%,100%{transform:none}}
@keyframes ar-k2{0%,64%{transform:none}69%,74%{transform:translateX(14px)}80%,100%{transform:none}}
.in .archivia{animation:ar-g var(--d) var(--ease) infinite}
@keyframes ar-g{0%,22%,36%,52%,66%,100%{transform:none}26%,30%,56%,60%{transform:rotate(-4deg) translateX(-3px)}}
.in .sg-arc{animation:ar-sg var(--d) var(--ease) infinite}
@keyframes ar-sg{0%,20%{transform:translate(-9px,-1px)}26%{transform:translate(-8px,4px)}34%{transform:translate(-8px,-6px)}42%,50%{transform:translate(-9px,-4px)}56%{transform:translate(-8px,4px)}64%{transform:translate(-8px,-4px)}72%,86%{transform:translate(-9px,-1px)}100%{transform:translate(-9px,-1px)}}

/* ——— check-in ——— */
.scena[data-scena=checkin]{--d:11s}
.scena .cielo-notte{fill:var(--gig);opacity:0}
.scena .stelle circle{fill:var(--tenue);opacity:0}
.scena .arco{fill:none;stroke:var(--gig);stroke-opacity:.14;stroke-width:1.4;stroke-dasharray:3 6}
.scena .braccio{transform-box:view-box;transform-origin:180px 214px}
.scena .sole circle,.scena .sole rect{fill:#F2A93B}
.scena .luna{fill:var(--tenue);opacity:0}
.scena .tp-f{fill:var(--carta);stroke:var(--acc);stroke-width:1.4}
.scena .tp-t{fill:var(--acc-testo);font-weight:600}
.scena .fum.msg,.scena .msg-r{transform-box:fill-box;transform-origin:50% 100%}
.in .braccio{animation:ci-sole var(--d) linear infinite}
@keyframes ci-sole{0%{transform:rotate(-75deg);opacity:0}3%{opacity:1}57%{opacity:1}60%{transform:rotate(75deg);opacity:0}100%{transform:rotate(75deg);opacity:0}}
.in .tappa.t1 .tp-f{animation:ci-f1 var(--d) infinite}.in .tappa.t1 .tp-t{animation:ci-t1 var(--d) infinite}.in .tappa.t1{animation:ci-p1 var(--d) var(--rimbalzo) infinite}
.in .tappa.t2 .tp-f{animation:ci-f2 var(--d) infinite}.in .tappa.t2 .tp-t{animation:ci-t2 var(--d) infinite}.in .tappa.t2{animation:ci-p2 var(--d) var(--rimbalzo) infinite}
.in .tappa.t3 .tp-f{animation:ci-f3 var(--d) infinite}.in .tappa.t3 .tp-t{animation:ci-t3 var(--d) infinite}.in .tappa.t3{animation:ci-p3 var(--d) var(--rimbalzo) infinite}
@keyframes ci-f1{0%,5%{fill:var(--carta);stroke:var(--bordo)}7%,13%{fill:var(--acc);stroke:var(--acc)}15%,94%{fill:var(--carta);stroke:var(--acc)}98%,100%{fill:var(--carta);stroke:var(--bordo)}}
@keyframes ci-f2{0%,29%{fill:var(--carta);stroke:var(--bordo)}31%,37%{fill:var(--acc);stroke:var(--acc)}39%,94%{fill:var(--carta);stroke:var(--acc)}98%,100%{fill:var(--carta);stroke:var(--bordo)}}
@keyframes ci-f3{0%,53%{fill:var(--carta);stroke:var(--bordo)}55%,61%{fill:var(--acc);stroke:var(--acc)}63%,94%{fill:var(--carta);stroke:var(--acc)}98%,100%{fill:var(--carta);stroke:var(--bordo)}}
@keyframes ci-t1{0%,5%{fill:var(--tenue)}7%,13%{fill:var(--su-acc)}15%,94%{fill:var(--acc-testo)}98%,100%{fill:var(--tenue)}}
@keyframes ci-t2{0%,29%{fill:var(--tenue)}31%,37%{fill:var(--su-acc)}39%,94%{fill:var(--acc-testo)}98%,100%{fill:var(--tenue)}}
@keyframes ci-t3{0%,53%{fill:var(--tenue)}55%,61%{fill:var(--su-acc)}63%,94%{fill:var(--acc-testo)}98%,100%{fill:var(--tenue)}}
@keyframes ci-p1{0%,5%{transform:none}8%{transform:scale(1.14)}12%,100%{transform:none}}
@keyframes ci-p2{0%,29%{transform:none}32%{transform:scale(1.14)}36%,100%{transform:none}}
@keyframes ci-p3{0%,53%{transform:none}56%{transform:scale(1.14)}60%,100%{transform:none}}
.in .fum.msg,.in .msg-r{animation:ci-msg var(--d) var(--ease) infinite}
@keyframes ci-msg{0%,6%{opacity:0;transform:scale(.6)}9%,16%{opacity:1;transform:none}19%,30%{opacity:0;transform:scale(.8)}33%,40%{opacity:1;transform:none}43%,54%{opacity:0;transform:scale(.8)}57%,62%{opacity:1;transform:none}65%,100%{opacity:0;transform:scale(.8)}}
.in .cielo-notte{animation:ci-notte var(--d) ease-in-out infinite}
@keyframes ci-notte{0%,60%{opacity:0}68%,90%{opacity:.07}97%,100%{opacity:0}}
.in .stelle circle{animation:ci-stelle var(--d) ease-in-out infinite}
@keyframes ci-stelle{0%,62%{opacity:0}70%,90%{opacity:.8}97%,100%{opacity:0}}
.in .luna{animation:ci-luna var(--d) var(--ease) infinite}
@keyframes ci-luna{0%,60%{opacity:0;transform:translateY(8px)}68%,90%{opacity:.85;transform:none}97%,100%{opacity:0}}
.scena .dorme{transform-box:fill-box;transform-origin:50% 60%}
.in .dorme{animation:ci-dorme var(--d) var(--ease) infinite}
@keyframes ci-dorme{0%,64%{transform:translate(4px,-3px)}69%,90%{transform:translate(1px,3px) scaleY(.12)}95%,100%{transform:translate(4px,-3px)}}
.in .dorme .occhio{animation:none}
.scena .zzz text{font:600 11px 'Geist',sans-serif;fill:var(--tenue);opacity:0}
.in .zzz text{animation:ci-z var(--d) ease-out infinite}
.in .zzz text:nth-child(2){animation-delay:.35s}.in .zzz text:nth-child(3){animation-delay:.7s}
@keyframes ci-z{0%,68%{opacity:0;transform:translateY(6px)}74%,86%{opacity:1}92%,100%{opacity:0;transform:translateY(-8px)}}
.in .sg-check{animation:ci-sg var(--d) var(--ease) infinite}
@keyframes ci-sg{0%{transform:translate(-8px,-5px)}10%{transform:translate(-8px,-1px)}24%{transform:translate(-3px,-8px)}34%{transform:translate(-8px,-1px)}50%{transform:translate(5px,-7px)}58%{transform:translate(-8px,-1px)}66%,92%{transform:translate(-8px,2px)}100%{transform:translate(-8px,-5px)}}

/* ——— promemoria (sveglia) ——— */
.scena[data-scena=sveglia]{--d:7s}
.scena .evento-bar{fill:var(--evento)}
.scena .sv-camp{fill:var(--gig)} .scena .sv-corpo{fill:var(--acc)} .scena .sv-faccia{fill:var(--carta)}
.scena .lancette{fill:none;stroke:var(--gig);stroke-width:2.4;stroke-linecap:round}
.scena .sv-g{stroke:var(--gig);stroke-width:2.6;stroke-linecap:round}
.scena .sveglia-c{transform-box:fill-box;transform-origin:50% 100%}
.in .sveglia-c{animation:sv-trilla var(--d) ease-in-out infinite}
@keyframes sv-trilla{0%,14%,36%,100%{transform:none}16%,20%,24%,28%,32%{transform:rotate(-7deg)}18%,22%,26%,30%,34%{transform:rotate(7deg)}}
.in .pill-fra{animation:sv-pill var(--d) var(--rimbalzo) infinite}
@keyframes sv-pill{0%,18%{opacity:0;transform:scale(.5)}24%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
.in .sobbalza{animation:sv-salta var(--d) var(--ease) infinite}
@keyframes sv-salta{0%,18%,34%,100%{transform:none}21%{transform:scale(1.08,.9)}25%{transform:translateY(-16px) scale(.95,1.06)}30%{transform:scale(1.05,.94)}}
.in .sg-sveglia{animation:sv-sgp var(--d) var(--ease) infinite}
@keyframes sv-sgp{0%,16%{transform:translate(4px,2px)}22%,92%{transform:translate(7px,-6px)}100%{transform:translate(4px,2px)}}
/* è il gigante a far suonare la sveglia: un cenno verso di lei, un attimo prima dello squillo */
.in .suona{animation:sv-g var(--d) var(--ease) infinite}
@keyframes sv-g{0%,8%,18%,100%{transform:none}11%,14%{transform:rotate(-4deg) translateX(-3px)}}
.in .sg-sv{animation:sv-sgg var(--d) var(--ease) infinite}
@keyframes sv-sgg{0%,14%{transform:translate(-6px,-7px)}22%,30%{transform:translate(-8px,2px)}40%,100%{transform:translate(-8px,-1px)}}

/* ——— vocali ——— */
.scena .onda{fill:none;stroke-width:3;stroke-linecap:round}
.scena .onde-va .onda{stroke:var(--acc)} .scena .onde-torna .onda{stroke:var(--gig);opacity:0}
.scena .onde-va .onda{opacity:0}
.in .onde-va .onda{animation:vo-va var(--d) ease-out infinite}
.in .onde-va .o2{animation-delay:.2s}.in .onde-va .o3{animation-delay:.4s}
@keyframes vo-va{0%,3%{opacity:0;transform:translateX(-6px)}6%{opacity:1}26%{opacity:0;transform:translateX(120px)}100%{opacity:0;transform:translateX(120px)}}
.in .onde-torna .onda{animation:vo-torna var(--d) ease-out infinite}
.in .onde-torna .o2{animation-delay:.2s}.in .onde-torna .o3{animation-delay:.4s}
@keyframes vo-torna{0%,62%{opacity:0;transform:translateX(6px)}65%{opacity:1}82%,100%{opacity:0;transform:translateX(-120px)}}
.scena .foglio-voce .riga{transform-box:fill-box;transform-origin:0 50%}
.in .foglio-voce{animation:vo-foglio var(--d) var(--rimbalzo) infinite}
@keyframes vo-foglio{0%,28%{opacity:0;transform:scale(.6)}33%,93%{opacity:1;transform:none}99%,100%{opacity:0}}
.in .foglio-voce .v1{animation:vo-r1 var(--d) linear infinite}.in .foglio-voce .v2{animation:vo-r2 var(--d) linear infinite}
.in .foglio-voce .v3{animation:vo-r3 var(--d) linear infinite}.in .foglio-voce .v4{animation:vo-r4 var(--d) linear infinite}.in .foglio-voce .v5{animation:vo-r5 var(--d) linear infinite}
@keyframes vo-r1{0%,34%{transform:scaleX(0)}39%,100%{transform:none}}
@keyframes vo-r2{0%,39%{transform:scaleX(0)}44%,100%{transform:none}}
@keyframes vo-r3{0%,44%{transform:scaleX(0)}49%,100%{transform:none}}
@keyframes vo-r4{0%,49%{transform:scaleX(0)}54%,100%{transform:none}}
@keyframes vo-r5{0%,54%{transform:scaleX(0)}58%,100%{transform:none}}
.in .parla-v{animation:vo-p var(--d) var(--ease) infinite}
@keyframes vo-p{0%,3%,26%,80%,88%,100%{transform:none}6%,13%,20%{transform:scale(1.05,.94)}9.5%,16.5%,23%{transform:none}83%{transform:translateY(-3px) rotate(4deg)}}
.in .annuisce-v{animation:vo-g var(--d) var(--ease) infinite}
@keyframes vo-g{0%,56%,66%,100%{transform:none}59%{transform:rotate(-3deg) scaleY(.97)}63%{transform:rotate(1.5deg)}}
.in .sg-voce{animation:vo-sg var(--d) var(--ease) infinite}
@keyframes vo-sg{0%,28%{transform:translate(-8px,2px)}36%,58%{transform:translate(-9px,-6px)}64%,100%{transform:translate(-8px,2px)}}

/* ——— orologio ——— */
.scena .cinturino{fill:color-mix(in srgb,var(--gig) 55%,var(--s-bg))}
.scena .cassa{fill:var(--gig)} .scena .corona{fill:var(--gig)}
.scena .schermo{fill:#0B0C0F}
.scena .barra{fill:var(--acc-scuro);transform-box:fill-box;transform-origin:center}
.scena .w-t{font:500 8.4px 'Geist',sans-serif;fill:#EDEEF0}
.scena .w-t.forte{font-weight:600;font-size:9.4px}
.scena .barre{opacity:0}
.in .barra{animation:wa-barra .8s ease-in-out infinite alternate}
.in .barra.b2{animation-delay:.15s}.in .barra.b3{animation-delay:.3s}.in .barra.b4{animation-delay:.45s}.in .barra.b5{animation-delay:.6s}
@keyframes wa-barra{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.in .barre{animation:wa-barre var(--d) infinite}
@keyframes wa-barre{0%,3%{opacity:0}5%,28%{opacity:1}31%,100%{opacity:0}}
.in .risp-w{animation:wa-risp var(--d) var(--ease) infinite}
@keyframes wa-risp{0%,58%{opacity:0;transform:translateY(5px)}63%,93%{opacity:1;transform:none}99%,100%{opacity:0}}
.scena .aereo-c{fill:var(--acc)} .scena .aereo-p{fill:none;stroke:color-mix(in srgb,var(--acc) 60%,#000);stroke-width:1.2}
.scena .aereo{transform-box:fill-box;transform-origin:center;opacity:0}
.in .aereo-x{animation:wa-x var(--d) var(--ease) infinite}
.in .aereo-y{animation:wa-y var(--d) infinite}
.in .aereo{animation:wa-a var(--d) var(--ease) infinite}
@keyframes wa-x{0%,30%{transform:none}48%,100%{transform:translateX(70px)}}
@keyframes wa-y{0%,30%{transform:none;animation-timing-function:var(--esce)}38%{transform:translateY(-14px);animation-timing-function:var(--entra)}48%,100%{transform:translateY(30px)}}
@keyframes wa-a{0%,28%{opacity:0;transform:scale(.6)}31%{opacity:1;transform:none}44%{opacity:1;transform:rotate(18deg)}49%,100%{opacity:0;transform:rotate(22deg) scale(.6)}}
.in .parla-w{animation:wa-p var(--d) var(--ease) infinite}
@keyframes wa-p{0%,3%,26%,62%,74%,100%{transform:none}6%,13%,20%{transform:scale(1.05,.94)}9.5%,16.5%,23%{transform:none}65%{transform:scale(1.07,.92)}68%{transform:translateY(-12px)}71%{transform:scale(1.04,.95)}}
.in .sg-watch{animation:wa-sg var(--d) var(--ease) infinite}
@keyframes wa-sg{0%,28%{transform:translate(-8px,-1px)}36%{transform:translate(-7px,-6px)}46%,56%{transform:translate(-4px,-6px)}62%,100%{transform:translate(-8px,-2px)}}

/* ——— collegamenti (posta) ——— */
.scena .fonte rect{fill:var(--carta);stroke:var(--bordo);stroke-width:1.2}
.scena .busta-c{fill:var(--carta);stroke:color-mix(in srgb,var(--gig) 30%,transparent);stroke-width:1.3}
.scena .busta-l{fill:none;stroke:color-mix(in srgb,var(--gig) 30%,transparent);stroke-width:1.3}
.scena .busta-a{fill:var(--acc);transform-box:fill-box;transform-origin:50% 0}
.scena .busta{transform-box:fill-box;transform-origin:center}
.scena .lettera{transform-box:fill-box}
.in .fonte.gm rect{animation:po-fonte var(--d) infinite}
@keyframes po-fonte{0%,1%{fill:var(--carta);stroke:var(--bordo)}3%,12%{fill:color-mix(in srgb,var(--acc) 14%,var(--carta));stroke:var(--acc)}18%,100%{fill:var(--carta);stroke:var(--bordo)}}
.in .busta-x{animation:po-x var(--d) var(--esce) infinite}
.in .busta-y{animation:po-y var(--d) infinite}
.in .busta{animation:po-c var(--d) var(--ease) infinite}
@keyframes po-x{0%,4%{transform:translateX(-116px)}22%,100%{transform:none}}
@keyframes po-y{0%,4%{transform:translateY(-164px);animation-timing-function:cubic-bezier(.5,0,.9,.6)}22%{transform:none;animation-timing-function:var(--esce)}25%{transform:translateY(-5px);animation-timing-function:var(--entra)}28%,100%{transform:none}}
@keyframes po-c{0%,3%{opacity:0;transform:scale(.35)}6%{opacity:1;transform:scale(.45)}22%{transform:none}93%{opacity:1}99%,100%{opacity:0}}
.in .busta-a{animation:po-aletta var(--d) var(--ease) infinite}
@keyframes po-aletta{0%,30%{transform:none;opacity:1}36%{transform:scaleY(-1);opacity:1}42%,93%{transform:scaleY(-1);opacity:0}99%,100%{transform:none;opacity:0}}
.in .lettera{animation:po-lettera var(--d) var(--ease) infinite}
@keyframes po-lettera{0%,35%{transform:translateY(18px)}46%,100%{transform:none}}
.scena[data-scena=posta] .fum.risposta{transform-origin:70% 100%}
.in .contento{animation:po-p var(--d) var(--ease) infinite}
@keyframes po-p{0%,62%,72%,100%{transform:none}64%{transform:scale(1.07,.92)}67%{transform:translateY(-10px)}70%{transform:scale(1.03,.96)}}
.in .sg-posta{animation:po-sg var(--d) var(--ease) infinite}
@keyframes po-sg{0%,4%{transform:translate(-8px,-6px)}20%,30%{transform:translate(-8px,4px)}38%,54%{transform:translate(-9px,0)}62%,100%{transform:translate(-9px,3px)}}

/* ——— condivisione (pagina) ———
   0-28 tu dici «condividi la pagina»; 24-46 il gigante la porge all'altra persona; poi la scadenza. */
.scena[data-scena=pagina]{--d:9s}
.scena .anelli rect{fill:none;stroke:var(--acc);stroke-width:1.8}
.scena .pag{transform-box:fill-box;transform-origin:center}
.scena.in[data-scena=pagina] .fum-pag{animation:fum-dire var(--d) var(--ease) infinite}
.in .parla-pag{animation:parla var(--d) var(--ease) infinite}
.in .pag-x{animation:pa-x var(--d) var(--ease) infinite}
.in .pag-y{animation:pa-y var(--d) infinite}
.in .pag{animation:pa-c var(--d) var(--ease) infinite}
@keyframes pa-x{0%,28%{transform:translateX(-79px)}46%,100%{transform:none}}
@keyframes pa-y{0%,28%{transform:translateY(-29px);animation-timing-function:var(--esce)}37%{transform:translateY(-74px);animation-timing-function:var(--entra)}46%{transform:none}49%{transform:translateY(-3px)}52%,100%{transform:none}}
@keyframes pa-c{0%,20%{opacity:0;transform:scale(.4) rotate(-10deg)}25%,28%{opacity:1;transform:scale(.6) rotate(-10deg)}46%{transform:none}93%{opacity:1}99%,100%{opacity:0}}
.in .porge{animation:pa-g var(--d) var(--ease) infinite}
@keyframes pa-g{0%,20%,34%,100%{transform:none}24%,28%{transform:rotate(3deg) translateX(2px)}}
.in .scade{animation:pa-scade var(--d) var(--rimbalzo) infinite}
@keyframes pa-scade{0%,52%{opacity:0;transform:scale(.5)}58%,93%{opacity:1;transform:none}99%,100%{opacity:0}}
.in .riceve{animation:pa-p var(--d) var(--ease) infinite}
@keyframes pa-p{0%,48%,60%,100%{transform:none}51%{transform:scale(1.07,.92)}54%{transform:translateY(-12px)}58%{transform:scale(1.03,.96)}}
.in .sg-pag{animation:pa-sg var(--d) var(--ease) infinite}
@keyframes pa-sg{0%,20%{transform:translate(-6px,-3px)}26%{transform:translate(7px,-1px)}36%{transform:translate(6px,-6px)}46%,100%{transform:translate(8px,2px)}}

/* ——— cartella in due ———
   Ciclo da 11 s. 0-28 tu dici «condividila con Luca»; 22-40 il tuo gigante mette il foglio nella cartella,
   la cartella si allinea (40-50) e il gigante di Luca lo vede. 44-68 Luca dice «aggiungi le foto»;
   68-84 il suo gigante aggiunge il foglio, la cartella si allinea di nuovo e il tuo lo vede. Riposo, poi si ricomincia.
   Per sempre: nessuna scadenza, la pillola dice che resta aggiornata. */
.scena[data-scena=cartella]{--d:11s}
.scena .cd-dorso{fill:color-mix(in srgb,var(--acc) 22%,var(--carta));stroke:var(--bordo);stroke-width:1.2}
.scena .cd-fronte{fill:color-mix(in srgb,var(--acc) 10%,var(--carta));stroke:color-mix(in srgb,var(--acc) 55%,var(--carta));stroke-width:1.4}
.scena .altro-riga{fill:color-mix(in srgb,var(--altro) 62%,var(--carta))}
.scena .cd-pa{fill:var(--acc)} .scena .cd-pb{fill:var(--altro)}
.scena .cd-pt,.scena .cd-pill,.scena .cd-sync{transform-box:fill-box;transform-origin:center}
.scena .cd-sync path{fill:none;stroke:var(--acc-testo);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.scena .cdA,.scena .cdB{transform-box:fill-box;transform-origin:center}
.scena.in[data-scena=cartella] .cd-fl{animation:fum-dire var(--d) var(--ease) infinite}
.in .cd-fr{animation:cd-fum-r var(--d) var(--ease) infinite}
@keyframes cd-fum-r{0%,44%{opacity:0;transform:scale(.7)}48%,66%{opacity:1;transform:none}72%,100%{opacity:0;transform:scale(.85)}}
.in .cd-pl{animation:parla var(--d) var(--ease) infinite}
.in .cd-pr{animation:cd-parla-r var(--d) var(--ease) infinite}
@keyframes cd-parla-r{0%,47%,70%,100%{transform:none}50%,57%,64%{transform:scale(1.05,.94)}53.5%,60.5%,67%{transform:none}}
.in .cdA-x{animation:cd-ax var(--d) var(--ease) infinite}
.in .cdA-y{animation:cd-ay var(--d) infinite}
.in .cdA{animation:cd-a var(--d) var(--ease) infinite}
@keyframes cd-ax{0%,26%{transform:translateX(-42px)}40%,100%{transform:none}}
@keyframes cd-ay{0%,26%{transform:translateY(22px);animation-timing-function:var(--esce)}33%{transform:translateY(-30px);animation-timing-function:var(--entra)}40%,100%{transform:none}}
@keyframes cd-a{0%,20%{opacity:0;transform:scale(.6)}24%,26%{opacity:1;transform:none}40%{transform:none}42%{transform:scale(1.06)}45%{transform:none}95%{opacity:1}99%,100%{opacity:0}}
.in .cdB-x{animation:cd-bx var(--d) var(--ease) infinite}
.in .cdB-y{animation:cd-by var(--d) infinite}
.in .cdB{animation:cd-b var(--d) var(--ease) infinite}
@keyframes cd-bx{0%,70%{transform:translateX(38px)}84%,100%{transform:none}}
@keyframes cd-by{0%,70%{transform:translateY(22px);animation-timing-function:var(--esce)}77%{transform:translateY(-30px);animation-timing-function:var(--entra)}84%,100%{transform:none}}
@keyframes cd-b{0%,64%{opacity:0;transform:scale(.6)}68%,70%{opacity:1;transform:none}84%{transform:none}86%{transform:scale(1.06)}89%{transform:none}95%{opacity:1}99%,100%{opacity:0}}
/* i due giganti: ognuno si sporge quando mette il suo foglio, e annuisce quando arriva quello dell'altro */
.in .cd-gl{animation:cd-gl var(--d) var(--ease) infinite}
@keyframes cd-gl{0%,20%,34%,84%,93%,100%{transform:none}24%,30%{transform:rotate(4deg) translateX(3px)}87%{transform:rotate(3deg) scaleY(.97)}90%{transform:rotate(-1.5deg)}}
.in .cd-gr{animation:cd-gr var(--d) var(--ease) infinite}
@keyframes cd-gr{0%,40%,49%,64%,78%,100%{transform:none}43%{transform:rotate(-3deg) scaleY(.97)}46%{transform:rotate(1.5deg)}68%,74%{transform:rotate(-4deg) translateX(-3px)}}
.in .cd-sgl{animation:cd-sgl var(--d) var(--ease) infinite}
@keyframes cd-sgl{0%,18%{transform:translate(4px,-4px)}24%,40%{transform:translate(8px,3px)}48%,70%{transform:translate(8px,-2px)}80%,92%{transform:translate(8px,2px)}100%{transform:translate(4px,-4px)}}
.in .cd-sgr{animation:cd-sgr var(--d) var(--ease) infinite}
@keyframes cd-sgr{0%,36%{transform:translate(-7px,1px)}42%,48%{transform:translate(-8px,2px)}52%,64%{transform:translate(-4px,-4px)}68%,84%{transform:translate(-8px,3px)}92%,100%{transform:translate(-7px,1px)}}
/* la cartella si allinea: le frecce girano, la pillola e il segno di chi ha scritto si accendono */
.in .cd-sync{animation:cd-sync var(--d) var(--ease) infinite}
@keyframes cd-sync{0%,40%{transform:none}50%{transform:rotate(360deg)}84%{transform:rotate(360deg)}94%,100%{transform:rotate(720deg)}}
.in .cd-pill{animation:cd-pill var(--d) var(--rimbalzo) infinite}
@keyframes cd-pill{0%,40%,48%,84%,92%,100%{transform:none}44%,88%{transform:scale(1.08)}}
.in .cd-pa{animation:cd-pa var(--d) var(--rimbalzo) infinite}
.in .cd-pb{animation:cd-pb var(--d) var(--rimbalzo) infinite}
@keyframes cd-pa{0%,40%,48%,100%{transform:none}44%{transform:scale(1.6)}}
@keyframes cd-pb{0%,84%,92%,100%{transform:none}88%{transform:scale(1.6)}}

/* ——— ricerca lavoro ——— */
.scena .logo-j{fill:color-mix(in srgb,var(--gig) 12%,var(--carta))}
.scena .voto-f{fill:color-mix(in srgb,var(--gig) 7%,var(--carta))}
.scena .job.top .carta{stroke:var(--acc);stroke-width:1.8}
.scena .job.top .voto-f{fill:var(--acc)} .scena .job.top .voto-t{fill:var(--su-acc)}
.scena .job.top .logo-j{fill:color-mix(in srgb,var(--acc) 22%,var(--carta))}
.scena .stella path{fill:#F2A93B;stroke:color-mix(in srgb,#F2A93B 60%,#000);stroke-width:.8}
.scena .stella{transform-origin:center}
.scena .job{transform-box:fill-box}
.in .job.j1{animation:lv-j1 var(--d) var(--esce) infinite}
.in .job.j2{animation:lv-j2 var(--d) var(--esce) infinite}
.in .job.j3{animation:lv-j3 var(--d) var(--esce) infinite}
@keyframes lv-j1{0%,4%{opacity:0;transform:translateX(50px)}12%,93%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes lv-j2{0%,18%{opacity:0;transform:translateX(50px)}26%,93%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes lv-j3{0%,32%{opacity:0;transform:translateX(50px)}40%,93%{opacity:1;transform:none}99%,100%{opacity:0}}
.in .j1 .voto{animation:lv-v1 var(--d) var(--rimbalzo) infinite}
.in .j2 .voto{animation:lv-v2 var(--d) var(--rimbalzo) infinite}
.in .j3 .voto{animation:lv-v3 var(--d) var(--rimbalzo) infinite}
@keyframes lv-v1{0%,13%{transform:scale(0)}18%,100%{transform:none}}
@keyframes lv-v2{0%,27%{transform:scale(0)}32%,100%{transform:none}}
@keyframes lv-v3{0%,41%{transform:scale(0)}46%,100%{transform:none}}
.in .job.top .carta{animation:lv-top var(--d) infinite}
@keyframes lv-top{0%,50%{stroke:var(--bordo);stroke-width:1.2}54%,100%{stroke:var(--acc);stroke-width:1.8}}
.in .job.top .voto-f{animation:lv-top-v var(--d) infinite}
@keyframes lv-top-v{0%,50%{fill:color-mix(in srgb,var(--gig) 7%,var(--carta))}54%,100%{fill:var(--acc)}}
.in .job.top .voto-t{animation:lv-top-t var(--d) infinite}
@keyframes lv-top-t{0%,50%{fill:var(--testo)}54%,100%{fill:var(--su-acc)}}
.in .stella{animation:lv-stella var(--d) var(--rimbalzo) infinite}
@keyframes lv-stella{0%,53%{transform:scale(0) rotate(-40deg)}60%,93%{transform:none}99%,100%{transform:scale(0)}}
.in .hop-lav{animation:lv-p var(--d) var(--ease) infinite}
@keyframes lv-p{0%,58%,70%,100%{transform:none}61%{transform:scale(1.07,.92)}64%{transform:translateY(-12px)}68%{transform:scale(1.03,.96)}}
.in .sg-lav-j{animation:lv-sg var(--d) var(--ease) infinite}
@keyframes lv-sg{0%,8%{transform:translate(8px,-7px)}22%{transform:translate(8px,-5px)}36%{transform:translate(8px,-1px)}46%{transform:translate(8px,-1px)}54%,92%{transform:translate(8px,-5px)}100%{transform:translate(8px,-7px)}}

/* ——— spese ——— */
.scena[data-scena=spese]{--d:7s}
.scena .dorso{fill:var(--acc)}
.scena .b-vecchia{fill:color-mix(in srgb,var(--gig) 14%,var(--carta))} .scena .b-ora{fill:var(--acc);transform-box:fill-box;transform-origin:50% 100%}
.scena .mon{fill:#F2B33D;stroke:#9A6A12;stroke-width:1.2} .scena .mon-i{fill:none;stroke:#9A6A12;stroke-width:1.1}
.scena .moneta{transform-box:fill-box;transform-origin:center;opacity:0}
.scena .tot1{opacity:0}
.scena.in[data-scena=spese] .fum{animation:fum-dire var(--d) var(--ease) infinite}
.in .moneta-x{animation:sp-x var(--d) var(--ease) infinite}
.in .moneta-y{animation:sp-y var(--d) infinite}
.in .moneta{animation:sp-c var(--d) var(--ease) infinite}
@keyframes sp-x{0%,26%{transform:translateX(82px)}42%,100%{transform:none}}
@keyframes sp-y{0%,26%{transform:translateY(32px);animation-timing-function:var(--esce)}33%{transform:translateY(-72px);animation-timing-function:var(--entra)}42%,100%{transform:translateY(-44px)}}
@keyframes sp-c{0%,25%{opacity:0;transform:scale(.6)}28%{opacity:1;transform:none}40%{opacity:1;transform:scale(.9)}44%,100%{opacity:0;transform:scale(.4)}}
.in .tot1{animation:sp-t1 var(--d) infinite}.in .tot2{animation:sp-t2 var(--d) infinite}
@keyframes sp-t1{0%,42%{opacity:1}46%,95%{opacity:0}100%{opacity:1}}
@keyframes sp-t2{0%,42%{opacity:0;transform:translateY(5px)}48%,95%{opacity:1;transform:none}100%{opacity:0}}
.in .b-ora{animation:sp-b var(--d) var(--rimbalzo) infinite}
@keyframes sp-b{0%,42%{transform:scaleY(.6)}50%,95%{transform:none}100%{transform:scaleY(.6)}}
.in .sg-spese{animation:sp-sg var(--d) var(--ease) infinite}
@keyframes sp-sg{0%,22%{transform:translate(-9px,1px)}28%{transform:translate(-8px,4px)}34%{transform:translate(-8px,-6px)}42%,92%{transform:translate(-8px,-2px)}100%{transform:translate(-9px,1px)}}

/* ——— privacy (casa, su scuro) ——— */
.scena[data-scena=casa]{--d:6s}
.scena .casa-piena{fill:color-mix(in srgb,var(--su-scuro) 4%,transparent);stroke:var(--su-scuro);stroke-opacity:.55;stroke-width:2.2;stroke-linejoin:round}
.scena .finestra-c{fill:color-mix(in srgb,#F2B33D 30%,var(--s-bg));stroke:var(--su-scuro);stroke-opacity:.4;stroke-width:1.4}
.scena .finestra-x{stroke:var(--su-scuro);stroke-opacity:.4;stroke-width:1.4}
.scena .lk-c{fill:var(--acc-scuro)} .scena .lk-m{fill:none;stroke:var(--acc-scuro);stroke-width:3.4;stroke-linecap:round}
.scena .lk-b{fill:var(--scuro-2)}
.scena .lk-m{transform-box:fill-box}
.scena .lucchetto{transform-box:fill-box;transform-origin:50% 100%}
.in .lk-m{animation:ca-arco var(--d) var(--ease) infinite}
@keyframes ca-arco{0%,10%{transform:translateY(-7px)}17%{transform:translateY(1px)}20%,90%{transform:none}97%,100%{transform:translateY(-7px)}}
.in .lucchetto{animation:ca-scatto var(--d) var(--rimbalzo) infinite}
@keyframes ca-scatto{0%,16%,26%,100%{transform:none}19%{transform:scale(1.1)}}
.in .finestra-c{animation:ca-luce var(--d) ease-in-out infinite}
@keyframes ca-luce{0%,18%{fill:color-mix(in srgb,#F2B33D 12%,var(--s-bg))}34%,92%{fill:color-mix(in srgb,#F2B33D 38%,var(--s-bg))}100%{fill:color-mix(in srgb,#F2B33D 12%,var(--s-bg))}}

/* fermo e movimento ridotto: la scena completa, ferma */
html.fermo .scena *,
.scena.ferma *{animation:none!important}
@media (prefers-reduced-motion:reduce){.scena *{animation:none!important}}