/* ============================================================
   VALCHIRIA System — ANIMAZIONI DI SISTEMA per il sito marketing
   Mockup animati dell'interfaccia VERA (niente foto): planning che
   si riempie, vasca con corsie, QR che ruota, chat che scrive,
   scontrino di vendita. Solo CSS, zero dipendenze; il blocco
   prefers-reduced-motion di sito.css disattiva tutto in automatico.
   ============================================================ */

/* ── Tile base (sostituisce le foto .shot) ── */
.sa{position:relative;border-radius:var(--r);overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);aspect-ratio:4/3;display:flex;flex-direction:column}
.sa .sa-cap{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:1.3rem .9rem .7rem;color:#fff;font-weight:700;font-size:.88rem;background:linear-gradient(transparent,rgba(20,24,31,.78))}
.sa-pad{padding:.9rem .9rem 2.4rem;flex:1;display:flex;flex-direction:column;gap:.5rem;min-height:0}

/* barra finta finestra (coerente col panel della home) */
.sa-bar{display:flex;align-items:center;gap:.35rem;padding:.5rem .8rem;background:var(--cream);border-bottom:1px solid var(--line-2);flex-shrink:0}
.sa-bar i{width:.5rem;height:.5rem;border-radius:50%;display:inline-block}
.sa-bar span{margin-left:.4rem;font-size:.56rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

/* ════════ 1. PLANNING — card lezione che entrano + barre capienza che si riempiono ════════ */
.sa-plan .sa-chips{display:flex;gap:.4rem;flex-shrink:0}
.sa-chip-sala{display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .7rem;border-radius:100px;background:linear-gradient(140deg,#151a24,#243044 60%,#1a2130);color:#fff;font-size:.6rem;font-weight:800;border:1px solid rgba(243,179,35,.35)}
.sa-chip-sala .d{width:.32rem;height:.32rem;border-radius:50%;background:#38bdf8}
.sa-les{background:#fff;border:1px solid var(--line);border-radius:.6rem;padding:.45rem .55rem .5rem .7rem;position:relative;overflow:hidden;opacity:0;animation:saRow 9s ease infinite}
.sa-les::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sa-c,#f3b323)}
.sa-les .nm{font-size:.68rem;font-weight:800;color:var(--ink);display:flex;justify-content:space-between;gap:.4rem}
.sa-les .nm small{font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums}
.sa-les .capb{height:4px;border-radius:4px;background:#eceef1;margin-top:.35rem;overflow:hidden}
.sa-les .capb i{display:block;height:100%;border-radius:4px;background:var(--sa-b,#10b981);width:0;animation:saFill 9s ease infinite;animation-delay:inherit}
.sa-les:nth-child(2){animation-delay:.5s}
.sa-les:nth-child(3){animation-delay:1s}
.sa-les:nth-child(4){animation-delay:1.5s}
@keyframes saRow{0%{opacity:0;transform:translateY(10px)}6%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(10px)}}
@keyframes saFill{0%,8%{width:0}22%,88%{width:var(--sa-w,70%)}96%,100%{width:0}}
/* riga "adesso" che scorre sul planning */
.sa-plan .sa-now{position:absolute;left:8%;right:4%;height:2px;background:var(--gold);box-shadow:0 0 8px rgba(243,179,35,.8);z-index:4;animation:saNow 9s linear infinite}
.sa-plan .sa-now::before{content:"";position:absolute;left:-5px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--gold)}
@keyframes saNow{0%{top:34%}50%{top:74%}100%{top:34%}}

/* ════════ 2. SCUOLA NUOTO — vasca con corsie e nuotatori in movimento ════════ */
.sa-pool .sa-water{flex:1;border-radius:.7rem;background:linear-gradient(180deg,#7dd3fc,#38bdf8 55%,#0ea5e9);position:relative;overflow:hidden;min-height:0}
.sa-pool .lane{position:absolute;left:0;right:0;height:0;border-top:2px dashed rgba(255,255,255,.55)}
.sa-pool .lane.l1{top:33%}.sa-pool .lane.l2{top:66%}
.sa-swim{position:absolute;width:1rem;height:1rem;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(2,60,100,.4);animation:saSwim 6s ease-in-out infinite}
.sa-swim::after{content:"";position:absolute;right:100%;top:50%;width:1.1rem;height:2px;transform:translateY(-50%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.85));border-radius:2px}
.sa-swim.s1{top:12%;animation-delay:0s}
.sa-swim.s2{top:45%;animation-delay:1.2s;background:var(--gold)}
.sa-swim.s3{top:78%;animation-delay:2.4s}
@keyframes saSwim{0%{left:4%}50%{left:calc(96% - 1rem)}50.01%{transform:scaleX(-1)}100%{left:4%;transform:scaleX(-1)}}
.sa-pool .sa-caps{display:flex;gap:.35rem;flex-wrap:wrap;flex-shrink:0}
.sa-cappill{font-size:.58rem;font-weight:800;padding:.2rem .55rem;border-radius:100px;border:1px solid var(--line);background:#fff;color:var(--ink);font-variant-numeric:tabular-nums}
.sa-cappill.full{color:#e11d48;border-color:rgba(225,29,72,.35);background:rgba(225,29,72,.06);animation:saBlink 2.4s ease infinite}
@keyframes saBlink{0%,100%{opacity:1}50%{opacity:.55}}

/* ════════ 3. TESSERA QR — codice che ruota, si rigenera, monouso ════════ */
.sa-qr .sa-qrwrap{flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
.sa-qrbox{width:44%;aspect-ratio:1;position:relative;display:flex;align-items:center;justify-content:center}
.sa-qrbox .ring{position:absolute;inset:-9%;border-radius:22%;background:conic-gradient(var(--gold),transparent 62%,var(--gold));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0);animation:saSpin 3.5s linear infinite}
.sa-qrbox .code{width:100%;height:100%;border-radius:14%;background:
  conic-gradient(var(--ink) 25%,transparent 0 50%,var(--ink) 0 75%,transparent 0) 0 0/26% 26%,
  #fff;border:1px solid var(--line);position:relative;overflow:hidden;animation:saRegen 8s steps(1) infinite}
.sa-qrbox .code::before{content:"";position:absolute;inset:12%;background:conic-gradient(transparent 25%,var(--ink) 0 50%,transparent 0 75%,var(--ink) 0) 0 0/34% 34%;opacity:.85}
.sa-qrbox .code::after{content:"";position:absolute;left:0;right:0;top:0;height:18%;background:linear-gradient(180deg,rgba(243,179,35,.45),transparent);animation:saSweepY 2.2s ease-in-out infinite}
@keyframes saSpin{to{transform:rotate(360deg)}}
@keyframes saRegen{0%,48%{background-position:0 0,0 0}50%,98%{background-position:13% 13%,0 0}100%{background-position:0 0,0 0}}
@keyframes saSweepY{0%{transform:translateY(-100%)}55%{transform:translateY(560%)}100%{transform:translateY(-100%)}}
.sa-qr .sa-mono{display:flex;align-items:center;justify-content:center;gap:.4rem;font-size:.64rem;font-weight:800;color:var(--green);flex-shrink:0}
.sa-qr .sa-mono .d{width:.42rem;height:.42rem;border-radius:50%;background:var(--green);animation:saBlink 1.4s ease infinite}

/* ════════ 4. CHAT — bolle che compaiono + AI che scrive ════════ */
.sa-chat .sa-msgs{flex:1;display:flex;flex-direction:column;gap:.45rem;justify-content:flex-end;min-height:0}
.sa-msg{max-width:82%;padding:.5rem .7rem;border-radius:.85rem;font-size:.68rem;line-height:1.45;opacity:0;animation:saMsg 10s ease infinite}
.sa-msg.in{align-self:flex-start;background:#fff;border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:.25rem}
.sa-msg.out{align-self:flex-end;background:#dcf8c6;color:#14301c;border-bottom-right-radius:.25rem}
.sa-msg.m1{animation-delay:.2s}
.sa-msg.m2{animation-delay:1.6s}
.sa-msg.m3{animation-delay:3.6s}
@keyframes saMsg{0%{opacity:0;transform:translateY(8px)}5%,90%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateY(8px)}}
.sa-typing{align-self:flex-start;display:inline-flex;gap:.22rem;background:#fff;border:1px solid var(--line);border-radius:.85rem;border-bottom-left-radius:.25rem;padding:.5rem .65rem;opacity:0;animation:saTypeWrap 10s ease infinite;animation-delay:2.2s}
.sa-typing i{width:.32rem;height:.32rem;border-radius:50%;background:var(--ink-3);animation:saDot 1s ease infinite}
.sa-typing i:nth-child(2){animation-delay:.15s}
.sa-typing i:nth-child(3){animation-delay:.3s}
@keyframes saTypeWrap{0%,21%{opacity:0}23%,33%{opacity:1}35%,100%{opacity:0}}
@keyframes saDot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-3px);opacity:1}}

/* ════════ 5. VENDITA — scontrino che si compone + conferma ════════ */
.sa-sell .sa-rows{flex:1;display:flex;flex-direction:column;gap:.4rem;justify-content:center;min-height:0}
.sa-rowline{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid var(--line);border-radius:.55rem;padding:.45rem .65rem;font-size:.66rem;font-weight:700;color:var(--ink);opacity:0;animation:saRow 9s ease infinite}
.sa-rowline small{color:var(--ink-3);font-weight:600}
.sa-rowline b{color:var(--gold-ink);font-variant-numeric:tabular-nums}
.sa-rowline:nth-child(2){animation-delay:.5s}
.sa-rowline:nth-child(3){animation-delay:1s}
.sa-ok{align-self:center;display:inline-flex;align-items:center;gap:.4rem;background:rgba(31,157,85,.1);border:1px solid rgba(31,157,85,.3);color:var(--green);font-size:.66rem;font-weight:800;border-radius:100px;padding:.3rem .8rem;opacity:0;animation:saOk 9s ease infinite;flex-shrink:0}
@keyframes saOk{0%,18%{opacity:0;transform:scale(.85)}24%,88%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.85)}}

/* ════════ 6. VARCO — scan del QR + semaforo verde ════════ */
.sa-scan .sa-gate{flex:1;display:flex;align-items:center;justify-content:center;gap:1rem;min-height:0}
.sa-scan .miniqr{width:3.6rem;height:3.6rem;border-radius:.6rem;background:conic-gradient(var(--ink) 25%,transparent 0 50%,var(--ink) 0 75%,transparent 0) 0 0/30% 30%,#fff;border:1px solid var(--line);position:relative;overflow:hidden}
.sa-scan .miniqr::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--gold);box-shadow:0 0 10px rgba(243,179,35,.9);animation:saLaser 3s ease-in-out infinite}
@keyframes saLaser{0%,100%{top:6%}50%{top:88%}}
.sa-scan .sema{width:2.6rem;height:2.6rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(31,157,85,.12);color:var(--green);font-weight:800;animation:saSema 3s ease infinite}
.sa-scan .sema .i{width:1.3rem;height:1.3rem}
@keyframes saSema{0%,45%{transform:scale(.9);opacity:.35}55%,85%{transform:scale(1.08);opacity:1}100%{transform:scale(.9);opacity:.35}}
.sa-scan .sa-who{font-size:.66rem;font-weight:700;color:var(--ink-2);text-align:center;flex-shrink:0}
.sa-scan .sa-who b{color:var(--green)}

/* ════════ Extra riusabili ════════ */
/* fluttuazione dolce (telefono, pannelli) */
.sa-float{animation:saFloat 6s ease-in-out infinite}
@keyframes saFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
/* riflesso che attraversa una card (carta socio) */
.sa-shine{position:relative;overflow:hidden}
.sa-shine::before{content:"";position:absolute;top:-60%;bottom:-60%;width:38%;left:-60%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.34),transparent);transform:rotate(18deg);animation:saShine 4.5s ease-in-out infinite;z-index:2;pointer-events:none}
@keyframes saShine{0%,55%{left:-60%}85%,100%{left:130%}}
/* pop-in ripetuto per piccoli elementi (chips, celle griglia) */
.sa-pop{animation:saPop 7s ease infinite}
.sa-pop.p2{animation-delay:.35s}.sa-pop.p3{animation-delay:.7s}.sa-pop.p4{animation-delay:1.05s}.sa-pop.p5{animation-delay:1.4s}.sa-pop.p6{animation-delay:1.75s}
@keyframes saPop{0%{opacity:0;transform:scale(.92)}5%,90%{opacity:1;transform:scale(1)}97%,100%{opacity:0;transform:scale(.92)}}
/* pallino notifica */
.sa-ping{position:relative}
.sa-ping::after{content:"";position:absolute;top:-.2rem;right:-.2rem;width:.55rem;height:.55rem;border-radius:50%;background:#e11d48;box-shadow:0 0 0 0 rgba(225,29,72,.5);animation:saPing 1.8s ease-out infinite}
@keyframes saPing{0%{box-shadow:0 0 0 0 rgba(225,29,72,.5)}70%{box-shadow:0 0 0 .55rem rgba(225,29,72,0)}100%{box-shadow:0 0 0 0 rgba(225,29,72,0)}}

/* ── SPOTLIGHT: sezioni testo + dimostrazione affiancate ─────────────────────── */
.spotlight{display:grid;grid-template-columns:1fr 1fr;gap:2.6rem;align-items:center}
.sl-rev .sl-txt{order:2}
.sl-rev .sl-vis{order:1}
.sl-txt .h2{margin:.5rem 0 .9rem}
.sl-list{margin:1.3rem 0 1.6rem;display:grid;gap:.7rem}
.sl-list li{font-size:.92rem;line-height:1.55;align-items:flex-start}
.sl-list li .i{flex-shrink:0;margin-top:.2rem}
.sl-vis .sa{aspect-ratio:4/3.1}
@media(max-width:900px){
  .spotlight{grid-template-columns:1fr;gap:1.8rem}
  .sl-rev .sl-txt,.sl-rev .sl-vis{order:initial}
}

/* ── IMPORT DA FOTO: il foglio viene scansionato, a destra escono le righe ───── */
.sa-ocr .ocr-wrap{display:grid;grid-template-columns:1fr auto 1.15fr;gap:.5rem;align-items:center;flex:1;min-height:0}
.ocr-sheet{position:relative;background:#fbfaf7;border:1px solid var(--line);border-radius:.5rem;padding:.7rem .6rem;height:100%;display:flex;flex-direction:column;justify-content:space-evenly;overflow:hidden;transform:rotate(-1.4deg);box-shadow:0 6px 16px rgba(20,24,31,.09)}
.ocr-h{font-size:.5rem;font-weight:800;letter-spacing:.09em;color:var(--ink-3);margin-bottom:.1rem}
/* le "righe" del foglio: irregolari, per suggerire una foto e non un file pulito */
.ocr-l{height:.3rem;border-radius:3px;background:linear-gradient(90deg,#d8d4cc,#c9c4ba);opacity:.85}
.ocr-l.w1{width:92%}.ocr-l.w2{width:74%}.ocr-l.w3{width:84%}
.ocr-scan{position:absolute;left:0;right:0;height:34%;background:linear-gradient(180deg,rgba(243,179,35,0),rgba(243,179,35,.28),rgba(243,179,35,0));border-top:1px solid rgba(243,179,35,.9);border-bottom:1px solid rgba(243,179,35,.9);animation:ocrScan 7s ease-in-out infinite}
@keyframes ocrScan{0%{top:-34%}30%,100%{top:100%}}
.ocr-arrow{display:flex;align-items:center;justify-content:center;color:var(--gold-d)}
.ocr-arrow .i{width:1.15rem;height:1.15rem;animation:ocrSpark 7s ease-in-out infinite}
@keyframes ocrSpark{0%,18%{opacity:.3;transform:scale(.85)}28%,45%{opacity:1;transform:scale(1.2)}70%,100%{opacity:.3;transform:scale(.85)}}
.ocr-out{display:flex;flex-direction:column;gap:.3rem;height:100%;justify-content:center}
.ocr-row{background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:.4rem;padding:.28rem .45rem;display:flex;flex-direction:column;opacity:0;transform:translateX(.5rem);animation:ocrIn 7s ease infinite}
.ocr-row b{font-size:.62rem;font-weight:800;color:var(--ink);line-height:1.2}
.ocr-row small{font-size:.52rem;font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums}
.ocr-row.r1{animation-delay:.15s}.ocr-row.r2{animation-delay:.3s}.ocr-row.r3{animation-delay:.45s}.ocr-row.r4{animation-delay:.6s}
@keyframes ocrIn{0%,30%{opacity:0;transform:translateX(.5rem)}38%,94%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(.5rem)}}

/* ── AUTOMAZIONI WHATSAPP: evento → template, poi il cervello AI ─────────────── */
.sa-auto .sa-pad{justify-content:center}
.sa-auto .au-row{display:grid;grid-template-columns:1fr auto 1fr;gap:.35rem;align-items:center;background:#fff;border:1px solid var(--line);border-radius:.5rem;padding:.42rem .5rem;opacity:0;animation:auRow 8s ease infinite}
.sa-auto .au-row.a1{animation-delay:.15s}
.sa-auto .au-row.a2{animation-delay:.4s}
.sa-auto .au-row.a3{animation-delay:.65s}
@keyframes auRow{0%,3%{opacity:0;transform:translateY(.35rem)}9%,93%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(.35rem)}}
.au-ev{font-size:.6rem;font-weight:800;color:var(--ink);line-height:1.15}
.au-tpl{font-size:.55rem;font-weight:700;color:#128c7e;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all;line-height:1.15}
.au-go{display:flex;align-items:center;justify-content:center;width:1.35rem;height:1.35rem;border-radius:50%;background:#e7f7f1;color:#128c7e;flex-shrink:0}
.au-go .i{width:.72rem;height:.72rem}
.sa-auto .au-brain{margin-top:.4rem;display:flex;align-items:center;gap:.45rem;padding:.5rem .6rem;border-radius:.5rem;background:linear-gradient(140deg,#151a24,#243044 60%,#1a2130);border:1px solid rgba(243,179,35,.35);color:#fff;opacity:0;animation:auRow 8s ease infinite;animation-delay:.95s}
.sa-auto .au-brain .i{width:.9rem;height:.9rem;color:var(--gold);flex-shrink:0}
.sa-auto .au-brain span{font-size:.58rem;font-weight:800}

/* Chi ha chiesto meno animazioni non deve vedere niente muoversi. */
@media (prefers-reduced-motion:reduce){
  .ocr-scan,.ocr-arrow .i,.ocr-row,.sa-auto .au-row,.sa-auto .au-brain{animation:none!important;opacity:1!important;transform:none!important}
  .ocr-scan{display:none}
}