/**
 * =============================================================================
 * PROBAR - CURA DEI BICCHIERI (guida illustrata) - css/cura-bicchieri.css
 * -----------------------------------------------------------------------------
 * 11/11/2026. Caricato solo su template-cura-bicchieri.php
 * (inc/abm-cura-bicchieri.php). E' il CSS della bozza approvata, con #abm-cb
 * davanti a ogni selettore e le @keyframes col prefisso cb-, cosi' non tocca il
 * resto del sito e il tema non tocca la pagina. Lo stato senza animazione e'
 * sempre il disegno finale: e' quello che vede chi chiede il movimento ridotto.
 * Ogni pulsante che si riempie d'oro ha il testo nero (Astra riempie d'oro
 * qualunque button al passaggio: qui il colore si dichiara sempre).
 * =============================================================================
 */

/* --- difese contro gli stili generici di Astra --- */
#abm-cb{width:100%;flex:1 1 100%;overflow-x:clip}
#abm-cb h1,#abm-cb h2,#abm-cb h3{font-weight:700;text-transform:none;letter-spacing:0}
#abm-cb figure{margin:0}
#abm-cb ul{margin-left:0}
#abm-cb .pill{text-transform:none;letter-spacing:0;line-height:1.3;box-shadow:none}
#abm-cb .pill:hover,#abm-cb .pill:focus{background-color:transparent;color:var(--testo);border-color:var(--oro-filo)}
#abm-cb .cursore{border:0;padding:0;box-shadow:none}

#abm-cb{
  --oro:#FFCE53;--oro-logo:#C19C59;--oro-scuro:#D9A93A;--oro-filo:rgba(255,206,83,.45);
  --caldo:#ff8a4c;
  --bg:#0a0a0a;--pan1:#141414;--pan2:#0c0c0c;--riga:#232323;
  --testo:#EEEBE5;--titolo:#fff;--secondario:rgba(255,255,255,.78);
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);
  --gravita:cubic-bezier(.5,0,.75,0);
}
#abm-cb *{box-sizing:border-box}
#abm-cb{margin:0;background:var(--bg);color:var(--testo);font:16px/1.65 "Open Sans","Helvetica Neue",Arial,sans-serif;overflow-x:hidden}
#abm-cb a{color:var(--oro)}
#abm-cb h1,#abm-cb h2,#abm-cb h3{font-family:"Playfair Display",Georgia,serif;color:var(--titolo);line-height:1.15;margin:0 0 14px}
#abm-cb h1{font-size:clamp(2.1rem,6vw,3.8rem)}
#abm-cb h2{font-size:clamp(1.6rem,4vw,2.4rem)}
#abm-cb h3{font-size:1.25rem}
#abm-cb p{margin:0 0 14px}
#abm-cb .wrap{max-width:1120px;margin:0 auto;padding:0 16px}
#abm-cb section{padding:72px 0;border-top:1px solid var(--riga)}
#abm-cb .kicker{font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:2.4px;color:var(--oro);margin:0 0 10px}
#abm-cb .lead{font-size:1.08rem;max-width:620px}
#abm-cb .piccolo{font-size:.82rem;color:var(--secondario)}
/* hero */
#abm-cb .hero{border:0;padding:56px 0 40px;min-height:min(88vh,860px);display:flex;align-items:center}
#abm-cb .hero .griglia{display:grid;gap:24px;align-items:center}
@media(min-width:900px){
#abm-cb .hero .griglia{grid-template-columns:1.05fr .95fr}
}
#abm-cb .cifra{font-family:"Playfair Display",Georgia,serif;color:var(--oro);font-size:clamp(3.2rem,11vw,6.2rem);line-height:1;margin:0 0 6px;font-weight:700;letter-spacing:-1px;font-variant-numeric:tabular-nums}
#abm-cb .giu{display:inline-flex;align-items:center;gap:10px;margin-top:22px;color:var(--secondario);font-size:.85rem;text-decoration:none}
#abm-cb .giu span{width:1px;height:36px;background:linear-gradient(var(--oro),transparent);display:block;transform-origin:top}
/* scena SVG */
#abm-cb .scena{margin:0;border-radius:16px;background:radial-gradient(120% 90% at 50% 40%,#171512 0%,#0c0c0c 70%);border:1px solid rgba(255,206,83,.18);overflow:hidden}
#abm-cb .scena svg{display:block;width:100%;height:auto}
#abm-cb .t{fill:none;stroke:var(--oro);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#abm-cb .t2{fill:none;stroke:var(--oro-logo);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#abm-cb .vetro{fill:rgba(255,255,255,.035)}
#abm-cb .liq{fill:var(--oro-scuro);opacity:.5}
#abm-cb .chiaro{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#abm-cb .ghiaccio{fill:rgba(255,255,255,.12);stroke:#EEEBE5;stroke-width:1.6}
#abm-cb .didasc{fill:rgba(255,255,255,.78);font:12px "Open Sans",Arial,sans-serif}
/* cause */
#abm-cb .due{display:grid;gap:28px}
@media(min-width:900px){
#abm-cb .due{grid-template-columns:1fr 1fr}
}
#abm-cb .causa{background:linear-gradient(180deg,var(--pan1),var(--pan2));border:1px solid var(--oro-filo);border-radius:16px;padding:18px 18px 22px}
#abm-cb .causa h3{margin-top:18px}
/* controlli delle prove */
#abm-cb .scelta{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 10px}
#abm-cb .scelta-lbl{display:block;font-size:.9rem;margin:16px 0 6px;color:var(--titolo);font-weight:600}
#abm-cb .pill{font:600 .86rem "Open Sans",Arial,sans-serif;min-height:44px;padding:10px 16px;border-radius:999px;border:1px solid var(--oro-filo);background-color:transparent;color:var(--testo);cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .16s var(--ease-out)}
#abm-cb .pill[aria-pressed="true"],#abm-cb .pill[aria-pressed="true"]:hover,#abm-cb .pill[aria-pressed="true"]:focus-visible{background-color:var(--oro);color:#0d0d0d;border-color:var(--oro)}
@media(hover:hover) and (pointer:fine){
#abm-cb .pill:hover{background-color:rgba(255,206,83,.12);color:var(--titolo)}
}
#abm-cb .pill:active{transform:scale(.97)}
#abm-cb .pill:focus-visible{outline:2px solid var(--oro);outline-offset:3px}
#abm-cb .esito{min-height:1.6em;font-weight:600;color:var(--titolo);margin:0}
/* cursore della prova di raffreddamento */
#abm-cb .cursore{display:block;width:100%;height:44px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
#abm-cb .cursore::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(90deg,var(--caldo),var(--oro))}
#abm-cb .cursore::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;margin-top:-11px;border-radius:50%;background:var(--oro);border:4px solid #0d0d0d;box-shadow:0 0 0 1px var(--oro)}
#abm-cb .cursore::-moz-range-track{height:6px;border-radius:999px;background:linear-gradient(90deg,var(--caldo),var(--oro))}
#abm-cb .cursore::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--oro);border:4px solid #0d0d0d;box-shadow:0 0 0 1px var(--oro)}
#abm-cb .cursore:focus-visible{outline:2px solid var(--oro);outline-offset:4px;border-radius:8px}
#abm-cb .estremi{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.78rem;color:var(--secondario);margin:-2px 0 10px}
#abm-cb .trascina{color:var(--oro);font-weight:600;transition:opacity .3s ease}
#abm-cb .trascina span{display:inline-block}
#abm-cb .trascina.via{opacity:0}
@keyframes cb-spinge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
#abm-cb .trascina span{animation:cb-spinge 1.4s var(--ease-in-out) infinite}
/* gesti */
#abm-cb .gesto .griglia{display:grid;gap:28px;align-items:center}
@media(min-width:900px){
#abm-cb .gesto .griglia{grid-template-columns:1fr 1fr;gap:56px}
#abm-cb .gesto:nth-of-type(even) .griglia>:first-child{order:2}
}
#abm-cb .num{font-family:"Playfair Display",Georgia,serif;color:var(--oro);font-size:1rem;letter-spacing:2px}
#abm-cb ul.gesti{list-style:none;margin:16px 0 0;padding:0}
#abm-cb ul.gesti li{position:relative;padding:10px 0 10px 30px;border-top:1px solid var(--riga)}
#abm-cb ul.gesti li:first-child{border-top:0}
#abm-cb ul.gesti li::before{content:"";position:absolute;left:2px;top:19px;width:14px;height:7px;border-left:2px solid var(--oro);border-bottom:2px solid var(--oro);transform:rotate(-45deg)}
#abm-cb .prova-vassoio{max-width:780px;margin-top:48px}
#abm-cb #vassoio{cursor:pointer}
/* chiusura */
#abm-cb .prodotti{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:28px 0}
@media(min-width:800px){
#abm-cb .prodotti{grid-template-columns:repeat(4,1fr)}
}
#abm-cb .prodotti figure{margin:0;background:#fff;border-radius:12px;overflow:hidden;aspect-ratio:1/1}
#abm-cb .prodotti img{width:100%;height:100%;object-fit:contain;display:block}
#abm-cb .prodotti .cella{display:flex;flex-direction:column}
#abm-cb .prodotti .cella p{margin:8px 0 0}
#abm-cb .btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 30px;border-radius:999px;font-weight:700;text-decoration:none;background-color:var(--oro);color:#0d0d0d;border:0;transition:transform .16s var(--ease-out),box-shadow .2s ease}
#abm-cb .btn:hover,#abm-cb .btn:focus-visible{background-color:var(--oro);color:#0d0d0d}
@media(hover:hover) and (pointer:fine){
#abm-cb .btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(255,206,83,.28)}
}
#abm-cb .btn:active{transform:scale(.97)}
#abm-cb .centro{text-align:center}
#abm-cb .centro .lead{margin-left:auto;margin-right:auto}
/* comparsa del testo allo scroll: il blocco, poi le righe una alla volta */
#abm-cb .entra{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
#abm-cb .entra.visto{opacity:1;transform:none}
#abm-cb .entra ul.gesti li{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
#abm-cb .entra.visto ul.gesti li{opacity:1;transform:none}
#abm-cb .entra.visto ul.gesti li:nth-child(1){transition-delay:.18s}
#abm-cb .entra.visto ul.gesti li:nth-child(2){transition-delay:.25s}
#abm-cb .entra.visto ul.gesti li:nth-child(3){transition-delay:.32s}
#abm-cb .entra.visto ul.gesti li:nth-child(4){transition-delay:.39s}
#abm-cb .entra.visto ul.gesti li:nth-child(5){transition-delay:.46s}
#abm-cb .entra.visto ul.gesti li:nth-child(6){transition-delay:.53s}
/* =====================================================================
   ANIMAZIONI. Partono solo con la scena in vista (.vivo). Lo stato
   senza animazione e' sempre il disegno finale: e' quello che vede chi
   ha chiesto il movimento ridotto.
   ===================================================================== */
/* ---------- HERO: la coppa si disegna, si riempie, una goccia cade ---------- */
#abm-cb .traccia{stroke-dasharray:1;stroke-dashoffset:0}
#abm-cb .vivo .traccia{animation:cb-disegna 1.4s var(--ease-out) var(--d,0s) both}
@keyframes cb-disegna{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
#abm-cb .vivo .nodo{animation:cb-compare .5s var(--ease-out) var(--d,0s) both}
@keyframes cb-compare{from{opacity:0}to{opacity:1}}
#abm-cb .vivo .alone{animation:cb-alone 6s ease-in-out infinite}
@keyframes cb-alone{0%,100%{opacity:.45}50%{opacity:.85}}
#abm-cb .vivo .livello{animation:cb-livello 1.6s var(--ease-out) 1.1s both}
@keyframes cb-livello{from{transform:translateY(64px)}to{transform:none}}
#abm-cb .onda{transform-origin:200px 104px}
#abm-cb .vivo .onda{animation:cb-onda 5s ease-in-out 2.7s infinite}
@keyframes cb-onda{0%,100%{transform:rotate(0)}30%{transform:rotate(1.6deg)}70%{transform:rotate(-1.6deg)}}
#abm-cb .bolla{opacity:0;transform-box:fill-box;transform-origin:center}
#abm-cb .vivo .bolla{animation:cb-bolla 2.6s var(--gravita) var(--d,3s) infinite}
@keyframes cb-bolla{0%{opacity:0;transform:translateY(0) scale(.7)}15%{opacity:.9}85%{opacity:.5}100%{opacity:0;transform:translateY(-48px) scale(1)}}
#abm-cb .riflesso{transform:translateX(-220px)}
#abm-cb .vivo .riflesso{animation:cb-riflesso 5.5s var(--ease-in-out) 2.9s infinite}
@keyframes cb-riflesso{0%{transform:translateX(-220px)}38%,100%{transform:translateX(260px)}}
#abm-cb .goccia-h{opacity:0;transform-box:fill-box;transform-origin:50% 100%}
#abm-cb .vivo .goccia-h{animation:cb-goccia-h 6s 3.4s infinite}
@keyframes cb-goccia-h{
  0%{opacity:0;transform:translateY(0) scale(.5);animation-timing-function:var(--ease-out)}
  9%{opacity:1;transform:translateY(0) scale(1);animation-timing-function:var(--gravita)}
  17%{opacity:1;transform:translateY(72px) scale(1)}
  17.5%,100%{opacity:0;transform:translateY(72px) scale(1)}
}
#abm-cb .cerchio{opacity:0;transform-box:fill-box;transform-origin:center}
#abm-cb .vivo .cerchio{animation:cb-cerchio 6s var(--ease-out) 3.4s infinite}
#abm-cb .vivo .cerchio.c2{animation-delay:3.65s}
@keyframes cb-cerchio{0%,17%{opacity:0;transform:scale(.3)}18%{opacity:.9;transform:scale(.35)}48%,100%{opacity:0;transform:scale(1.25)}}
#abm-cb .sc{transform-box:fill-box;transform-origin:center}
#abm-cb .vivo .sc{animation:cb-sc 3.2s ease-in-out var(--d,2.4s) infinite}
@keyframes cb-sc{0%,100%{opacity:0;transform:scale(.6) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
/* ---------- SHOCK TERMICO: due stati, si riproduce a ogni scelta (.gioca) ---------- */
#abm-cb .cubo-s,#abm-cb .ok,#abm-cb .orologio,#abm-cb .impatto,#abm-cb .scheggia{transform-box:fill-box;transform-origin:center}
#abm-cb .calore{opacity:.9}
#abm-cb .vapore,#abm-cb .filo-caldo{opacity:1}
#abm-cb .filo-caldo{stroke:var(--caldo);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
#abm-cb .crepa,#abm-cb .crepa-r{stroke-dasharray:1;stroke-dashoffset:0}
#abm-cb .ok,#abm-cb .orologio,#abm-cb .lampo,#abm-cb .impatto,#abm-cb .scheggia,#abm-cb .lucido-s{opacity:0}
#abm-cb [data-stato="dopo"] .calore,#abm-cb [data-stato="dopo"] .vapore,#abm-cb [data-stato="dopo"] .filo-caldo,#abm-cb [data-stato="dopo"] .crepa,#abm-cb [data-stato="dopo"] .crepa-r{opacity:0}
#abm-cb [data-stato="dopo"] .ok,#abm-cb [data-stato="dopo"] .orologio{opacity:1}
/* il calore pulsa, il vapore sale */
#abm-cb .vivo.gioca[data-stato="subito"] .calore{animation:cb-pulsa-caldo 1.8s ease-in-out infinite}
@keyframes cb-pulsa-caldo{0%,100%{opacity:.7}50%{opacity:1}}
#abm-cb .vivo.gioca .vapore path{animation:cb-sale 1.9s ease-out infinite}
#abm-cb .vivo.gioca .vapore path:nth-child(2){animation-delay:.5s}
#abm-cb .vivo.gioca .vapore path:nth-child(3){animation-delay:1s}
@keyframes cb-sale{0%{opacity:0;transform:translateY(8px)}30%{opacity:.9}100%{opacity:0;transform:translateY(-16px)}}
/* il ghiaccio cade, tocca il fondo, rimbalza poco e si ferma */
#abm-cb .vivo.gioca .cubo-s{animation:cb-cade .72s var(--d) both}
@keyframes cb-cade{
  0%{opacity:0;transform:translateY(-180px) rotate(var(--r));animation-timing-function:var(--gravita)}
  12%{opacity:1}
  62%{opacity:1;transform:translateY(0) rotate(0);animation-timing-function:var(--ease-out)}
  80%{transform:translateY(-7px) rotate(calc(var(--r) * -.1));animation-timing-function:ease-in-out}
  100%{opacity:1;transform:none}
}
#abm-cb .vivo.gioca[data-stato="subito"] .cubo-s{--d:.6s}
#abm-cb .vivo.gioca[data-stato="subito"] .cubo-s:nth-child(2){--d:.72s}
#abm-cb .vivo.gioca[data-stato="subito"] .cubo-s:nth-child(3){--d:.84s}
#abm-cb .vivo.gioca[data-stato="dopo"] .cubo-s{--d:2.1s}
#abm-cb .vivo.gioca[data-stato="dopo"] .cubo-s:nth-child(2){--d:2.22s}
#abm-cb .vivo.gioca[data-stato="dopo"] .cubo-s:nth-child(3){--d:2.34s}
#abm-cb .vivo.gioca .impatto{animation:cb-impatto .4s var(--ease-out) both}
#abm-cb .vivo.gioca[data-stato="subito"] .impatto{animation-delay:1.04s}
#abm-cb .vivo.gioca[data-stato="dopo"] .impatto{animation-delay:2.55s}
@keyframes cb-impatto{0%{opacity:0;transform:scale(.7)}25%{opacity:1}100%{opacity:0;transform:scale(1.25)}}
/* subito: il vetro va in tensione e si crepa a scatti */
#abm-cb .vivo.gioca[data-stato="subito"] .lampo{animation:cb-lampo .35s ease-out 1.12s both}
@keyframes cb-lampo{0%{opacity:0}30%{opacity:.95}100%{opacity:0}}
#abm-cb .vivo.gioca[data-stato="subito"] .bicchiere-s{animation:cb-scatti .9s 1.15s both}
@keyframes cb-scatti{
  0%,33%,66%{transform:none}
  4%{transform:translateX(-3px)}8%{transform:translateX(2.5px)}13%{transform:none}
  37%{transform:translateX(-2.5px)}41%{transform:translateX(2px)}46%{transform:none}
  70%{transform:translateX(-2px)}74%{transform:translateX(1.5px)}79%,100%{transform:none}
}
#abm-cb .vivo.gioca[data-stato="subito"] .crepa{animation:cb-crepa .9s 1.15s both}
@keyframes cb-crepa{
  0%{stroke-dashoffset:1;animation-timing-function:var(--ease-out)}
  5%,33%{stroke-dashoffset:.62;animation-timing-function:var(--ease-out)}
  38%,66%{stroke-dashoffset:.3;animation-timing-function:var(--ease-out)}
  71%,100%{stroke-dashoffset:0}
}
#abm-cb .vivo.gioca[data-stato="subito"] .crepa-r{animation:cb-disegna .35s var(--ease-out) 1.95s both}
#abm-cb .vivo.gioca[data-stato="subito"] .crepa-r.c2{animation-delay:2.1s}
#abm-cb .vivo.gioca[data-stato="subito"] .scheggia{animation:cb-scheggia 1s var(--gravita) 2.2s both}
@keyframes cb-scheggia{0%{opacity:0;transform:none}8%{opacity:1;transform:none}100%{opacity:0;transform:translate(18px,150px) rotate(170deg)}}
/* dopo: l'orologio gira, il calore se ne va, il vetro regge */
#abm-cb .vivo.gioca[data-stato="dopo"] .orologio{animation:cb-appare .35s var(--ease-out) both}
#abm-cb .vivo.gioca[data-stato="dopo"] .lancetta{animation:cb-gira 1.8s var(--ease-in-out) .2s both;transform-origin:330px 62px}
@keyframes cb-gira{from{transform:rotate(-720deg)}to{transform:rotate(0)}}
#abm-cb .vivo.gioca[data-stato="dopo"] .calore,#abm-cb .vivo.gioca[data-stato="dopo"] .vapore,#abm-cb .vivo.gioca[data-stato="dopo"] .filo-caldo{animation:cb-sfuma 1.8s ease-out .2s both}
@keyframes cb-sfuma{from{opacity:.9}to{opacity:0}}
#abm-cb .vivo.gioca[data-stato="dopo"] .lucido-s{animation:cb-lucido 1s var(--ease-in-out) 2.95s both}
@keyframes cb-lucido{0%{opacity:1;transform:translateX(-200px)}100%{opacity:1;transform:translateX(220px)}}
#abm-cb .vivo.gioca[data-stato="dopo"] .ok{animation:cb-pop .5s 3.1s both}
@keyframes cb-appare{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes cb-pop{
  0%{opacity:0;transform:scale(.85);animation-timing-function:var(--ease-out)}
  60%{opacity:1;transform:scale(1.08);animation-timing-function:ease-in-out}
  100%{opacity:1;transform:none}
}
/* ---------- URTI: tre colpi, poi la lente mostra il segno ---------- */
#abm-cb .cucchiaio{transform-origin:340px 30px;transform:rotate(-16deg)}
#abm-cb .vivo .cucchiaio{animation:cb-batte 5.4s infinite}
@keyframes cb-batte{
  0%{transform:rotate(-16deg);animation-timing-function:var(--ease-in-out)}
  10%{transform:rotate(-25deg);animation-timing-function:var(--gravita)}
  16%{transform:rotate(0);animation-timing-function:var(--ease-out)}
  19.5%{transform:rotate(-7deg);animation-timing-function:var(--gravita)}
  24%{transform:rotate(0);animation-timing-function:var(--ease-out)}
  27.5%{transform:rotate(-7deg);animation-timing-function:var(--gravita)}
  32%{transform:rotate(0);animation-timing-function:var(--ease-out)}
  42%,100%{transform:rotate(-16deg)}
}
#abm-cb .vivo .urtato{animation:cb-sobbalza 5.4s infinite}
@keyframes cb-sobbalza{
  0%,15.9%,23.9%,31.9%{transform:none}
  16.6%,24.6%{transform:translateX(-3px)}
  32.6%{transform:translateX(-4px)}
  19%,27%,36%,100%{transform:none}
}
#abm-cb .colpo{opacity:0;transform-box:fill-box;transform-origin:left center}
#abm-cb .vivo .colpo{animation:cb-colpo 5.4s ease-out infinite}
@keyframes cb-colpo{
  0%,15.8%{opacity:0;transform:scale(.7)}16%{opacity:1;transform:scale(1)}20%,23.8%{opacity:0;transform:scale(1.2)}
  24%{opacity:1;transform:scale(1)}28%,31.8%{opacity:0;transform:scale(1.2)}
  32%{opacity:1;transform:scale(1.05)}37%,100%{opacity:0;transform:scale(1.25)}
}
#abm-cb .graffio{opacity:.45}
#abm-cb .vivo .graffio{animation:cb-graffio 5.4s infinite}
@keyframes cb-graffio{0%,32%{opacity:0}34%,92%{opacity:.45}100%{opacity:0}}
#abm-cb .vivo .lente{animation:cb-lente 5.4s ease-out infinite}
@keyframes cb-lente{0%,40%{opacity:0}46%,92%{opacity:1}100%{opacity:0}}
#abm-cb .vetrino{transform-box:fill-box;transform-origin:center}
#abm-cb .vivo .vetrino{animation:cb-vetrino 5.4s infinite}
@keyframes cb-vetrino{0%,40%{transform:scale(.85);animation-timing-function:var(--ease-out)}50%,100%{transform:none}}
#abm-cb .graf{stroke-dasharray:1;stroke-dashoffset:0}
#abm-cb .vivo .graf{animation:cb-graf 5.4s infinite}
#abm-cb .vivo .graf:nth-child(3){animation-delay:.18s}
#abm-cb .vivo .graf:nth-child(4){animation-delay:.36s}
#abm-cb .vivo .graf:nth-child(5){animation-delay:.54s}
@keyframes cb-graf{0%,49%{stroke-dashoffset:1;animation-timing-function:var(--ease-out)}56%,100%{stroke-dashoffset:0}}
/* ---------- 01 PREPARAZIONE: la paletta entra, versa, i cubetti si posano ---------- */
#abm-cb .paletta{transform-origin:300px 70px;transform:rotate(-37deg)}
#abm-cb .vivo .paletta-in{animation:cb-paletta-in 5.6s infinite}
@keyframes cb-paletta-in{
  0%{opacity:0;transform:translateX(70px);animation-timing-function:var(--ease-out)}
  12%{opacity:1;transform:none}
  68%{opacity:1;transform:none;animation-timing-function:var(--ease-in-out)}
  80%,100%{opacity:0;transform:translateX(70px)}
}
#abm-cb .vivo .paletta{animation:cb-versa 5.6s infinite}
@keyframes cb-versa{
  0%,13%{transform:rotate(0);animation-timing-function:var(--ease-in-out)}
  18%{transform:rotate(6deg);animation-timing-function:var(--ease-in-out)}
  30%{transform:rotate(-40deg);animation-timing-function:var(--ease-out)}
  34%,56%{transform:rotate(-37deg);animation-timing-function:var(--ease-in-out)}
  67%,100%{transform:rotate(0)}
}
#abm-cb .cubo{transform-box:fill-box;transform-origin:center}
#abm-cb .vivo .cubo{animation:cb-posa 5.6s var(--d,0s) infinite}
@keyframes cb-posa{
  0%,31%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r))}
  32%{opacity:1;transform:translate(var(--dx),var(--dy)) rotate(var(--r));animation-timing-function:var(--gravita)}
  43%{transform:translate(0,0) rotate(0);animation-timing-function:var(--ease-out)}
  47%{transform:translate(0,-5px) rotate(calc(var(--r) * -.08));animation-timing-function:ease-in-out}
  51%{transform:none}
  88%{opacity:1;transform:none}
  96%,100%{opacity:0;transform:none}
}
/* ---------- 02 SERVIZIO: la bottiglia si inclina, versa senza toccare il bordo ---------- */
#abm-cb .bottiglia{transform-origin:0 0;transform:rotate(-118deg)}
#abm-cb .vivo .bottiglia{animation:cb-bottiglia 6s infinite}
@keyframes cb-bottiglia{
  0%,8%{transform:rotate(-60deg);animation-timing-function:var(--ease-in-out)}
  22%{transform:rotate(-121deg);animation-timing-function:var(--ease-out)}
  26%,60%{transform:rotate(-118deg);animation-timing-function:var(--ease-out)}
  64%{transform:rotate(-110deg);animation-timing-function:var(--ease-in-out)}
  80%,100%{transform:rotate(-60deg)}
}
#abm-cb .getto{transform-box:fill-box;transform-origin:top right}
#abm-cb .vivo .getto{animation:cb-getto 6s infinite}
@keyframes cb-getto{
  0%,22.9%{opacity:0;transform:scaleY(0)}
  23%{opacity:1;transform:scaleY(0);animation-timing-function:var(--ease-out)}
  28%{opacity:1;transform:scaleY(1)}
  60%{opacity:1;transform:none;animation-timing-function:var(--gravita)}
  65%,100%{opacity:0;transform:translateY(22px) scaleY(.5)}
}
#abm-cb .flusso{stroke-dasharray:5 9}
#abm-cb .vivo .flusso{animation:cb-flusso .45s linear infinite}
@keyframes cb-flusso{from{stroke-dashoffset:0}to{stroke-dashoffset:-14}}
#abm-cb .riempi{transform-box:fill-box;transform-origin:bottom}
#abm-cb .vivo .riempi{animation:cb-riempi 6s infinite}
@keyframes cb-riempi{
  0%,26%{opacity:1;transform:scaleY(0);animation-timing-function:var(--ease-out)}
  62%,90%{opacity:1;transform:none}
  100%{opacity:0;transform:none}
}
#abm-cb .bolle-f{opacity:1}
#abm-cb .vivo .bolle-f{animation:cb-bolle-f 6s infinite}
@keyframes cb-bolle-f{0%,30%{opacity:0}40%,88%{opacity:1}96%,100%{opacity:0}}
#abm-cb .vivo .bolla-f{animation:cb-bolla-f 1.5s var(--gravita) var(--d,0s) infinite}
@keyframes cb-bolla-f{0%{opacity:0;transform:translateY(0)}20%{opacity:.9}100%{opacity:0;transform:translateY(-74px)}}
#abm-cb .spazio{opacity:1}
#abm-cb .vivo .spazio{animation:cb-segnala 6s ease-in-out infinite}
@keyframes cb-segnala{0%,26%{opacity:.2}34%,60%{opacity:1}72%,100%{opacity:.2}}
/* vassoio: a contatto si toccano a ogni passo, distanziati restano fermi */
#abm-cb .passo{transform-box:view-box;transform-origin:320px 186px}
#abm-cb .vivo .passo{animation:cb-passo 1.1s ease-in-out infinite}
@keyframes cb-passo{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
#abm-cb .vivo[data-stato="grappolo"] .passo{animation:cb-passo-storto 1.1s ease-in-out infinite}
@keyframes cb-passo-storto{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(2px) rotate(1.4deg)}50%{transform:translateY(3px) rotate(0)}75%{transform:translateY(2px) rotate(-1.4deg)}}
#abm-cb .posto{transition:transform .75s var(--ease-out)}
#abm-cb .posto.p1{transform:translateX(-56px)}
#abm-cb .posto.p3{transform:translateX(56px)}
#abm-cb [data-stato="distanziati"] .posto.p1{transform:translateX(-150px)}
#abm-cb [data-stato="distanziati"] .posto.p3{transform:translateX(150px)}
#abm-cb .tin{transform-box:fill-box;transform-origin:50% 100%}
#abm-cb .vivo[data-stato="grappolo"] .tin{animation:cb-tin 1.1s ease-in-out infinite}
#abm-cb .vivo[data-stato="grappolo"] .p2 .tin{animation-delay:-.55s}
@keyframes cb-tin{0%,100%{transform:rotate(0)}25%{transform:rotate(2.6deg)}75%{transform:rotate(-2.6deg)}}
#abm-cb .scintilla{opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .2s ease}
#abm-cb .vivo[data-stato="grappolo"] .scintilla{animation:cb-scintilla 1.1s ease-out infinite}
#abm-cb .vivo[data-stato="grappolo"] .scintilla.s2{animation-delay:-.55s}
@keyframes cb-scintilla{0%,18%{opacity:0;transform:scale(.6)}25%{opacity:1;transform:scale(1)}45%,100%{opacity:0;transform:scale(1.2)}}
#abm-cb .ok-v{opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .3s ease}
#abm-cb [data-stato="distanziati"] .ok-v{opacity:1}
#abm-cb .vivo[data-stato="distanziati"] .ok-v{animation:cb-pop .5s .45s both}
/* ---------- 03 LAVAGGIO: getti, temperatura giusta, vapore e gocce ---------- */
#abm-cb .getti{opacity:0}
#abm-cb .vivo .getti{animation:cb-getti 8s ease-out infinite}
@keyframes cb-getti{0%,4%{opacity:0}9%,50%{opacity:.85}56%,100%{opacity:0}}
#abm-cb .zampillo{stroke-dasharray:3 7}
#abm-cb .vivo .zampillo{animation:cb-zampillo .45s linear infinite}
@keyframes cb-zampillo{from{stroke-dashoffset:0}to{stroke-dashoffset:20}}
#abm-cb .vapore3{opacity:0}
#abm-cb .vivo .vapore3{animation:cb-vapore3 8s ease-out infinite}
@keyframes cb-vapore3{0%,52%{opacity:0}62%,84%{opacity:.85}96%,100%{opacity:0}}
#abm-cb .vivo .vapore3 path{animation:cb-sale 1.9s ease-out infinite}
#abm-cb .vivo .vapore3 path:nth-child(2){animation-delay:.6s}
#abm-cb .vivo .vapore3 path:nth-child(3){animation-delay:1.2s}
#abm-cb .gocce{opacity:.8}
#abm-cb .vivo .gocce{animation:cb-vapore3 8s ease-out infinite}
#abm-cb .goccia{transform-box:fill-box}
#abm-cb .vivo .goccia{animation:cb-goccia 1.4s var(--gravita) var(--d,0s) infinite}
@keyframes cb-goccia{0%{opacity:0;transform:translateY(-4px) scaleY(.7)}15%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:translateY(40px) scaleY(1.2)}}
#abm-cb .mercurio{transform-box:fill-box;transform-origin:bottom}
#abm-cb .vivo .mercurio{animation:cb-mercurio 8s infinite}
@keyframes cb-mercurio{
  0%,8%{transform:scaleY(.22);animation-timing-function:var(--ease-in-out)}
  34%{transform:scaleY(1.08);animation-timing-function:var(--ease-out)}
  42%,88%{transform:none;animation-timing-function:var(--ease-in-out)}
  100%{transform:scaleY(.22)}
}
#abm-cb .spunta{transform-box:fill-box;transform-origin:center}
#abm-cb .vivo .spunta{animation:cb-spunta 8s infinite}
@keyframes cb-spunta{
  0%,43%{opacity:0;transform:scale(.85);animation-timing-function:var(--ease-out)}
  47%{opacity:1;transform:scale(1.08);animation-timing-function:ease-in-out}
  51%,88%{opacity:1;transform:none}
  95%,100%{opacity:0;transform:none}
}
/* ---------- 04 RAFFREDDAMENTO: il cursore guida, poi il panno lucida ---------- */
#abm-cb #raffredda{--v:0}
#abm-cb .caldo-b{opacity:calc(1 - var(--v));transition:opacity .25s ease}
#abm-cb .vapore2{opacity:calc(1 - var(--v));transition:opacity .25s ease}
#abm-cb .vivo .vapore2 path{animation:cb-sale 1.9s ease-out infinite}
#abm-cb .vivo .vapore2 path:nth-child(2){animation-delay:.6s}
#abm-cb .vivo .vapore2 path:nth-child(3){animation-delay:1.2s}
#abm-cb .filo-caldo-b{stroke:var(--caldo);stroke-width:2.4;fill:none;stroke-linecap:round;opacity:calc(.8 * (1 - var(--v)));transition:opacity .25s ease}
#abm-cb .colonna{transform-box:fill-box;transform-origin:bottom;transform:scaleY(calc(.3 + .7 * (1 - var(--v))));transition:transform .3s var(--ease-out)}
#abm-cb .rosso{opacity:calc(1 - var(--v));transition:opacity .25s ease}
#abm-cb .panno,#abm-cb .brillo,#abm-cb .ok-b,#abm-cb .lucido-b{opacity:0}
#abm-cb .brillo,#abm-cb .ok-b{transform-box:fill-box;transform-origin:center}
#abm-cb .freddo .ok-b{opacity:1}
#abm-cb .vivo.freddo .ok-b{animation:cb-pop .5s both}
#abm-cb .vivo.freddo .panno{animation:cb-panno 4.4s .3s infinite}
@keyframes cb-panno{
  0%{opacity:0;transform:translate(110px,-6px);animation-timing-function:var(--ease-out)}
  10%{opacity:1;transform:translate(40px,0);animation-timing-function:var(--ease-in-out)}
  26%{transform:translate(-34px,8px);animation-timing-function:var(--ease-in-out)}
  42%{transform:translate(26px,-2px);animation-timing-function:var(--ease-in-out)}
  58%{transform:translate(-22px,10px);animation-timing-function:var(--ease-in-out)}
  72%{opacity:1;transform:translate(8px,2px);animation-timing-function:var(--ease-in-out)}
  84%,100%{opacity:0;transform:translate(110px,-6px)}
}
#abm-cb .vivo.freddo .lucido-b{animation:cb-lucido-b 4.4s .3s infinite}
@keyframes cb-lucido-b{0%,78%{opacity:0;transform:translateX(-150px)}79%{opacity:1;transform:translateX(-150px);animation-timing-function:var(--ease-in-out)}96%{opacity:1;transform:translateX(160px)}97%,100%{opacity:0;transform:translateX(160px)}}
#abm-cb .vivo.freddo .brillo{animation:cb-sc 4.4s ease-in-out 3.9s infinite}
/* ---------- 05 STOCCAGGIO: i calici arrivano sulla rastrelliera e si fermano distanti ---------- */
#abm-cb .appeso{transform-box:view-box}
#abm-cb .a1{transform-origin:130px 52px}
#abm-cb .a2{transform-origin:200px 52px}
#abm-cb .a3{transform-origin:270px 52px}
#abm-cb .vivo .binario{animation:cb-scorre 1.3s var(--ease-out) var(--d) both}
#abm-cb .vivo .binario.b3{--d:.1s;--da:-340px}
#abm-cb .vivo .binario.b2{--d:.55s;--da:-270px}
#abm-cb .vivo .binario.b1{--d:1s;--da:-200px}
@keyframes cb-scorre{from{opacity:0;transform:translateX(var(--da))}35%{opacity:1}to{opacity:1;transform:none}}
#abm-cb .vivo .a3{animation:cb-smorza 2.4s ease-in-out .95s,cb-quiete 6s ease-in-out 3.35s infinite}
#abm-cb .vivo .a2{animation:cb-smorza 2.4s ease-in-out 1.4s,cb-quiete 6s ease-in-out 3.8s infinite}
#abm-cb .vivo .a1{animation:cb-smorza 2.4s ease-in-out 1.85s,cb-quiete 6s ease-in-out 4.25s infinite}
@keyframes cb-smorza{0%{transform:rotate(0)}18%{transform:rotate(-4deg)}40%{transform:rotate(2.6deg)}60%{transform:rotate(-1.5deg)}80%{transform:rotate(.6deg)}100%{transform:rotate(0)}}
@keyframes cb-quiete{0%,100%{transform:rotate(0)}50%{transform:rotate(.8deg)}}
#abm-cb .vivo .spazio-s{animation:cb-compare .6s var(--ease-out) 3.2s both}
#abm-cb .cala{transform-box:view-box}
#abm-cb .vivo .cala{animation:cb-cala 1.1s 3.4s both}
@keyframes cb-cala{
  0%{opacity:0;transform:translateY(-34px);animation-timing-function:var(--ease-out)}
  25%{opacity:1}
  78%{opacity:1;transform:translateY(2px);animation-timing-function:ease-in-out}
  100%{opacity:1;transform:none}
}
/* ---------- movimento ridotto: niente movimento, si vede il disegno finale ---------- */
@media (prefers-reduced-motion: reduce){
#abm-cb .scena *,#abm-cb .scena *::before,#abm-cb .scena *::after,#abm-cb .trascina span{animation:none!important;transition:none!important}
#abm-cb .entra,#abm-cb .entra ul.gesti li{opacity:1;transform:none;transition:none}
#abm-cb .riflesso,#abm-cb .lucido-s,#abm-cb .lucido-b{opacity:0}
#abm-cb .colpo{opacity:1}
#abm-cb .getto{opacity:1}
#abm-cb .getti{opacity:.6}
#abm-cb .freddo .panno{opacity:1;transform:translate(8px,2px)}
#abm-cb .freddo .brillo{opacity:1}
}
/* --- domande frequenti --- */
#abm-cb .domande{max-width:780px}
#abm-cb .domande details{border-top:1px solid var(--riga)}
#abm-cb .domande details:last-of-type{border-bottom:1px solid var(--riga)}
#abm-cb .domande summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px;padding:16px 0}
#abm-cb .domande summary::-webkit-details-marker{display:none}
#abm-cb .domande summary h3{margin:0;font-size:1.1rem;line-height:1.35}
#abm-cb .domande summary::after{content:"";flex:none;width:10px;height:10px;margin-right:4px;border-right:2px solid var(--oro);border-bottom:2px solid var(--oro);transform:rotate(45deg);transition:transform .2s var(--ease-out)}
#abm-cb .domande details[open] summary::after{transform:rotate(-135deg)}
#abm-cb .domande summary:focus-visible{outline:2px solid var(--oro);outline-offset:4px;border-radius:6px}
#abm-cb .domande details p{margin:0 0 18px}
@media (prefers-reduced-motion: reduce){
#abm-cb .domande summary::after{transition:none}
}