/* ==========================================================================
   STORYBOARD ANIMATO — lo stesso percorso del tutorial, raccontato come un
   video: telefono stilizzato (nessuna schermata reale, solo CSS/SVG) su un
   palco scuro, con timeline a capitoli, play/pausa e avanzamento automatico.
   File isolato: se la variante non convince, si tolgono i due <link>/<script>
   e la <section id="storyboard"> e non resta nulla in giro.
   ========================================================================== */

.sb{
  --sb-ink:#eaf3ee;
  --sb-mute:#9fb8ac;
  --sb-line:rgba(234,243,238,.14);
  --sb-deep:#07211b;
  --sb-green:#5eb069;
  --sb-green-lit:#8fe0a4;
  padding:88px 0;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.sb .section-head{max-width:var(--wrap);margin:0 auto 34px;padding:0 var(--gut)}
.sb-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

/* ---- il palco ------------------------------------------------------- */
.sb-stage{
  --ease:cubic-bezier(.62,.02,.2,1);
  --pl:23%;--pt:50%;--ps:1;--pr:0deg;      /* telefono: dove sta e come sta */
  --cl:66%;--ct:50%;--cw:42%;              /* testo: dove entra */
  position:relative;height:640px;
  background:linear-gradient(160deg,#0c2a22 0%,#07211b 52%,#04150f 100%);
  border-top:3px solid var(--green);
  color:var(--sb-ink);
  overflow:hidden;
}
/* l'alone di luce segue il telefono: e' lui a dare il senso dello spostamento */
.sb-stage::after{
  content:"";position:absolute;top:50%;left:var(--pl);width:860px;height:860px;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(94,176,105,.22),transparent 72%);
  transition:left 1s var(--ease);
}
.sb-stage > *{z-index:1}

/* le tre inquadrature: sinistra, destra, campo lungo centrale */
.sb-stage[data-pos="l"]{--pl:23%;--pt:47%;--ps:1;--pr:-1.4deg;--cl:66%;--ct:50%;--cw:42%}
.sb-stage[data-pos="r"]{--pl:77%;--pt:53%;--ps:1;--pr:1.4deg;--cl:34%;--ct:50%;--cw:42%}
.sb-stage[data-pos="c"]{--pl:50%;--pt:37%;--ps:.8;--pr:0deg;--cl:50%;--ct:85%;--cw:64%}

/* ---- telefono stilizzato -------------------------------------------- */
.sb-phone{
  position:absolute;top:var(--pt);left:var(--pl);
  transform:translate(-50%,-50%) scale(var(--ps)) rotate(var(--pr));
  transition:top 1s var(--ease),left 1s var(--ease),transform 1s var(--ease);
  width:266px;height:534px;flex:none;
  background:#020c0a;border:1px solid rgba(234,243,238,.16);
  border-radius:34px;padding:9px;
  box-shadow:0 30px 70px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.04);
}
.sb-screen{
  position:relative;width:100%;height:100%;overflow:hidden;
  border-radius:26px;background:#f4f8f6;
}
.sb-notch{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:86px;height:19px;background:#020c0a;border-radius:0 0 12px 12px;z-index:9;
}

/* ---- scene ----------------------------------------------------------- */
.sb-scr{
  position:absolute;inset:0;display:flex;flex-direction:column;
  opacity:0;pointer-events:none;transition:opacity .38s ease;
}
.sb-scr.on{opacity:1;pointer-events:auto}

.sb-status{
  display:flex;justify-content:space-between;align-items:center;
  padding:7px 16px 5px;font-family:var(--mono);font-size:9px;color:#7d9a8c;flex:none;
}
.sb-status i{display:inline-block;width:3px;height:7px;background:#7d9a8c;margin-left:2px;
  vertical-align:middle;border-radius:1px}
.sb-status i:nth-child(2){height:9px}
.sb-status i:nth-child(3){height:11px}

.sb-bar{
  flex:none;display:flex;align-items:center;gap:8px;
  background:var(--green-dark);color:#fff;padding:11px 14px;font-size:12px;font-weight:600;
}
.sb-bar svg{flex:none}
.sb-body{flex:1;padding:14px;display:flex;flex-direction:column;gap:9px;position:relative;min-height:0}

/* mattoncini d'interfaccia */
.sb-tile{background:#fff;border:1px solid #dde7e2;padding:10px;display:flex;flex-direction:column;gap:6px}
.sb-tile b{font-size:10.5px;font-weight:600;color:#0b1b2a;letter-spacing:-.01em}
.sb-tile span{font-size:9px;color:#7f9488;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase}
.sb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sb-tile{min-width:0}
.sb-tile b,.sb-tile span{min-width:0;overflow-wrap:anywhere}
/* a 375px la colonna scende a 88px: con 9px e .08em di spaziatura
   "CONSERVAZIONE" non ci sta e si spezzava a meta' parola */
@media(max-width:620px){
  .sb-tile{padding:8px}
  .sb-tile span{font-size:8.5px;letter-spacing:.01em}
}
.sb-ico{width:20px;height:20px;background:#e6f2ea;display:grid;place-items:center;color:var(--green-dark);font-size:11px}

.sb-row{background:#fff;border:1px solid #dde7e2;padding:9px 10px;display:flex;align-items:center;gap:9px}
.sb-row .sb-code{font-family:var(--mono);font-size:9.5px;color:var(--green-dark);letter-spacing:.06em}
.sb-row .sb-nm{font-size:10.5px;color:#0b1b2a;flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sb-row .sb-qty{font-family:var(--mono);font-size:10px;color:#42566a;flex:none}
.sb-arrow{width:22px;height:22px;flex:none;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff}
.sb-arrow.up{background:var(--green)}
.sb-arrow.dn{background:#d05a4c}

.sb-fld{background:#fff;border:1px solid #dde7e2;padding:7px 9px}
.sb-fld em{display:block;font-family:var(--mono);font-size:7.5px;letter-spacing:.12em;
  text-transform:uppercase;color:#93a89c;font-style:normal;margin-bottom:3px}
.sb-fld b{display:block;font-size:10.5px;font-weight:500;color:#0b1b2a;white-space:nowrap;overflow:hidden}

.sb-btn{background:var(--green-dark);color:#fff;text-align:center;padding:10px;
  font-size:11px;font-weight:700;letter-spacing:.01em;position:relative}
.sb-btn.ghost{background:transparent;color:var(--green-dark);border:1px solid var(--green-dark)}

.sb-toast{position:absolute;left:14px;right:14px;bottom:14px;background:#0b2b22;color:#dff3e6;
  padding:9px 11px;font-size:10px;display:flex;align-items:center;gap:7px}
.sb-toast b{color:var(--sb-green-lit);font-weight:700}

.sb-pill{display:inline-flex;align-items:center;gap:5px;background:#e6f2ea;color:var(--green-dark);
  font-family:var(--mono);font-size:8px;letter-spacing:.12em;text-transform:uppercase;padding:4px 7px;align-self:flex-start}
.sb-dot-live{width:5px;height:5px;background:var(--green);border-radius:50%}

/* tastierino numerico */
.sb-pad{position:absolute;left:0;right:0;bottom:0;background:#fff;border-top:1px solid #dde7e2;padding:11px}
.sb-pad-val{text-align:center;font-family:var(--mono);font-size:20px;color:#0b1b2a;margin-bottom:9px;letter-spacing:-.02em}
.sb-pad-val small{font-size:10px;color:#7f9488;margin-left:3px}
.sb-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.sb-keys span{background:#f4f8f6;border:1px solid #e9f0ec;text-align:center;padding:6px 0;
  font-family:var(--mono);font-size:11px;color:#42566a}

/* firma digitale: dettaglio X-FIR, QR e foglio di conferma */
.sb-body--fir{gap:7px}
.sb-fir{background:#fff;border:1px solid #dde7e2;border-left:3px solid var(--green);padding:8px 9px;
  display:flex;flex-direction:column;gap:4px;position:relative}
.sb-fir-st{position:absolute;right:8px;top:7px;background:#0b3b57;color:#fff;font-family:var(--mono);
  font-size:7px;letter-spacing:.1em;text-transform:uppercase;padding:2px 5px}
.sb-fir em{font-family:var(--mono);font-size:7px;letter-spacing:.11em;text-transform:uppercase;
  color:#93a89c;font-style:normal;display:block}
.sb-fir b{font-size:10px;font-weight:600;color:#0b1b2a;display:block}
.sb-qr{width:82px;height:82px;display:block;margin:2px auto;fill:#0b1b2a}
.sb-azioni{display:flex;gap:4px;border-top:1px solid #e9f0ec;padding-top:7px}
.sb-azioni span{flex:1;text-align:center;font-family:var(--mono);font-size:7.5px;letter-spacing:.06em;
  text-transform:uppercase;color:#8296a8;padding:5px 0}
.sb-azioni span.on{background:#e6f2ea;color:var(--green-dark);font-weight:700}
.sb-firma{position:absolute;left:0;right:0;bottom:0;background:#fff;border-top:1px solid #dde7e2;
  padding:11px;display:flex;flex-direction:column;gap:8px}
.sb-firma b{font-size:10.5px;font-weight:500;color:#42566a;line-height:1.45}
.sb-firma-ok{margin-top:2px;background:#0b2b22;color:#dff3e6;padding:7px 9px;font-size:9.5px;
  display:flex;align-items:center;gap:6px}
.sb-firma-ok b{color:var(--green-soft);font-weight:700;font-size:10px}

/* registro / righe scritte da sole */
.sb-log{background:#fff;border:1px solid #dde7e2;padding:9px;display:flex;flex-direction:column;gap:6px;flex:1;min-height:0}
.sb-log .ln{display:flex;gap:7px;align-items:center;font-family:var(--mono);font-size:8.5px;color:#42566a}
.sb-log .ln s{text-decoration:none;color:var(--green-dark)}
.sb-log .ln u{text-decoration:none;flex:1;height:5px;background:#eef4f0;display:block}

/* invio RENTRI */
.sb-check{display:flex;align-items:center;gap:8px;font-size:10px;color:#42566a}
.sb-check svg{width:14px;height:14px;flex:none}
.sb-check path{fill:none;stroke:var(--green-dark);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sb-doc{width:64px;height:82px;background:#fff;border:1px solid #dde7e2;margin:0 auto;position:relative;
  display:flex;flex-direction:column;gap:4px;padding:9px}
.sb-doc i{display:block;height:4px;background:#e9f0ec}
.sb-doc i:nth-child(2){width:70%}
.sb-doc i:nth-child(3){width:85%}
.sb-target{display:flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--green-dark);color:var(--green-dark);padding:8px;font-family:var(--mono);
  font-size:9px;letter-spacing:.16em}

/* conservazione */
.sb-vault{flex:1;display:grid;place-items:center;position:relative;min-height:0}
.sb-vault svg{width:74px;height:74px}
.sb-vault svg path{fill:none;stroke:var(--green-dark);stroke-width:2}
.sb-stack{position:absolute;top:64px;left:50%;transform:translateX(-50%);width:52px;height:64px}
.sb-stack i{position:absolute;inset:0;background:#fff;border:1px solid #dde7e2}

/* chiusura */
.sb-end{flex:1;background:#07211b;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;text-align:center;padding:24px}
.sb-end h4{margin:0;font-size:21px;font-weight:500;letter-spacing:-.04em;color:#eaf3ee;line-height:1.15}
.sb-end p{margin:0;font-size:10.5px;color:#9fb8ac;line-height:1.5}
.sb-logo{font-size:26px;font-weight:600;letter-spacing:-.05em;color:#eaf3ee}
.sb-logo em{color:var(--sb-green-lit);font-style:normal}

/* splash */
.sb-splash{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  background:#07211b;padding:24px;text-align:center}
.sb-splash b{font-size:14px;font-weight:600;color:#eaf3ee;letter-spacing:-.02em}
.sb-splash small{font-size:10px;color:#9fb8ac;line-height:1.5}
.sb-splash .sb-btn{align-self:stretch;margin-top:8px}

/* tocco: il cerchietto che simula il dito */
.sb-tap{position:absolute;width:26px;height:26px;border-radius:50%;background:rgba(94,176,105,.35);
  border:1.5px solid var(--green);opacity:0;pointer-events:none;z-index:8}

/* ---- animazioni: partono solo quando la scena e' attiva -------------- */
.sb-scr.on .an{animation:sb-in .5s cubic-bezier(.2,.7,.3,1) both;animation-delay:var(--d,0s)}
.sb-scr.on .an-pop{animation:sb-pop .45s cubic-bezier(.2,1.5,.4,1) both;animation-delay:var(--d,0s)}
.sb-scr.on .an-type{animation:sb-type .7s steps(24,end) both;animation-delay:var(--d,0s);width:0}
.sb-scr.on .an-tap{animation:sb-tap 1.1s ease-out both;animation-delay:var(--d,0s)}
.sb-scr.on .an-up{animation:sb-slide-up .5s cubic-bezier(.2,.8,.3,1) both;animation-delay:var(--d,0s)}
.sb-scr.on .an-draw{animation:sb-draw 1.5s cubic-bezier(.4,0,.3,1) both;animation-delay:var(--d,0s)}
.sb-scr.on .an-glow{animation:sb-glow 1.1s ease-in-out both;animation-delay:var(--d,0s)}
.sb-scr.on .an-fly{animation:sb-fly 1.5s cubic-bezier(.5,0,.3,1) both;animation-delay:var(--d,0s)}
.sb-scr.on .an-out{animation:sb-out .55s ease-in both;animation-delay:var(--d,0s)}
.sb-scr.on .an-spin{animation:sb-spin 2.6s linear infinite}

.an-draw{stroke-dasharray:1;stroke-dashoffset:1}
.sb-check path.an-draw{stroke-dasharray:26;stroke-dashoffset:26}
.sb-vault path.an-draw{stroke-dasharray:300;stroke-dashoffset:300}

@keyframes sb-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes sb-pop{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
@keyframes sb-slide-up{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}
@keyframes sb-type{from{width:0}to{width:100%}}
@keyframes sb-tap{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1)}
  60%{opacity:.9;transform:scale(.92)}100%{opacity:0;transform:scale(1.5)}}
@keyframes sb-draw{to{stroke-dashoffset:0}}
@keyframes sb-glow{0%{background:#fff}35%{background:#dff0e4;box-shadow:0 0 0 2px rgba(94,176,105,.35)}
  100%{background:#fff;box-shadow:none}}
@keyframes sb-fly{0%{opacity:1;transform:none}
  60%{opacity:1;transform:translateY(-96px) scale(.64)}
  100%{opacity:0;transform:translateY(-118px) scale(.5)}}
@keyframes sb-out{to{opacity:.32;transform:translateX(10px)}}
@keyframes sb-spin{to{transform:rotate(360deg)}}

/* ---- didascalie: il "PowerPoint" accanto al telefono ----------------- */
.sb-copy{
  position:absolute;top:var(--ct);left:var(--cl);width:var(--cw);
  transform:translate(-50%,-50%);
  transition:top 1s var(--ease),left 1s var(--ease),width 1s var(--ease);
}
.sb-cap{display:none}
.sb-cap.on{display:block}
/* il testo arriva dopo il telefono, dal lato dove non c'e' il telefono */
.sb-stage[data-pos="l"] .sb-cap.on{animation:sb-da-destra .8s cubic-bezier(.2,.7,.3,1) .3s both}
.sb-stage[data-pos="r"] .sb-cap.on{animation:sb-da-sinistra .8s cubic-bezier(.2,.7,.3,1) .3s both}
.sb-stage[data-pos="c"] .sb-cap.on{animation:sb-da-sotto .8s cubic-bezier(.2,.7,.3,1) .3s both}
.sb-stage[data-pos="c"] .sb-copy{text-align:center}
.sb-stage[data-pos="c"] .sb-cap h3,.sb-stage[data-pos="c"] .sb-cap p{max-width:none;margin-inline:auto}
/* nel campo lungo il testo sta sotto il telefono: piu' compatto, niente etichetta */
.sb-stage[data-pos="c"] .sb-cap .sb-n{margin-bottom:9px}
.sb-stage[data-pos="c"] .sb-cap h3{font-size:clamp(20px,2.2vw,29px);margin-bottom:9px}
.sb-stage[data-pos="c"] .sb-cap p{font-size:14.5px}
.sb-stage[data-pos="c"] .sb-cap .sb-tag{display:none}
@keyframes sb-da-destra{from{opacity:0;transform:translateX(52px)}to{opacity:1;transform:none}}
@keyframes sb-da-sinistra{from{opacity:0;transform:translateX(-52px)}to{opacity:1;transform:none}}
@keyframes sb-da-sotto{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.sb-cap .sb-n{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sb-green-lit);margin-bottom:14px}
.sb-cap .sb-n i{font-style:normal;color:#6f8b7d}
/* verde = lo fai tu, grigio = lo fa il sistema (o e' apertura/chiusura) */
.sb-cap .sb-n--auto,.sb-cap .sb-n--intro{color:var(--sb-mute)}
.sb-cap h3{margin:0 0 14px;font-size:clamp(22px,2.7vw,36px);font-weight:500;letter-spacing:-.04em;
  line-height:1.08;color:#fff;max-width:20ch}
.sb-cap p{margin:0;font-size:15px;line-height:1.65;color:var(--sb-mute);max-width:48ch}
.sb-cap .sb-tag{margin-top:20px;display:inline-block;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:#eaf3ee;border:1px solid var(--sb-line);padding:6px 10px}
.sb-cap a.sb-tag--cta{text-decoration:none;border-color:var(--sb-green-lit);color:var(--sb-green-lit);transition:.2s}
.sb-cap a.sb-tag--cta:hover{background:var(--sb-green-lit);color:var(--sb-deep)}

/* ---- barra comandi + timeline a capitoli ----------------------------- */
.sb-ctrl{display:flex;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap}
.sb-btn-c{width:40px;height:40px;flex:none;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);transition:.2s}
.sb-btn-c:hover{border-color:var(--green);color:var(--green-dark)}
.sb-btn-c svg{width:14px;height:14px;fill:currentColor}
.sb-play .ic-pause{display:none}
.sb.is-playing .sb-play .ic-play{display:none}
.sb.is-playing .sb-play .ic-pause{display:block}

.sb-track{display:flex;gap:5px;flex:1;min-width:220px}
.sb-seg{position:relative;flex:1;height:4px;padding:0;border:0;background:#d4e0da;cursor:pointer;overflow:hidden}
.sb-seg:hover{background:var(--green-soft)}
.sb-seg i{position:absolute;inset:0;width:0;background:var(--green-dark);display:block}
.sb-seg.done i{width:100%}
.sb-seg.on i{animation:sb-fill var(--dur,4s) linear forwards}
/* i segmenti che non sono passaggi dell'utente restano piu' tenui */
.sb-seg--auto i,.sb-seg--intro i{background:var(--ink-faint)}
.sb-seg--auto.done i,.sb-seg--intro.done i{opacity:.55}
@keyframes sb-fill{from{width:0}to{width:100%}}
.sb-time{font-family:var(--mono);font-size:11px;color:var(--ink-faint);flex:none;letter-spacing:.06em}

/* pausa: si ferma tutto, scena e timeline */
.sb.is-paused .sb-scr *,
.sb.is-paused .sb-cap.on,
.sb.is-paused .sb-seg i{animation-play-state:paused}

.sb-note{margin-top:12px;font-size:12.5px;color:var(--ink-faint);line-height:1.5}

/* ---- responsive ------------------------------------------------------ */
@media(max-width:940px){
  .sb-stage{height:auto;padding:32px 26px;display:flex;flex-direction:column;
    align-items:center;gap:28px;text-align:center}
  .sb-stage::after{top:34%;left:50%;transition:none}
  .sb-phone,.sb-copy{position:static;transform:none;transition:none}
  .sb-phone{width:266px;height:534px}
  .sb-copy{width:100%;max-width:520px}
  .sb-cap h3,.sb-cap p{max-width:none;margin-inline:auto}
  .sb-stage[data-pos] .sb-cap.on{animation:sb-in .55s cubic-bezier(.2,.7,.3,1) both}
}
@media(max-width:620px){
  .sb{padding:60px 0}
  .sb-stage{padding:26px 18px}
  .sb-phone{width:232px;height:466px}
  .sb-cap h3{font-size:24px}
  .sb-cap p{font-size:14px}
  .sb-track{order:3;flex-basis:100%}
}

/* chi ha chiesto meno animazioni: niente autoplay, niente moto interno */
@media(prefers-reduced-motion:reduce){
  .sb-scr *,.sb-seg i,.sb-cap.on{animation:none!important}
  .sb-scr,.sb-phone,.sb-copy,.sb-stage::after{transition:none}
  .sb-scr.on .an,.sb-scr.on .an-pop,.sb-scr.on .an-up{opacity:1;transform:none}
  .sb-scr.on .an-type{width:auto}
  .sb-scr.on .an-out{opacity:.32}
  .sb-check path.an-draw,.sb-vault path.an-draw{stroke-dashoffset:0!important}
  .sb-tap{display:none}
  .sb-seg.on i{width:100%}
}