/* ==========================================================================
   MiMuovo · pagina Preventivi (scena pv-*, vedi _src/f/preventivi.mjs)
   La scena è una schermata sola che cambia fase: richieste dalle tre strade
   (posta, gestionale ordini, PDF), mail letta, camion, costo, prezzo,
   offerta/ordine. In testata c'è il film (assets/mm/films/preventivi.*): questa
   scena si vede nei passi. Le animazioni partono quando il pannello
   diventa visibile (.vis, messo da scenes.js). Layout a due misure con le
   container query: stretto (passi, telefono) e largo (testata).
   Movimento: solo transform, opacity, filter; curve --ease-out / --ease-io.
   ========================================================================== */
.scene .pv{container:pv / inline-size;position:relative}
.scene .pv-stage{position:relative;min-height:424px}
/* telefono: la mail letta resta corta, così la scena non cambia altezza */
@container pv (max-width: 400px){
  .scene .pv-mail p:last-child,.scene .pv-next{display:none!important}
}
/* largo: la mail resta a sinistra, il lavoro dell'agente cambia a destra */
@container pv (min-width: 620px){
  .scene .pv-stage{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:minmax(0,1fr);column-gap:16px;min-height:436px}
  .scene .pv-stage > .pv-inbox{grid-column:1 / -1;grid-row:1}
  .scene .pv-stage > .pv-mail{grid-column:1;grid-row:1}
  .scene .pv-stage > .pv-panel:not(.pv-inbox){grid-column:2;grid-row:1;align-self:start}
}
.scene .pv .ui-h{margin-bottom:10px}
.scene .pv-src{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:#5b655f;background:#F4F6F2;border-radius:999px;padding:5px 10px}
.scene .pv-src img{width:14px;height:14px}
.scene .pv-src-i svg{display:block;width:13px;height:13px;color:#3B6E00}
/* il bollino PDF (scena e bento) */
.pv-pdf{display:inline-block;font:800 7.5px/1 var(--mono);letter-spacing:.02em;color:#fff;background:#D64533;border-radius:3px;padding:3px 3px 2px}

/* agente che racconta cosa sta facendo */
.scene .pv-say{display:flex;align-items:center;gap:10px;padding:7px 12px 7px 7px;border-radius:12px;background:#F7F9F5;border:1px solid #EDF0EA;margin-bottom:12px}
.scene .pv-say .av{width:30px;height:30px;border-radius:9px;background:#fff;border:1px solid #E3E8DE;display:grid;place-items:center;flex-shrink:0}
.scene .pv-say .av img{width:16px;height:16px}
.scene .pv-say .tx{position:relative;flex:1;min-width:0}
.scene .pv-say small{display:block;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#2E7A33}
.scene .pv-say b{display:block;font-size:12.5px;font-weight:600;color:#20261f;line-height:1.35;min-height:2.7em}
@container pv (min-width: 620px){.scene .pv-say b{min-height:1.35em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}

/* titoletto di ogni fase */
.scene .pv-ph{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px}
.scene .pv-ph b{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:800;letter-spacing:-.01em}
.scene .pv-ph b > svg{width:14px;height:14px;color:#3B6E00}
.scene .pv-ph > span{font-size:11px;color:#8B948E;white-space:nowrap}
.scene .pv-ph .tot{font:800 15px/1 var(--mono);color:#121712;letter-spacing:-.02em}

/* avatar del mittente */
.scene .pv-av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;font:800 10.5px/1 var(--font);letter-spacing:.03em;color:#fff;background:#2B5BB0}
.scene .pv-av.g{background:#C9D0C6;color:#3f4741}

/* 1. casella: la mail nuova scende in cima, le altre fanno spazio */
.scene .pv-mrow{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid #EEF1EA;background:#fff;margin-bottom:6px}
.scene .pv-mrow .tx{flex:1;min-width:0}
.scene .pv-mrow .tx b{display:block;font-size:12.5px;font-weight:600;color:#3f4741}
.scene .pv-mrow .tx span{display:block;font-size:11.5px;color:#7E8882;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scene .pv-mrow .t{font:600 11px/1 var(--mono);color:#8B948E}
.scene .pv-mrow .tx em{font-style:normal;font-weight:600;color:#5b655f}
/* la strada da cui arriva: logo della posta, gestionale ordini, PDF */
.scene .pv-so{width:30px;height:30px;border-radius:9px;background:#fff;border:1px solid #E6EAE2;display:grid;place-items:center;flex-shrink:0}
.scene .pv-so img{width:16px;height:16px;object-fit:contain}
.scene .pv-so svg{width:15px;height:15px;color:#3B6E00}
@container pv (max-width: 400px){.scene .pv-mrow .tx em{display:none}}
.scene .pv-mrow.new{border-color:#BFE0A0;background:#F4FAEE}
.scene .pv-mrow.new .tx b,.scene .pv-mrow.new .tx span{color:#121712;font-weight:800}
.scene .pv-mrow.new .tx span{font-weight:600}
.scene .pv-mrow.new .t{color:#2F6B12;font-weight:800}
.scene.pv-hero[data-step="1"] .pv-mrow.new{display:none}
.scene.pv-hero[data-step="2"] .pv-mrow.new{animation:pv-drop .7s var(--ease-out) .3s both}
.scene.pv-hero[data-step="2"] .pv-mrow:not(.new){animation:pv-push .7s var(--ease-out) .3s both}
@keyframes pv-drop{from{opacity:0;transform:translateY(-16px) scale(.98)}to{opacity:1;transform:none}}
@keyframes pv-push{from{transform:translateY(calc(-100% - 6px))}to{transform:none}}
@container pv (min-width: 620px){
  .scene .pv-mrow{padding:13px 16px;gap:12px}
  .scene .pv-mrow .pv-so{width:34px;height:34px}
  .scene .pv-mrow .tx b{font-size:13px}.scene .pv-mrow .tx span{font-size:12px}
}

/* 2. la mail del committente e i dati letti */
.scene .pv-mail{border:1px solid #E6EAE2;border-radius:14px;background:#fff;padding:11px 13px;margin-bottom:10px;box-shadow:0 1px 2px rgba(18,23,18,.04)}
.scene .pv-mh{display:flex;align-items:center;gap:10px}
.scene .pv-mh .tx{flex:1;min-width:0}
.scene .pv-mh .tx b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scene .pv-mh .tx span{display:block;font-size:11px;color:#7E8882}
.scene .pv-mh .t{font:600 11px/1 var(--mono);color:#8B948E}
.scene .pv-subj{display:block;font-size:13px;font-weight:800;letter-spacing:-.01em;margin:9px 0 0}
.scene .pv-mail p{display:none;font-size:12.5px;line-height:1.6;color:#2f3632;margin-top:6px}
.scene.pv-hero[data-step="3"] .pv-mail p{display:block}
/* stretto, richiesta già letta: resta solo chi scrive e l'oggetto */
@container pv (max-width: 619.98px){
  .scene.pv-hero:not([data-step="3"]) .pv-mail,.scene.pv-steps:not([data-step="1"]) .pv-mail{padding:9px 12px}
  .scene.pv-hero:not([data-step="3"]) .pv-mh .tx span,.scene.pv-steps:not([data-step="1"]) .pv-mh .tx span{display:none}
  .scene.pv-hero:not([data-step="3"]) .pv-mh,.scene.pv-steps:not([data-step="1"]) .pv-mh{align-items:flex-start}
  .scene.pv-hero:not([data-step="3"]) .pv-subj,.scene.pv-steps:not([data-step="1"]) .pv-subj{margin:-12px 0 0 40px;font-size:12px;font-weight:600;color:#59625c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
.scene .pv-mail mark{color:inherit;border-radius:3px;padding:0 1px;background:linear-gradient(#D5ECBB,#D5ECBB) no-repeat 0 88% / 0% 45%;transition:background-size .5s var(--ease-out)}
.scene.pv-hero:not([data-step="1"]):not([data-step="2"]) .pv-mail mark,.scene.pv-steps .pv-mail mark{background-size:100% 45%}
.scene .pv-mail mark:nth-of-type(2){transition-delay:.12s}.scene .pv-mail mark:nth-of-type(3){transition-delay:.24s}
.scene .pv-mail mark:nth-of-type(4){transition-delay:.36s}
.scene .pv-mail p + p mark:nth-of-type(1){transition-delay:.5s}.scene .pv-mail p + p mark:nth-of-type(2){transition-delay:.62s}.scene .pv-mail p + p mark:nth-of-type(3){transition-delay:.74s}
@container pv (min-width: 620px){
  .scene .pv-mail{margin:0;padding:16px 18px}
  .scene .pv-subj{margin-top:14px;font-size:14.5px}
  .scene .pv-mail p{display:block;font-size:13px;margin-top:10px}
  .scene .pv-mh .pv-av{width:36px;height:36px;font-size:11.5px}
  .scene .pv-mh .tx b{font-size:13px}
}
.scene .pv-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
.scene .pv-f{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border-radius:11px;background:#F4FAEE;border:1px solid #DDEFCB;opacity:0;transform:translateY(6px)}
.scene .pv-f.wide{grid-column:1 / -1;background:#FFF9EA;border-color:#F3E2AE}
.scene .pv-f.wide svg{color:#8A6400}.scene .pv-f.wide small{color:#8A6400}
.scene .pv-f svg{width:14px;height:14px;color:#3B6E00;margin-top:2px;flex-shrink:0}
.scene .pv-f small{display:block;font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#5E7F45}
.scene .pv-f b{display:block;font-size:11.5px;font-weight:700;line-height:1.3}
.scene .pv-read.vis .pv-f{animation:pv-in .45s var(--ease-out) forwards;animation-delay:calc(.95s + var(--i) * 110ms)}
@keyframes pv-in{to{opacity:1;transform:none}}
.scene .pv-next{display:flex;align-items:center;gap:8px;margin-top:10px;padding:2px 2px;font-size:11.5px;font-weight:600;color:#7E8882;opacity:0}
.scene .pv-next svg{width:14px;height:14px;color:#4E9A1B;animation:spin 1.4s linear infinite}
.scene .pv-read.vis .pv-next{animation:pv-in .4s ease 1.9s forwards}
@container pv (min-width: 620px){
  .scene .pv-fields{gap:8px}
  .scene .pv-f{padding:12px 13px}
  .scene .pv-f b{font-size:12.5px}
}

/* 3. camion candidati: costo del viaggio per ognuno, il più conveniente viene scelto */
.scene .pv-tk{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.scene .pv-t{position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid #EEF1EA;background:#fff;opacity:0;transform:translateY(6px)}
.scene .pv-trucks.vis .pv-t{animation:pv-in .45s var(--ease-out) forwards;animation-delay:calc(.15s + var(--i) * 90ms)}
.scene .pv-t .rad{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #C9D0C6;flex-shrink:0;display:grid;place-items:center}
.scene .pv-t .rad::after{content:"";width:8px;height:8px;border-radius:50%;background:#2E7A33;transform:scale(0)}
.scene .pv-t .tx{flex:1;min-width:0}
.scene .pv-t .tx b{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;min-width:0}
.scene .pv-t .tx b .plate{font-size:11.5px;padding:4px 6px}
.scene .pv-t .tx em{min-width:0;font-style:normal;font-weight:600;color:#59625c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scene .pv-t .tx span{display:block;font-size:11px;color:#59625c;margin-top:3px}
.scene .pv-t .tx small{display:block;font:600 10px/1.3 var(--mono);color:#8B948E;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scene .pv-t .am{font:800 14px/1 var(--mono);letter-spacing:-.02em;white-space:nowrap}
.scene .pv-t .best{position:absolute;top:-8px;right:10px;display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:800;padding:3px 7px;border-radius:999px;background:#2E7A33;color:#fff}
.scene .pv-t .best svg{width:10px;height:10px}
.scene .pv-t.pick .cur{left:auto;right:22%;top:46%}
.scene .pv-trucks.vis .pv-t.pick{animation:pv-in .45s var(--ease-out) .15s forwards,pv-pick .35s var(--ease-out) 1.8s forwards}
.scene .pv-trucks.vis .pv-t.pick .rad{animation:pv-rad .3s ease 1.8s forwards}
.scene .pv-trucks.vis .pv-t.pick .rad::after{animation:pv-dot .35s var(--ease-out) 1.82s forwards}
/* telefono: consumi e usura in un carattere più stretto, e se non bastasse
   vanno a capo invece di essere tagliati */
@container pv (max-width: 400px){
  .scene .pv-t .tx small{font:600 10.5px/1.35 var(--font);white-space:normal;overflow:visible;text-overflow:clip}
}
@keyframes pv-pick{to{opacity:1;transform:none;border-color:#9FD06E;background:#F4FAEE;box-shadow:0 0 0 3px #EAF6DF}}
@keyframes pv-rad{to{box-shadow:inset 0 0 0 1.5px #2E7A33}}
@keyframes pv-dot{to{transform:scale(1)}}

/* 4. costo del viaggio: barra a segmenti, poi voci dirette e indirette */
.scene .pv-bar{display:flex;gap:2px;height:10px;border-radius:5px;overflow:hidden;margin:0 0 8px}
.scene .pv-bar i{display:block;flex:var(--w) 1 0;background:var(--c);transform-origin:0 50%;transform:scaleX(0)}
.scene .pv-bar i.cut{margin-left:3px}
.scene .pv-grp{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:5px;padding:7px 2px 2px;border-top:1px solid #EEF1EA;opacity:0;transform:translateY(4px)}
.scene .pv-grp:first-child{margin-top:0;padding-top:0;border-top:0}
.scene .pv-grp span{font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#5E7F45}
.scene .pv-grp b{font:700 11.5px/1 var(--mono);color:#3f4741}
.scene .pv-cost.vis .pv-grp{animation:pv-in .4s var(--ease-out) forwards;animation-delay:calc(.26s + var(--i) * 80ms)}
.scene .pv-cost.vis .pv-bar i{animation:pv-grow .5s var(--ease-out) forwards;animation-delay:calc(.2s + var(--i) * 80ms)}
@keyframes pv-grow{to{transform:none}}
.scene .pv-lines{display:grid;grid-template-columns:minmax(0,1fr)}
.scene .pv-ln{display:grid;grid-template-columns:9px minmax(0,1fr) auto;gap:9px;align-items:center;padding:3px 2px;opacity:0;transform:translateY(4px)}
.scene .pv-cost.vis .pv-ln{animation:pv-in .4s var(--ease-out) forwards;animation-delay:calc(.3s + var(--i) * 80ms)}
.scene .pv-ln .sw{width:9px;height:9px;border-radius:3px;background:var(--c)}
.scene .pv-ln .tx b{display:block;font-size:12px;font-weight:700;line-height:1.25}
.scene .pv-ln .tx span{display:block;font-size:10.5px;color:#7E8882;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scene .pv-ln .am{font:700 12px/1 var(--mono);white-space:nowrap}

/* 5. prezzo e margine: righello costo, minimo, proposto */
.scene .pv-big{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.scene .pv-big > b{font:800 34px/1 var(--mono);letter-spacing:-.04em}
.scene .pv-sub{font-size:12px;color:#5b655f;margin-top:7px;line-height:1.45}
.scene .pv-ruler{position:relative;height:6px;margin:44px 6px 42px}
.scene .pv-ruler .trk{position:absolute;inset:2px 0;border-radius:2px;background:#E6EAE2}
.scene .pv-ruler .z{position:absolute;top:0;bottom:0;border-radius:3px;transform-origin:0 50%;transform:scaleX(0)}
.scene .pv-ruler .z.lo{background:#F1D48E}
.scene .pv-ruler .z.ok{background:#4E9A1B}
.scene .pv-price.vis .pv-ruler .z.lo{animation:pv-grow .5s var(--ease-out) .35s forwards}
.scene .pv-price.vis .pv-ruler .z.ok{animation:pv-grow .7s var(--ease-out) .8s forwards}
.scene .pv-ruler .mk{position:absolute;top:50%;width:2px;height:14px;margin:-7px 0 0 -1px;border-radius:1px;background:#121712}
.scene .pv-ruler .mk small{position:absolute;top:18px;left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap;font-size:10px;color:#7E8882;line-height:1.25}
.scene .pv-ruler .mk small b{display:block;font:700 11px/1.2 var(--mono);color:#121712}
.scene .pv-ruler .mk.pr{width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#2E7A33;box-shadow:0 0 0 3px #fff,0 2px 8px rgba(46,122,51,.45);opacity:0;transform:scale(.6)}
.scene .pv-ruler .mk.pr small{top:auto;bottom:24px;left:auto;right:-4px;transform:none;text-align:right;color:#2F6B12;font-weight:700}
.scene .pv-ruler .mk.pr small b{color:#2F6B12}
.scene .pv-price.vis .pv-ruler .mk.pr{animation:pv-pop .45s var(--ease-out) 1.35s forwards}
@keyframes pv-pop{to{opacity:1;transform:none}}
.scene .pv-hist{display:flex;gap:8px;align-items:center;padding:9px 11px;border-radius:11px;background:#F7F9F5;font-size:11.5px;color:#4c5550;line-height:1.35}
.scene .pv-hist svg{width:14px;height:14px;color:#5b655f;flex-shrink:0}
.scene .pv-hist b{color:#121712}
@container pv (min-width: 620px){
  .scene .pv-big > b{font-size:42px}
  .scene .pv-ruler{margin:48px 8px 46px}
}

/* 6. offerta o ordine: il puntatore preme, il bottone cambia stato */
.scene .pv-sum{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid #EEF1EA;background:#FCFDFB}
.scene .pv-sum .tx{flex:1;min-width:0}
.scene .pv-sum small{display:block;font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#8B948E}
.scene .pv-sum b{display:block;font:800 20px/1.15 var(--mono);letter-spacing:-.03em;margin:3px 0}
.scene .pv-sum .tx > span{display:flex;align-items:center;flex-wrap:wrap;gap:5px;font-size:11.5px;color:#5b655f}
.scene .pv-sum .plate{font-size:11px;padding:3px 5px}
.scene .pv-sum > .pill{align-self:flex-start}
.scene .pv-btns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin:10px 0}
.scene .pv-btn{position:relative;display:grid;place-items:center;height:38px;border-radius:10px;font-size:12.5px;font-weight:700;white-space:nowrap}
.scene .pv-btn > .a,.scene .pv-btn > .b{grid-area:1 / 1;display:inline-flex;align-items:center;gap:7px}
.scene .pv-btn svg{width:14px;height:14px}
.scene .pv-btn > .b{opacity:0;filter:blur(3px)}
.scene .pv-btn.pri{background:#2E7A33;color:#fff;box-shadow:0 6px 14px -6px rgba(46,122,51,.55)}
.scene .pv-btn.sec{background:#fff;color:#121712;box-shadow:inset 0 0 0 1.5px #121712}
.scene .pv-btn .cur{left:56%;top:50%}
/* invia: premuto a 1,05 s; crea ordine: premuto a 2,85 s */
.scene .pv-act.vis .pv-btn.b1{animation:pv-press .26s var(--ease-out) .98s,pv-done .3s ease 1.12s forwards}
.scene .pv-act.vis .pv-btn.b1 > .a{animation:pv-out .22s ease 1.12s forwards}
.scene .pv-act.vis .pv-btn.b1 > .b{animation:pv-swap .3s ease 1.18s forwards}
.scene .pv-act.vis .pv-btn.b2{animation:pv-press .26s var(--ease-out) 2.78s,pv-done .3s ease 2.92s forwards}
.scene .pv-act.vis .pv-btn.b2 > .a{animation:pv-out .22s ease 2.92s forwards}
.scene .pv-act.vis .pv-btn.b2 > .b{animation:pv-swap .3s ease 2.98s forwards}
@keyframes pv-press{50%{transform:scale(.96)}}
@keyframes pv-done{to{background:#EAF6DF;color:#2F6B12;box-shadow:inset 0 0 0 1px #CFE6B4}}
@keyframes pv-out{to{opacity:0;filter:blur(3px)}}
@keyframes pv-swap{to{opacity:1;filter:none}}
.scene .pv-log{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.scene .pv-l{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:11px;border:1px solid #EEF1EA;background:#FCFDFB;opacity:0;transform:translateY(6px)}
.scene .pv-l > svg{width:15px;height:15px;color:#3B6E00;flex-shrink:0}
.scene .pv-l .tx{flex:1;min-width:0}
.scene .pv-l .tx b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scene .pv-l .tx span{display:block;font-size:11px;color:#7E8882;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scene .pv-l .t{font:600 10.5px/1 var(--mono);color:#8B948E}
/* telefono stretto: il titolo di una riga del registro va a capo, non si taglia */
@container pv (max-width: 400px){.scene .pv-l .tx b{white-space:normal}}
.scene .pv-l .go{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;color:#2E7A33;white-space:nowrap}
.scene .pv-l .go svg{width:13px;height:13px}
.scene .pv-l.l3{border-color:#BFE0A0;background:#F4FAEE;box-shadow:0 0 0 3px #EAF6DF}
.scene .pv-act.vis .pv-l.l1{animation:pv-in .4s var(--ease-out) 1.3s forwards}
.scene .pv-act.vis .pv-l.l2{animation:pv-in .4s var(--ease-out) 1.95s forwards}
.scene .pv-act.vis .pv-l.l3{animation:pv-in .45s var(--ease-out) 3.1s forwards}

/* i contatori: MM.count scrive data-from, che per scenes.js vuol dire "nascosto
   fino al passo N". Qui i numeri che contano restano sempre visibili. */
.scene .pv [data-count-at]{opacity:1!important;transform:none!important}

/* puntatore: entra dal basso a destra, preme, sparisce */
.scene .pv .cur{position:absolute;z-index:4;width:20px;height:20px;pointer-events:none;opacity:0}
.scene .pv .cur svg{display:block;width:20px;height:20px;fill:#121712;stroke:#fff;stroke-width:1.6;filter:drop-shadow(0 2px 4px rgba(18,23,18,.35))}
.scene .pv .vis .cur{animation:pv-cur 1.2s var(--ease-io) var(--d,0s) both}
@keyframes pv-cur{
  0%{opacity:0;transform:translate(36px,28px)}
  20%{opacity:1}
  50%{transform:translate(0,0) scale(1)}
  58%{transform:translate(0,0) scale(.82)}
  68%{transform:translate(0,0) scale(1)}
  86%{opacity:1}
  100%{opacity:0;transform:translate(0,0)}
}

/* ---------------------------------------------------------------- bento */
.pv-time{display:grid;grid-template-columns:auto auto minmax(32px,1fr) auto;align-items:center;gap:14px}
.pv-time .lg{display:flex;gap:6px}
.pv-time .lg img,.pv-time .lg .ic{width:30px;height:30px;padding:6px;border-radius:9px;background:#fff;border:1px solid var(--border);object-fit:contain}
.pv-time .lg .ic{display:grid;place-items:center;padding:0}
.pv-time .lg .ic svg{width:15px;height:15px;color:var(--green-deep)}
.pv-time .pt b{display:block;font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1}
.pv-time .pt small{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:4px}
.pv-time .pt.ok b{color:var(--green-deep)}
.pv-time i{height:2px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--act) 0 8px,transparent 8px 13px);transform-origin:0 50%;transition:transform 1s var(--ease-out) .3s}
.js .cell:not(.in) .pv-time i{transform:scaleX(0)}
@media (max-width: 520px){.pv-time{grid-template-columns:auto minmax(24px,1fr) auto}.pv-time .lg{display:none}}
.pv-mini{display:grid;gap:6px}
.pv-mini span{display:flex;justify-content:space-between;align-items:center;padding:8px 11px;border-radius:10px;background:var(--paper-soft);font-size:12.5px;color:var(--ink-soft)}
.pv-mini span.on{background:#fff;border:1px solid #CFE6B4;box-shadow:0 0 0 3px var(--green-soft);color:var(--ink)}
.pv-mini b{font-weight:700;color:var(--ink)}
.pv-mini em{font-style:normal;font-weight:700}
.pv-mini span.on em{color:var(--green-deep)}
.pv-rl{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:4px}
.pv-rl span{display:block;padding:9px 11px;border-radius:10px;line-height:1.25}
.pv-rl small{display:block;font-size:11.5px;color:var(--ink-soft)}
.pv-rl b{display:block;font-size:13.5px;font-weight:700;margin-top:2px}
.pv-rl .lo{background:#FFF6E0;border:1px solid #F3E2AE}.pv-rl .lo b{color:#8A6400}
.pv-rl .ok{background:var(--green-soft);border:1px solid #CFE6B4}.pv-rl .ok b{color:var(--green-deep)}
.pv-wk{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.pv-wk .f{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%;padding:8px 12px;border-radius:10px;background:var(--paper-soft);border:1px solid var(--border);font-size:12.5px;font-weight:600;color:var(--ink-soft)}
.pv-wk .f span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-wk .n{display:inline-flex;align-items:center;gap:6px;margin-left:14px;padding:7px 12px;border-radius:999px;background:var(--green-soft);border:1px solid #CFE6B4;color:var(--green-deep);font-size:13px;font-weight:700}
.pv-wk .n svg{width:14px;height:14px}
.pv-wk .n b{font-size:15px}

/* movimento ridotto: stati finali, niente puntatore */
@media (prefers-reduced-motion: reduce){
  .scene .pv *,.scene .pv *::after{animation:none!important;transition:none!important}
  .scene .pv-f,.scene .pv-t,.scene .pv-ln,.scene .pv-grp,.scene .pv-l,.scene .pv-next{opacity:1;transform:none}
  .scene.pv-hero .pv-mrow.new{display:flex}
  .scene .pv-bar i,.scene .pv-ruler .z{transform:none}
  .scene .pv-ruler .mk.pr{opacity:1;transform:none}
  .scene .pv-read mark{background-size:100% 45%}
  .scene .pv-t.pick{border-color:#9FD06E;background:#F4FAEE}
  .scene .pv-t.pick .rad::after{transform:none}
  .scene .pv-btn > .a{opacity:0}
  .scene .pv-btn > .b{opacity:1;filter:none}
  .scene .pv-btn.pri,.scene .pv-btn.sec{background:#EAF6DF;color:#2F6B12;box-shadow:inset 0 0 0 1px #CFE6B4}
  .scene .pv .cur{display:none}
}