/* ════════════════════════════════════════════════════════════════════
   INSTACODE — ic-mostra.css
   Stile dei pezzi costruiti da ic-mostra.js: carosello, libro, Cometa
   in volo, demo nei quadratini, QR in 3D.
   Regole per il telefono: solo transform e opacity, niente blur, e le
   animazioni girano solo con la classe icm-on (pezzo sullo schermo).
════════════════════════════════════════════════════════════════════ */

[data-icm]{ --icm-txt: var(--txt, #fff); --icm-muted: var(--muted, #8b919c); --icm-bordo: var(--border, rgba(255,255,255,.1)); }
.icm-aiuto{ margin:10px 0 0; text-align:center; font-size:.74rem; color:var(--icm-muted); letter-spacing:.02em; }

/* ── la sfera di Cometa (come in cometa.js) ── */
.icm-sfera{
  position:relative; display:inline-block; width:64px; height:64px; border-radius:50%; flex-shrink:0;
  background:radial-gradient(circle at 34% 28%,#fff 0%,#eef2f8 26%,#c2cbd9 58%,#8b95a6 84%,#6d7788 100%);
  box-shadow:0 6px 18px rgba(0,0,0,.45),inset -4px -5px 10px rgba(0,0,0,.18),inset 3px 4px 8px rgba(255,255,255,.55);
}
.icm-sfera svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.icm-sfera path{ fill:none; stroke:#3a4150; stroke-width:5; stroke-linecap:round; }
.icm-cm-occhi{ transform-box:fill-box; transform-origin:center; }
.icm-sfera-piccola{ width:44px; height:44px; }
.icm-sfera-mini{ width:18px; height:18px; box-shadow:0 2px 5px rgba(0,0,0,.35); vertical-align:middle; }
.icm-sfera-mini path{ stroke-width:7; }

/* ════════ CAROSELLO ════════ */
.icm-car{ position:relative; }
.icm-car-pista{
  display:flex; gap:18px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  padding:26px calc(50% - 115px) 12px; outline:none;
  perspective:1100px;
}
.icm-car-pista::-webkit-scrollbar{ display:none; }
.icm-car-pista.is-trascina{ scroll-snap-type:none; cursor:grabbing; }
.icm-car-pista{ cursor:grab; }
.icm-car-foto{
  flex:0 0 230px; margin:0; scroll-snap-align:center; text-align:center;
  transform:scale(.86) rotateY(0deg); opacity:.55;
  transition:transform .55s cubic-bezier(.2,.9,.3,1), opacity .45s ease;
}
.icm-car-foto.a-sinistra{ transform:scale(.86) rotateY(16deg); }
.icm-car-foto.a-destra{ transform:scale(.86) rotateY(-16deg); }
.icm-car-foto.is-attiva{ transform:scale(1) rotateY(0); opacity:1; }
.icm-telefono{
  position:relative; width:100%; aspect-ratio:375/812; border-radius:34px; padding:7px;
  background:linear-gradient(145deg,#2a2d33,#0d0e10 60%,#24272c);
  box-shadow:0 22px 50px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.12);
}
.icm-telefono::before{ /* fotocamera */
  content:''; position:absolute; top:13px; left:50%; width:54px; height:14px; margin-left:-27px;
  border-radius:999px; background:#000; z-index:2;
}
.icm-telefono img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top; border-radius:28px; user-select:none; -webkit-user-drag:none; pointer-events:none; }
.icm-car-foto figcaption{ margin-top:14px; display:flex; flex-direction:column; gap:4px; padding:0 4px; }
.icm-car-foto figcaption strong{ font-size:.95rem; color:var(--icm-txt); letter-spacing:-.01em; }
.icm-car-foto figcaption span{ font-size:.8rem; line-height:1.45; color:var(--icm-muted); }
.icm-car-pallini{ display:flex; justify-content:center; gap:7px; margin-top:6px; }
.icm-pallino{
  width:7px; height:7px; padding:0; border:0; border-radius:999px; cursor:pointer;
  background:var(--icm-muted); opacity:.45; transition:width .35s ease, opacity .35s ease;
}
.icm-pallino.is-attivo{ width:22px; opacity:1; background:var(--icm-txt); }

/* ════════ LIBRO ════════
   Pagine 3:4: a destra la schermata INTERA del telefono (img-sito/libro-*.jpg)
   dentro una cornice da telefono, a sinistra cosa fa. Le misure del testo seguono
   la larghezza del libro (--icm-u, misurata da ic-mostra.js). Sul telefono diventa un libro a
   pagina singola, con la spiegazione sotto (icm-libro-dida). */
.icm-libro{ max-width:1000px; margin:0 auto; }
.icm-libro-blocco{
  position:relative; width:100%; aspect-ratio:3/2; perspective:1800px; cursor:pointer;
  outline:none; transition:opacity .35s ease; -webkit-tap-highlight-color:transparent; touch-action:pan-y;
}
.icm-libro-blocco.is-chiude{ opacity:0; }
.icm-libro-blocco.senza-transizioni *{ transition:none !important; }
.icm-pag, .icm-faccia{
  position:absolute; top:0; width:50%; height:100%; overflow:hidden;
  background:linear-gradient(165deg,#191a1e 0%,#0f1012 100%);
  border:1px solid var(--icm-bordo);
}
.icm-pag-sx{ left:0; border-radius:var(--ic-r-l,28px) 6px 6px var(--ic-r-l,28px); }
.icm-pag-dx{ left:50%; border-radius:6px var(--ic-r-l,28px) var(--ic-r-l,28px) 6px; }
.icm-pag-fondo{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.icm-foglio{
  position:absolute; top:0; left:50%; width:50%; height:100%;
  transform-origin:left center; transform-style:preserve-3d;
  transition:transform 1s cubic-bezier(.45,.05,.2,1);
}
.icm-foglio.is-girato{ transform:rotateY(-180deg); }
.icm-foglio .icm-faccia{ left:0; width:100%; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.icm-fronte{
  border-radius:6px var(--ic-r-l,28px) var(--ic-r-l,28px) 6px;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 90% at 50% 8%,#262a32 0%,#0d0e10 70%);
}
.icm-libro-tel{
  height:93%; aspect-ratio:375/812; padding:calc(var(--icm-u,6px) * 0.55); border-radius:calc(var(--icm-u,6px) * 3.2);
  background:linear-gradient(145deg,#2c2f35,#0d0e10 60%,#25282d);
  box-shadow:0 18px 40px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.12);
}
.icm-libro-tel img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:calc(var(--icm-u,6px) * 2.7); user-select:none; pointer-events:none; }
.icm-fronte::after{ /* ombra della piega, verso il dorso */
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.4),rgba(0,0,0,0) 12%);
}
.icm-retro{ transform:rotateY(180deg); border-radius:var(--ic-r-l,28px) 6px 6px var(--ic-r-l,28px); }
.icm-retro::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(270deg,rgba(0,0,0,.35),rgba(0,0,0,0) 12%);
}

/* pagina di testo */
.icm-pag-testo{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:calc(var(--icm-u,6px) * 1.2);
  padding:calc(var(--icm-u,6px) * 4.5) calc(var(--icm-u,6px) * 5); text-align:left; color:#fff;
}
.icm-pag-num{ font-size:calc(var(--icm-u,6px) * 3.6); font-weight:800; letter-spacing:-.04em; line-height:1; color:#fff; }
.icm-pag-num i{ font-style:normal; font-size:.5em; font-weight:600; color:#6b7280; letter-spacing:0; margin-left:.2em; }
.icm-pag-testo em{
  align-self:flex-start; font-style:normal; font-size:calc(var(--icm-u,6px) * 1.2); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#cfd3da; padding:calc(var(--icm-u,6px) * .4) calc(var(--icm-u,6px) * 1.1); border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
}
.icm-pag-testo strong{ font-size:calc(var(--icm-u,6px) * 2.5); font-weight:800; letter-spacing:-.025em; line-height:1.15; margin-top:calc(var(--icm-u,6px) * .4); }
.icm-pag-d{ font-size:calc(var(--icm-u,6px) * 1.55); color:#a3a9b3; line-height:1.5; }
.icm-pag-testo ul{ list-style:none; margin:calc(var(--icm-u,6px) * .5) 0 0; padding:calc(var(--icm-u,6px) * 1.2) 0 0; border-top:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; gap:calc(var(--icm-u,6px) * .9); }
.icm-pag-testo li{ position:relative; padding-left:calc(var(--icm-u,6px) * 2.2); font-size:calc(var(--icm-u,6px) * 1.45); line-height:1.4; color:#e5e7eb; }
.icm-pag-testo li::before{
  content:'✓'; position:absolute; left:0; top:0; font-weight:800; color:#34d399;
}
.icm-pag-fondo .icm-pag-testo{ position:static; text-align:center; align-items:center; padding:0 calc(var(--icm-u,6px) * 3); }
.icm-pag-fondo .icm-pag-testo strong{ font-size:calc(var(--icm-u,6px) * 2.4); }
.icm-dorso{
  position:absolute; top:2%; bottom:2%; left:50%; width:2px; margin-left:-1px; z-index:80; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.18),transparent);
}
.icm-libro-dida{ display:none; }
.icm-libro-cta{
  display:inline-block; padding:12px 22px; border-radius:var(--ic-r-pill,999px); background:#fff; color:#0a0a0a;
  font-weight:700; font-size:.92rem; text-decoration:none; box-shadow:0 0 18px rgba(255,255,255,.25);
}

/* telefono: una pagina alla volta, grande, e la spiegazione sotto */
@media (max-width:640px){
  .icm-libro{ max-width:340px; }
  .icm-libro-blocco{ aspect-ratio:375/812; overflow:hidden; border-radius:var(--ic-r-l,28px); box-shadow:0 0 0 1px rgba(255,255,255,.16), 0 0 0 7px #16181c, 0 0 0 8px rgba(255,255,255,.1), 0 24px 50px rgba(0,0,0,.55); }
  .icm-libro-tel{ height:100%; padding:0; border-radius:0; background:none; box-shadow:none; }
  .icm-libro-tel img{ border-radius:0; }
  .icm-pag-sx, .icm-retro, .icm-dorso{ display:none; }
  .icm-pag-dx, .icm-foglio{ left:0; width:100%; }
  .icm-pag-dx, .icm-fronte{ border-radius:var(--ic-r-l,28px); }
  .icm-fronte::after{ display:none; }
  .icm-pag-fondo .icm-pag-testo strong{ font-size:calc(var(--icm-u,6px) * 6); }
  .icm-pag-fondo .icm-pag-testo .icm-pag-d{ font-size:calc(var(--icm-u,6px) * 4); }
  .icm-libro-dida{ display:block; position:relative; min-height:250px; margin-top:16px; }
  .icm-libro-dida .icm-pag-testo{ position:static; padding:4px 4px 0; gap:8px; }
  .icm-libro-dida .icm-pag-num{ font-size:1.6rem; }
  .icm-libro-dida em{ font-size:.66rem; padding:3px 9px; }
  .icm-libro-dida strong{ font-size:1.2rem; margin-top:2px; }
  .icm-libro-dida .icm-pag-d{ font-size:.9rem; }
  .icm-libro-dida ul{ margin-top:4px; padding-top:10px; gap:7px; }
  .icm-libro-dida li{ font-size:.86rem; padding-left:20px; }
}

/* ════════ COMETA IN VOLO ════════ */
.icm-cometa{
  position:relative; overflow:hidden; border-radius:var(--ic-r-l,28px);
  border:1px solid var(--icm-bordo);
  background:radial-gradient(120% 140% at 20% 0%,#1b1f29 0%,#0b0c10 55%,#060608 100%);
  min-height:190px; display:flex; flex-direction:column; justify-content:flex-end;
  padding:96px 22px 20px; text-align:center; color:#fff;
}
.icm-cm-cielo i{ position:absolute; width:2px; height:2px; border-radius:50%; background:#fff; opacity:.5; }
.icm-cm-cielo i:nth-child(1){ top:14%; left:12%; } .icm-cm-cielo i:nth-child(2){ top:26%; left:78%; opacity:.35; }
.icm-cm-cielo i:nth-child(3){ top:58%; left:6%; opacity:.3; } .icm-cm-cielo i:nth-child(4){ top:10%; left:52%; }
.icm-cm-cielo i:nth-child(5){ top:44%; left:92%; opacity:.4; } .icm-cm-cielo i:nth-child(6){ top:70%; left:64%; opacity:.25; }
.icm-cm-vola{
  position:absolute; top:22px; left:50%; width:64px; height:64px; margin-left:-32px;
  transform:translate3d(0,0,0);
}
.icm-cm-scia{
  position:absolute; top:50%; right:50%; width:170px; height:26px; margin-top:-13px;
  border-radius:999px; transform-origin:right center; opacity:0;
  background:linear-gradient(90deg,rgba(190,205,230,0),rgba(210,222,240,.55) 70%,rgba(255,255,255,.8));
}
.icm-cm-testo p{ margin:0; font-size:.92rem; line-height:1.5; color:rgba(255,255,255,.88); max-width:420px; margin-inline:auto; }
.icm-cm-cta{
  margin-top:14px; border:0; cursor:pointer; font:inherit; font-weight:600; font-size:.88rem;
  padding:11px 20px; border-radius:var(--ic-r-pill,999px); background:#fff; color:#0a0a0a;
  transition:transform .2s ease;
}
.icm-cm-cta:active{ transform:scale(.96); }
/* il volo: entra da sinistra con la scia, si ferma al centro, riparte a destra */
.icm-cometa.icm-on .icm-cm-vola{ animation:icmVolo 9s cubic-bezier(.45,0,.25,1) infinite; }
.icm-cometa.icm-on .icm-cm-scia{ animation:icmScia 9s ease-in-out infinite; }
.icm-cometa.icm-on .icm-cm-occhi{ animation:icmBlink 4.5s ease-in-out infinite; }
@keyframes icmVolo{
  0%   { transform:translate3d(-420px,46px,0) rotate(-14deg); }
  18%  { transform:translate3d(0,-4px,0) rotate(4deg); }
  24%  { transform:translate3d(0,0,0) rotate(0); }
  40%  { transform:translate3d(0,-6px,0) rotate(-3deg); }
  56%  { transform:translate3d(0,0,0) rotate(2deg); }
  72%  { transform:translate3d(0,-5px,0) rotate(0); }
  80%  { transform:translate3d(0,0,0) rotate(0); }
  100% { transform:translate3d(440px,-60px,0) rotate(14deg); }
}
@keyframes icmScia{
  0%   { opacity:.9; transform:scaleX(1); }
  18%  { opacity:.6; transform:scaleX(.8); }
  26%  { opacity:0;  transform:scaleX(.2); }
  80%  { opacity:0;  transform:scaleX(.2); }
  88%  { opacity:.9; transform:scaleX(1); }
  100% { opacity:.9; transform:scaleX(1.1); }
}
@keyframes icmBlink{ 0%,90%,100%{ transform:scaleY(1); } 94%{ transform:scaleY(.15); } }

/* ════════ DEMO NEI QUADRATINI ════════
   Ogni scena e' disegnata su 280x280 (ic-mostra.js la scala al riquadro)
   e dura 10 s. Si muove solo con transform, opacity e clip-path. */
.icm-demo{ display:flex; flex-direction:column; gap:12px; }
.icm-demo-scena{
  position:relative; aspect-ratio:1; overflow:hidden; border-radius:var(--ic-r-l,28px);
  border:1px solid var(--icm-bordo);
  background:radial-gradient(130% 120% at 30% 0%,#1a1c22,#0a0b0d 70%);
  color:#fff;
}
.icm-demo-palco{ position:absolute; top:0; left:0; width:280px; height:280px; transform-origin:0 0; transform:scale(var(--icm-s,1)); font-size:13px; }
.icm-demo-palco *{ box-sizing:border-box; }
.icm-demo-scena img{ display:block; }
.icm-demo-dida{ display:flex; flex-direction:column; gap:3px; padding:0 4px; }
.icm-demo-dida strong{ font-size:.92rem; color:var(--icm-txt); letter-spacing:-.01em; }
.icm-demo-dida span{ font-size:.8rem; color:var(--icm-muted); line-height:1.45; }
.icm-demo.icm-on .icm-demo-palco *{ animation-duration:10s; animation-iteration-count:infinite; animation-fill-mode:both; }

/* cursore con onda del tocco, comune a tutte le scene */
.icm-cur{ position:absolute; left:0; top:0; width:22px; height:22px; z-index:20; opacity:0; will-change:transform; }
.icm-cur svg{ position:relative; z-index:2; width:22px; height:22px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.icm-cur path{ fill:#fff; stroke:#0a0a0a; stroke-width:1.4; stroke-linejoin:round; }
.icm-cur-onda{ position:absolute; left:-12px; top:-12px; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.45); opacity:0; transform:scale(.2); }

/* ── 1. Crea un QR in 3 tocchi ── */
.icm-c1-fin{ position:absolute; inset:12px; border-radius:22px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.09); overflow:hidden; }
.icm-c1-top{ position:absolute; top:12px; left:14px; right:14px; display:flex; align-items:center; gap:5px; }
.icm-c1-top i{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.18); }
.icm-c1-top b{ margin-left:8px; font-size:12px; font-weight:700; }
.icm-c1-passi{ position:absolute; top:36px; left:12px; display:flex; gap:4px; }
.icm-c1-passi span{ position:relative; z-index:1; width:76px; height:24px; line-height:24px; text-align:center; font-size:10.5px; font-weight:600; color:rgba(255,255,255,.55); white-space:nowrap; }
.icm-c1-passi .icm-c1-hl{ position:absolute; z-index:0; left:0; top:0; width:76px; height:24px; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); }
.icm-c1-et{ position:absolute; left:16px; font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#8b919c; }
.icm-c1-et1{ top:72px; } .icm-c1-et2{ top:126px; }
.icm-c1-campo{
  position:absolute; top:88px; left:14px; right:14px; height:32px; padding:0 12px; display:flex; align-items:center;
  border-radius:var(--ic-r-field,16px); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
}
.icm-c1-tw{ display:inline-block; overflow:hidden; white-space:nowrap; width:0; border-right:2px solid #fff; padding-right:1px; line-height:16px; font-size:12.5px; }
.icm-c1-col{ position:absolute; top:142px; left:16px; display:flex; gap:12px; }
.icm-c1-col i{ width:26px; height:26px; border-radius:50%; }
.icm-c1-col i:nth-child(1){ background:#f5f5f5; }
.icm-c1-col i:nth-child(2){ background:linear-gradient(135deg,#ffd6c9,#f7c6e0); }
.icm-c1-col i:nth-child(3){ background:linear-gradient(135deg,#6d5dfc,#3b82f6 55%,#22d3ee); }
.icm-c1-col i:nth-child(4){ background:linear-gradient(135deg,#34d399,#059669); }
.icm-c1-col i:nth-child(5){ background:#111; box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); }
.icm-c1-col em{ position:absolute; left:-4px; top:-4px; width:34px; height:34px; border-radius:50%; border:2px solid #fff; }
.icm-c1-salva{
  position:absolute; left:14px; right:14px; top:190px; height:34px; line-height:34px; text-align:center;
  border-radius:var(--ic-r-pill,999px); background:#fff; color:#0a0a0a; font-weight:700;
}
.icm-c1-ris{
  position:absolute; z-index:5; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  background:linear-gradient(135deg,#6d5dfc,#3b82f6 55%,#22d3ee); opacity:0; clip-path:circle(0% at 50% 87%);
}
.icm-c1-card{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 18px 10px; border-radius:var(--ic-r-m,20px); background:rgba(255,255,255,.14); }
.icm-c1-card b{ font-size:15px; letter-spacing:.04em; }
.icm-c1-card img{ width:70px; height:70px; padding:5px; background:#fff; border-radius:12px; }
.icm-c1-card small{ font-size:9px; padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.85); color:#333; }
.icm-c1-toast, .icm-c2-toast{
  display:flex; align-items:center; gap:7px; padding:7px 14px 7px 8px; border-radius:999px;
  background:#0d0e10; color:#fff; font-weight:600; font-size:12px; box-shadow:0 8px 20px rgba(0,0,0,.35);
}
.icm-c1-toast i, .icm-c2-toast i{ font-style:normal; flex-shrink:0; width:20px; height:20px; border-radius:50%; background:#34d399; color:#04140d; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; }

.icm-demo-crea.icm-on .icm-cur{ animation-name:c1Cur; animation-timing-function:cubic-bezier(.45,0,.2,1); }
.icm-demo-crea.icm-on .icm-cur-onda{ animation-name:c1Onda; animation-timing-function:ease-out; }
.icm-demo-crea.icm-on .icm-c1-hl{ animation-name:c1Passi; animation-timing-function:cubic-bezier(.3,1.3,.5,1); }
.icm-demo-crea.icm-on .icm-c1-campo{ animation-name:c1Fuoco; animation-timing-function:ease; }
.icm-demo-crea.icm-on .icm-c1-tw{ animation-name:c1Scrivi, icmCaret; animation-timing-function:steps(18), step-end; animation-duration:10s, 10s; }
.icm-demo-crea.icm-on .icm-c1-col em{ animation-name:c1Scegli; animation-timing-function:cubic-bezier(.3,1.3,.5,1); }
.icm-demo-crea.icm-on .icm-c1-salva{ animation-name:c1Premi; animation-timing-function:ease; }
.icm-demo-crea.icm-on .icm-c1-ris{ animation-name:c1Ris; animation-timing-function:cubic-bezier(.6,0,.2,1); }
.icm-demo-crea.icm-on .icm-c1-card{ animation-name:c1Card; animation-timing-function:cubic-bezier(.3,1.4,.5,1); }
.icm-demo-crea.icm-on .icm-c1-toast{ animation-name:c1Toast; animation-timing-function:cubic-bezier(.3,1.3,.5,1); }
@keyframes c1Cur{
  0%  { opacity:0; transform:translate(250px,270px); }
  5%  { opacity:1; transform:translate(232px,246px); }
  12% { transform:translate(150px,104px); }
  14% { transform:translate(150px,104px) scale(.85); }
  16%,31% { transform:translate(150px,104px); }
  38% { transform:translate(106px,158px); }
  40% { transform:translate(106px,158px) scale(.85); }
  42%,49% { transform:translate(106px,158px); }
  57% { transform:translate(140px,206px); }
  59% { transform:translate(140px,206px) scale(.85); }
  61% { opacity:1; transform:translate(140px,206px); }
  68%,100% { opacity:0; transform:translate(220px,250px); }
}
@keyframes c1Onda{
  0%,13.5%{ opacity:0; transform:scale(.2); } 14%{ opacity:.9; transform:scale(.2); } 18%{ opacity:0; transform:scale(1.5); }
  39.5%{ opacity:0; transform:scale(.2); } 40%{ opacity:.9; transform:scale(.2); } 44%{ opacity:0; transform:scale(1.5); }
  58.5%{ opacity:0; transform:scale(.2); } 59%{ opacity:.9; transform:scale(.2); } 63%,100%{ opacity:0; transform:scale(1.5); }
}
@keyframes c1Passi{ 0%,36%{ transform:translateX(0); } 40%,55%{ transform:translateX(80px); } 59%,100%{ transform:translateX(160px); } }
@keyframes c1Fuoco{
  0%,13%{ border-color:rgba(255,255,255,.12); box-shadow:none; }
  15%,32%{ border-color:rgba(255,255,255,.7); box-shadow:0 0 0 4px rgba(255,255,255,.08); }
  35%,100%{ border-color:rgba(255,255,255,.12); box-shadow:none; }
}
@keyframes c1Scrivi{ 0%,15%{ width:0; border-right-width:2px; } 31%{ width:124px; border-right-width:2px; } 33%,100%{ width:124px; border-right-width:0; } }
@keyframes icmCaret{ 0%,100%{ border-right-color:#fff; } 50%{ border-right-color:transparent; } }
@keyframes c1Scegli{ 0%,38%{ transform:translateX(0); } 42%,100%{ transform:translateX(76px); } }
@keyframes c1Premi{ 0%,58.5%{ transform:scale(1); } 60%{ transform:scale(.94); } 62%,100%{ transform:scale(1); } }
@keyframes c1Ris{
  0%,61%{ opacity:0; clip-path:circle(0% at 50% 87%); }
  62%{ opacity:1; clip-path:circle(0% at 50% 87%); }
  70%,93%{ opacity:1; clip-path:circle(150% at 50% 87%); }
  98%,100%{ opacity:0; clip-path:circle(150% at 50% 87%); }
}
@keyframes c1Card{ 0%,64%{ opacity:0; transform:scale(.6) translateY(14px); } 72%,100%{ opacity:1; transform:scale(1) translateY(0); } }
@keyframes c1Toast{ 0%,73%{ opacity:0; transform:translateY(16px); } 78%,100%{ opacity:1; transform:translateY(0); } }

/* ── 2. Cambi il link, il QR resta ── */
.icm-c2-vol{
  position:absolute; top:12px; left:134px; width:124px; height:124px; padding:10px 12px; border-radius:16px;
  background:#f6f1e7; color:#2b2118; transform:rotate(-3deg); box-shadow:0 14px 30px rgba(0,0,0,.45);
  display:flex; flex-direction:column; align-items:center;
}
.icm-c2-vol b{ font-size:12px; letter-spacing:.18em; font-family:Georgia,serif; }
.icm-c2-righe{ display:flex; flex-direction:column; gap:3px; width:70%; margin:5px 0 6px; }
.icm-c2-righe i{ height:3px; border-radius:2px; background:#d9cdb8; }
.icm-c2-righe i:nth-child(2){ width:80%; } .icm-c2-righe i:nth-child(3){ width:60%; }
.icm-c2-qr{ padding:3px; background:#fff; border-radius:8px; box-shadow:0 0 0 1px rgba(0,0,0,.06); }
.icm-c2-qr img{ width:50px; height:50px; }
.icm-c2-badge{
  position:absolute; left:-118px; top:34px; width:100px; text-align:center; line-height:1.3; font-style:normal; font-size:10.5px; font-weight:700;
  padding:4px 9px; border-radius:999px; background:#fff; color:#0a0a0a; transform:rotate(3deg); opacity:0;
  box-shadow:0 6px 14px rgba(0,0,0,.3);
}
.icm-c2-pan{
  position:absolute; left:14px; right:14px; top:148px; height:118px; border-radius:20px;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.1);
}
.icm-c2-r1{ position:absolute; top:12px; left:14px; right:14px; display:flex; align-items:center; justify-content:space-between; }
.icm-c2-r1 b{ font-size:12.5px; }
.icm-c2-on{ display:flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; color:#22c55e; }
.icm-c2-on i{ width:22px; height:13px; border-radius:999px; background:#22c55e; position:relative; }
.icm-c2-on i::after{ content:''; position:absolute; top:2px; right:2px; width:9px; height:9px; border-radius:50%; background:#fff; }
.icm-c2-campo{
  position:absolute; top:38px; left:12px; right:12px; height:30px; border-radius:var(--ic-r-field,16px);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); overflow:hidden;
}
.icm-c2-campo span{ position:absolute; left:12px; top:0; line-height:28px; font-size:12px; font-weight:600; white-space:nowrap; }
.icm-c2-new{ color:#34d399; clip-path:inset(0 100% 0 0); }
.icm-c2-bt{ position:absolute; left:12px; right:12px; bottom:12px; display:flex; justify-content:space-between; }
.icm-c2-bt span{ height:28px; line-height:26px; padding:0 13px; border-radius:999px; font-size:11.5px; font-weight:700; }
.icm-c2-cambia{ border:1px solid rgba(255,255,255,.22); }
.icm-c2-salva{ background:#fff; color:#0a0a0a; border:1px solid #fff; opacity:.3; }
.icm-c2-toast{ position:absolute; top:226px; left:26px; width:228px; white-space:nowrap; justify-content:center; padding-left:6px; opacity:0; z-index:5; }

.icm-demo-link.icm-on .icm-cur{ animation-name:c2Cur; animation-timing-function:cubic-bezier(.45,0,.2,1); }
.icm-demo-link.icm-on .icm-cur-onda{ animation-name:c2Onda; animation-timing-function:ease-out; }
.icm-demo-link.icm-on .icm-c2-campo{ animation-name:c2Fuoco; }
.icm-demo-link.icm-on .icm-c2-old{ animation-name:c2Cancella; animation-timing-function:steps(13); }
.icm-demo-link.icm-on .icm-c2-new{ animation-name:c2Scrivi; animation-timing-function:steps(14); }
.icm-demo-link.icm-on .icm-c2-salva{ animation-name:c2Salva; }
.icm-demo-link.icm-on .icm-c2-cambia{ animation-name:c2Cambia; }
.icm-demo-link.icm-on .icm-c2-bt{ animation-name:c2Bt; }
.icm-demo-link.icm-on .icm-c2-toast{ animation-name:c2Toast; animation-timing-function:cubic-bezier(.3,1.3,.5,1); }
.icm-demo-link.icm-on .icm-c2-qr{ animation-name:c2Qr; animation-timing-function:ease-in-out; }
.icm-demo-link.icm-on .icm-c2-badge{ animation-name:c2Badge; animation-timing-function:cubic-bezier(.3,1.4,.5,1); }
@keyframes c2Cur{
  0%  { opacity:0; transform:translate(250px,276px); }
  6%  { opacity:1; transform:translate(220px,262px); }
  16% { transform:translate(66px,246px); }
  18% { transform:translate(66px,246px) scale(.85); }
  20%,46% { transform:translate(66px,246px); }
  56% { transform:translate(232px,246px); }
  58% { transform:translate(232px,246px) scale(.85); }
  60% { opacity:1; transform:translate(232px,246px); }
  68%,100% { opacity:0; transform:translate(250px,276px); }
}
@keyframes c2Onda{
  0%,17.5%{ opacity:0; transform:scale(.2); } 18%{ opacity:.9; transform:scale(.2); } 22%{ opacity:0; transform:scale(1.5); }
  57.5%{ opacity:0; transform:scale(.2); } 58%{ opacity:.9; transform:scale(.2); } 62%,100%{ opacity:0; transform:scale(1.5); }
}
@keyframes c2Fuoco{
  0%,18%{ border-color:rgba(255,255,255,.12); box-shadow:none; }
  20%,58%{ border-color:rgba(52,211,153,.8); box-shadow:0 0 0 4px rgba(52,211,153,.12); }
  61%,100%{ border-color:rgba(255,255,255,.12); box-shadow:none; }
}
@keyframes c2Cancella{ 0%,21%{ clip-path:inset(0 0 0 0); } 30%,95%{ clip-path:inset(0 100% 0 0); } 97%,100%{ clip-path:inset(0 0 0 0); } }
@keyframes c2Scrivi{ 0%,31%{ clip-path:inset(0 100% 0 0); } 48%,95%{ clip-path:inset(0 0 0 0); } 97%,100%{ clip-path:inset(0 100% 0 0); } }
@keyframes c2Salva{ 0%,19%{ opacity:.3; transform:scale(1); } 22%,57%{ opacity:1; transform:scale(1); } 58.5%{ transform:scale(.92); } 61%{ opacity:1; transform:scale(1); } 66%,100%{ opacity:.3; } }
@keyframes c2Cambia{ 0%,17.5%{ background:transparent; } 18.5%,22%{ background:rgba(255,255,255,.14); } 25%,100%{ background:transparent; } }
.icm-c2-badge::after{ content:' →'; }
@keyframes c2Bt{ 0%,61%{ opacity:1; } 63%,92%{ opacity:0; } 96%,100%{ opacity:1; } }
@keyframes c2Toast{ 0%,61%{ opacity:0; transform:translateY(12px) scale(.9); } 66%,90%{ opacity:1; transform:translateY(0) scale(1); } 95%,100%{ opacity:0; transform:translateY(0) scale(1); } }
@keyframes c2Qr{ 0%,64%,100%{ box-shadow:0 0 0 0 rgba(52,211,153,0); } 70%{ box-shadow:0 0 0 6px rgba(52,211,153,.55); } 78%{ box-shadow:0 0 0 12px rgba(52,211,153,0); } }
@keyframes c2Badge{ 0%,68%{ opacity:0; transform:rotate(3deg) scale(.6); } 74%,93%{ opacity:1; transform:rotate(3deg) scale(1); } 98%,100%{ opacity:0; transform:rotate(3deg) scale(1); } }

/* ── 3. Scansione sicura ── */
.icm-c3-tel{
  position:absolute; top:10px; left:72px; width:136px; height:260px; border-radius:30px; overflow:hidden;
  background:#000; border:3px solid #2c2f35; box-shadow:0 18px 40px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.08);
}
.icm-c3-notch{ position:absolute; z-index:10; top:7px; left:50%; width:44px; height:12px; margin-left:-22px; border-radius:999px; background:#000; box-shadow:0 0 0 1px #1d1f23; }
.icm-c3-sch{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; }
.icm-c3-sch small{ font-size:10px; color:#9aa0aa; }
.icm-c3-cam{ background:radial-gradient(circle at 50% 45%,#2a2620,#0c0b09 75%); }
.icm-c3-carta{ padding:6px; background:#fff; border-radius:10px; transform:rotate(0); box-shadow:0 10px 24px rgba(0,0,0,.6); }
.icm-c3-carta img{ width:58px; height:58px; }
.icm-c3-mir{ position:absolute; top:50%; left:50%; width:96px; height:96px; margin:-48px 0 0 -48px; }
.icm-c3-mir i{ position:absolute; width:20px; height:20px; border:3px solid #fff; }
.icm-c3-mir i:nth-child(1){ top:0; left:0; border-right:0; border-bottom:0; border-top-left-radius:10px; }
.icm-c3-mir i:nth-child(2){ top:0; right:0; border-left:0; border-bottom:0; border-top-right-radius:10px; }
.icm-c3-mir i:nth-child(3){ bottom:0; left:0; border-right:0; border-top:0; border-bottom-left-radius:10px; }
.icm-c3-mir i:nth-child(4){ bottom:0; right:0; border-left:0; border-top:0; border-bottom-right-radius:10px; }
.icm-c3-raggio{ position:absolute; left:8px; right:8px; top:6px; height:2px; border-radius:2px; background:#34d399; box-shadow:0 0 10px 1px #34d399; opacity:0; }
.icm-c3-cam small{ position:absolute; bottom:26px; left:0; right:0; color:#fff; }
.icm-c3-ctrl, .icm-c3-ok{ background:#0d0e10; opacity:0; }
.icm-c3-logo{ position:absolute; top:34px; left:0; right:0; font-size:12px; letter-spacing:-.02em; text-shadow:0 0 10px rgba(255,255,255,.5); }
.icm-c3-spin{ width:32px; height:32px; border-radius:50%; border:3px solid rgba(255,255,255,.12); border-top-color:#fff; }
.icm-c3-ok strong{ font-size:12px; }
.icm-c3-spunta{ width:40px; height:40px; border-radius:50%; background:rgba(52,211,153,.16); color:#34d399; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800; }
.icm-c3-dest{ width:104px; padding:6px 9px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); text-align:left; font-size:11px; font-weight:700; }
.icm-c3-dest small{ display:block; font-size:8px; letter-spacing:.06em; text-transform:uppercase; color:#8b919c; }
.icm-c3-barra{ width:104px; height:4px; border-radius:999px; background:rgba(255,255,255,.1); overflow:hidden; }
.icm-c3-barra i{ display:block; height:100%; width:100%; background:#fff; transform-origin:left; transform:scaleX(0); }
.icm-c3-sito{ justify-content:flex-start; gap:8px; padding:0 12px; background:#f7f2ea; transform:translateX(100%); }
.icm-c3-hero{ width:calc(100% + 24px); height:104px; margin:0 -12px 4px; display:flex; align-items:flex-end; padding:10px 12px; background:linear-gradient(160deg,#f0b37e,#e07a5f 60%,#b85c44); color:#fff; }
.icm-c3-hero b{ font-family:Georgia,serif; font-size:16px; }
.icm-c3-sito > i{ display:block; width:100%; height:7px; border-radius:4px; background:#e2d9c9; }
.icm-c3-sito > i:nth-of-type(2){ width:80%; } .icm-c3-sito > i:nth-of-type(3){ width:60%; }
.icm-c3-btn{ margin-top:6px; width:70%; height:24px; border-radius:999px; background:#2b2118; }

.icm-demo-scansione.icm-on .icm-c3-carta{ animation-name:c3Carta; animation-timing-function:ease-in-out; }
.icm-demo-scansione.icm-on .icm-c3-mir{ animation-name:c3Mirino; animation-timing-function:cubic-bezier(.3,1.3,.5,1); }
.icm-demo-scansione.icm-on .icm-c3-mir i{ animation-name:c3Angoli; }
.icm-demo-scansione.icm-on .icm-c3-raggio{ animation-name:c3Raggio; animation-timing-function:ease-in-out; }
.icm-demo-scansione.icm-on .icm-c3-ctrl{ animation-name:c3Ctrl; }
.icm-demo-scansione.icm-on .icm-c3-spin{ animation:icmGiraSpin .8s linear infinite; }
.icm-demo-scansione.icm-on .icm-c3-ok{ animation-name:c3Ok; }
.icm-demo-scansione.icm-on .icm-c3-spunta{ animation-name:c3Spunta; animation-timing-function:cubic-bezier(.3,1.6,.5,1); }
.icm-demo-scansione.icm-on .icm-c3-barra i{ animation-name:c3Barra; animation-timing-function:linear; }
.icm-demo-scansione.icm-on .icm-c3-sito{ animation-name:c3Sito; animation-timing-function:cubic-bezier(.6,0,.2,1); }
@keyframes c3Carta{ 0%{ transform:rotate(6deg) scale(.86); } 14%,100%{ transform:rotate(0) scale(1); } }
@keyframes c3Mirino{ 0%,6%{ transform:scale(1.35); opacity:.6; } 18%,100%{ transform:scale(1); opacity:1; } }
@keyframes c3Angoli{ 0%,22%{ border-color:#fff; } 25%,100%{ border-color:#34d399; } }
@keyframes c3Raggio{ 0%,6%{ opacity:0; transform:translateY(0); } 8%{ opacity:1; } 15%{ transform:translateY(80px); } 22%{ opacity:1; transform:translateY(0); } 25%,100%{ opacity:0; transform:translateY(0); } }
@keyframes icmGiraSpin{ to{ transform:rotate(360deg); } }
@keyframes c3Ctrl{ 0%,29%{ opacity:0; } 32%,49%{ opacity:1; } 52%,100%{ opacity:0; } }
@keyframes c3Ok{ 0%,49%{ opacity:0; } 52%,100%{ opacity:1; } }
@keyframes c3Spunta{ 0%,50%{ transform:scale(.3); } 56%,100%{ transform:scale(1); } }
@keyframes c3Barra{ 0%,56%{ transform:scaleX(0); } 74%,100%{ transform:scaleX(1); } }
@keyframes c3Sito{ 0%,74%{ transform:translateX(100%); } 80%,95%{ transform:translateX(0); } 98%,100%{ transform:translateX(0); opacity:0; } }

/* ── 4. Analisi e Cometa ── */
@property --icm-n{ syntax:'<integer>'; inherits:false; initial-value:176; }
.icm-c4-pan{
  position:absolute; top:12px; left:12px; right:12px; height:104px; border-radius:20px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
}
.icm-c4-et{ position:absolute; top:12px; left:14px; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:#8b919c; }
.icm-c4-num{ position:absolute; top:26px; left:14px; font-size:26px; font-weight:800; letter-spacing:-.03em; counter-reset:icmn var(--icm-n); }
.icm-c4-num::after{ content:counter(icmn); }
.icm-c4-trend{ position:absolute; top:37px; left:84px; font-size:11px; font-weight:700; color:#34d399; }
.icm-c4-barre{ position:absolute; left:14px; right:14px; bottom:10px; height:40px; display:flex; align-items:flex-end; gap:7px; border-bottom:1px solid rgba(255,255,255,.12); }
.icm-c4-barre i{ position:relative; flex:1; border-radius:6px 6px 2px 2px; background:rgba(255,255,255,.7); transform-origin:bottom; }
.icm-c4-barre i:nth-child(1){ height:28%; } .icm-c4-barre i:nth-child(2){ height:48%; } .icm-c4-barre i:nth-child(3){ height:42%; }
.icm-c4-barre i:nth-child(4){ height:70%; } .icm-c4-barre i:nth-child(5){ height:58%; } .icm-c4-barre i:nth-child(6){ height:66%; }
.icm-c4-barre i:nth-child(7){ height:94%; background:#34d399; }
.icm-c4-barre em{
  position:absolute; bottom:calc(100% + 6px); right:-4px; white-space:nowrap; font-style:normal; font-size:9.5px; font-weight:700;
  padding:3px 7px; border-radius:999px; background:#34d399; color:#04140d; opacity:0;
}
.icm-c4-chat{ position:absolute; top:128px; left:12px; right:12px; bottom:12px; overflow:hidden; }
.icm-c4-flusso{ position:absolute; top:0; left:0; right:0; display:flex; flex-direction:column; gap:7px; }
.icm-c4-io{ align-self:flex-end; height:28px; line-height:14px; padding:7px 11px; white-space:nowrap; border-radius:16px 16px 5px 16px; background:#fff; color:#0a0a0a; font-size:11.5px; font-weight:600; opacity:0; }
.icm-c4-slot{ position:relative; height:30px; }
.icm-c4-dots, .icm-c4-lei{
  position:absolute; left:0; top:0; height:30px; display:flex; align-items:center; gap:6px; padding:0 11px 0 7px;
  border-radius:16px 16px 16px 5px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); font-size:11.5px; opacity:0;
}
.icm-c4-dots{ padding:0 12px; gap:4px; }
.icm-c4-dots i{ width:5px; height:5px; border-radius:50%; background:#fff; opacity:.4; }
.icm-c4-modulo{
  display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:8px; border-radius:16px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); opacity:0;
}
.icm-c4-modulo div{ padding:4px 8px; border-radius:10px; background:rgba(255,255,255,.06); font-size:10.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.icm-c4-modulo small{ display:block; font-size:8px; color:#8b919c; text-transform:uppercase; letter-spacing:.06em; }
.icm-c4-modulo .icm-c4-crea{ grid-column:1/-1; height:22px; line-height:22px; text-align:center; border-radius:999px; background:#fff; color:#0a0a0a; font-size:11px; font-weight:700; }

.icm-demo-analisi.icm-on .icm-c4-num{ animation-name:c4Conta; animation-timing-function:cubic-bezier(.2,.7,.3,1); }
.icm-demo-analisi.icm-on .icm-c4-trend{ animation-name:c4Trend; }
.icm-demo-analisi.icm-on .icm-c4-barre i{ animation-name:c4Barra; animation-timing-function:cubic-bezier(.3,1.35,.5,1); }
.icm-demo-analisi.icm-on .icm-c4-barre i:nth-child(2){ animation-delay:.1s; } .icm-demo-analisi.icm-on .icm-c4-barre i:nth-child(3){ animation-delay:.2s; }
.icm-demo-analisi.icm-on .icm-c4-barre i:nth-child(4){ animation-delay:.3s; } .icm-demo-analisi.icm-on .icm-c4-barre i:nth-child(5){ animation-delay:.4s; }
.icm-demo-analisi.icm-on .icm-c4-barre i:nth-child(6){ animation-delay:.5s; } .icm-demo-analisi.icm-on .icm-c4-barre i:nth-child(7){ animation-delay:.6s; }
.icm-demo-analisi.icm-on .icm-c4-barre em{ animation-name:c4Tip; animation-delay:0s; animation-timing-function:cubic-bezier(.3,1.5,.5,1); }
.icm-demo-analisi.icm-on .icm-c4-io{ animation-name:c4Io; animation-timing-function:cubic-bezier(.3,1.3,.5,1); }
.icm-demo-analisi.icm-on .icm-c4-dots{ animation-name:c4Dots; }
.icm-demo-analisi.icm-on .icm-c4-dots i{ animation:icmPuntini 1s ease-in-out infinite; }
.icm-demo-analisi.icm-on .icm-c4-dots i:nth-child(2){ animation-delay:.15s; } .icm-demo-analisi.icm-on .icm-c4-dots i:nth-child(3){ animation-delay:.3s; }
.icm-demo-analisi.icm-on .icm-c4-lei{ animation-name:c4Lei; animation-timing-function:cubic-bezier(.3,1.3,.5,1); }
.icm-demo-analisi.icm-on .icm-c4-modulo{ animation-name:c4Modulo; animation-timing-function:cubic-bezier(.3,1.2,.5,1); }
.icm-demo-analisi.icm-on .icm-c4-flusso{ animation-name:c4Scorri; animation-timing-function:cubic-bezier(.5,0,.2,1); }
@keyframes c4Conta{ 0%,3%{ --icm-n:0; } 26%,100%{ --icm-n:176; } }
@keyframes c4Trend{ 0%,24%{ opacity:0; transform:translateX(-6px); } 30%,100%{ opacity:1; transform:translateX(0); } }
@keyframes c4Barra{ 0%,3%{ transform:scaleY(.04); } 20%,94%{ transform:scaleY(1); } 100%{ transform:scaleY(.04); } }
@keyframes c4Tip{ 0%,26%{ opacity:0; transform:translateY(6px) scale(.7); } 31%,92%{ opacity:1; transform:translateY(0) scale(1); } 96%,100%{ opacity:0; } }
@keyframes c4Io{ 0%,34%{ opacity:0; transform:translateY(10px) scale(.92); } 39%,63%{ opacity:1; transform:translateY(0) scale(1); } 68%,100%{ opacity:0; transform:translateY(0) scale(1); } }
@keyframes c4Dots{ 0%,42%{ opacity:0; } 45%,53%{ opacity:1; } 55%,100%{ opacity:0; } }
@keyframes icmPuntini{ 0%,100%{ opacity:.35; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-3px); } }
@keyframes c4Lei{ 0%,54%{ opacity:0; transform:translateY(8px) scale(.92); } 59%,94%{ opacity:1; transform:translateY(0) scale(1); } 98%,100%{ opacity:0; } }
@keyframes c4Modulo{ 0%,64%{ opacity:0; transform:translateY(14px) scale(.95); } 71%,94%{ opacity:1; transform:translateY(0) scale(1); } 98%,100%{ opacity:0; } }
@keyframes c4Scorri{ 0%,62%{ transform:translateY(0); } 70%,96%{ transform:translateY(-35px); } 100%{ transform:translateY(0); } }

/* ════════ QR IN 3D ════════
   Tessera larga 15em: si ridimensiona cambiando solo il font-size.
   Davanti: Instacode nero su bianco. Dietro: un QR vero dell'editor.
   Spessore: 9 strati sottili (vedi tessera() in ic-mostra.js). */
.icm-q3{ position:relative; width:15em; height:17.5em; font-size:10px; perspective:70em; }
.icm-q3-gal{ position:absolute; top:0; left:0; width:15em; height:15em; transform-style:preserve-3d; }
.icm-q3-gira{ position:absolute; inset:0; transform-style:preserve-3d; transform:rotateX(-8deg) rotateY(-20deg); }
.icm-q3-strato, .icm-q3-faccia{ position:absolute; inset:0; border-radius:2.2em; }
.icm-q3-strato{ background:#c9ced8; }
.icm-q3-strato:nth-child(odd){ background:#b9bfcb; }
.icm-q3-faccia{ overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.icm-q3-fronte{
  transform:translateZ(.45em); background:linear-gradient(160deg,#ffffff 0%,#f1f3f6 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.7em;
  box-shadow:inset 0 0 0 .1em rgba(0,0,0,.06);
}
.icm-q3-fronte b{ font-family:'Inter',sans-serif; font-size:2.5em; font-weight:800; letter-spacing:-.05em; color:#0a0a0a; line-height:1; }
.icm-q3-fronte small{ font-size:1em; font-weight:600; color:#6b7280; padding:.3em .9em; border-radius:999px; background:#e9ecf1; }
.icm-q3-retro{ transform:rotateY(180deg) translateZ(.45em); background:#111; }
.icm-q3-retro img{ display:block; width:100%; height:100%; object-fit:cover; }
.icm-q3-ombra{
  position:absolute; left:15%; right:15%; bottom:0; height:1.4em; border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.6),rgba(0,0,0,0));
}
/* gira: si ferma sul davanti, mezzo giro, si ferma sul QR, mezzo giro */
.icm-on .icm-q3-gira{ animation:icmQ3Gira var(--icm-v,12s) cubic-bezier(.65,0,.35,1) var(--icm-d,0s) infinite; }
.icm-on .icm-q3-gal{ animation:icmQ3Gal calc(var(--icm-v,12s) * .55) ease-in-out var(--icm-d,0s) infinite alternate; }
.icm-on .icm-q3-ombra{ animation:icmQ3Ombra calc(var(--icm-v,12s) * .55) ease-in-out var(--icm-d,0s) infinite alternate; }
@keyframes icmQ3Gira{
  0%,30%   { transform:rotateX(-8deg) rotateY(-20deg); }
  50%,80%  { transform:rotateX(-8deg) rotateY(160deg); }
  100%     { transform:rotateX(-8deg) rotateY(340deg); }
}
@keyframes icmQ3Gal{ from{ transform:translate3d(0,0,0) rotateZ(-2deg); } to{ transform:translate3d(.8em,-1.4em,0) rotateZ(2deg); } }
@keyframes icmQ3Ombra{ from{ transform:scale(1); opacity:1; } to{ transform:scale(.82); opacity:.55; } }

/* tessera singola (data-icm="qr3d") */
.icm-qr3d{ display:flex; justify-content:center; }
.icm-qr3d .icm-q3{ font-size:13px; }

/* tante tessere che fluttuano (data-icm="volo3d") */
.icm-volo3d{ position:relative; width:100%; height:270px; margin:30px 0 6px; }
.icm-volo3d .icm-q3{ position:absolute; }
@media (max-width:820px){
  .icm-volo3d{ height:230px; }
  .icm-volo3d .icm-q3-n4, .icm-volo3d .icm-q3-n5{ display:none; }
  .icm-volo3d .icm-q3-n1{ left:0 !important; top:70px !important; font-size:7px !important; }
  .icm-volo3d .icm-q3-n2{ left:calc(50% - 60px) !important; top:8px !important; font-size:8px !important; }
  .icm-volo3d .icm-q3-n3{ left:auto !important; right:0; top:84px !important; font-size:7px !important; }
}

/* ════════ SCHEDINE CHE SI GIRANO ════════
   Davanti: sfondo colorato come i QR dell'editor, Instacode in alto,
   icona e titolo. Dietro: la spiegazione su fondo scuro. Il giro e'
   un rotateY con un piccolo rimbalzo finale, come una moneta. */
.icm-sc{ width:100%; }
.icm-sc-fila{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.icm-sc-carta{
  position:relative; display:block; width:100%; aspect-ratio:3/4; padding:0; border:0; background:none;
  perspective:1100px; cursor:pointer; font:inherit; color:inherit; text-align:left;
  -webkit-tap-highlight-color:transparent; border-radius:var(--ic-r-l,28px);
}
.icm-sc-carta:focus-visible{ outline:2px solid var(--icm-txt); outline-offset:4px; }
.icm-sc-gira{
  position:absolute; inset:0; display:block; transform-style:preserve-3d;
  transition:transform .85s cubic-bezier(.3,1.35,.45,1);
}
.icm-sc-carta.is-girata .icm-sc-gira{ transform:rotateY(180deg); }
.icm-sc-carta:not(.is-girata):hover .icm-sc-gira{ transform:rotateY(-8deg) translateY(-4px); }
.icm-sc-faccia{
  position:absolute; inset:0; display:flex; flex-direction:column; gap:12px; padding:20px 20px 18px;
  border-radius:var(--ic-r-l,28px); overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.18);
}
.icm-sc-testa{ display:flex; align-items:center; justify-content:space-between; font-size:.78rem; }
.icm-sc-testa b{ font-weight:800; letter-spacing:-.03em; font-size:.95rem; }
.icm-sc-testa i{ font-style:normal; font-weight:700; opacity:.6; }
.icm-sc-ico{ font-size:2.6rem; line-height:1; margin-top:auto; }
.icm-sc-faccia strong{ font-size:1.18rem; font-weight:800; letter-spacing:-.025em; line-height:1.18; }
.icm-sc-tocca{
  align-self:flex-start; display:inline-flex; align-items:center; gap:6px; margin-top:4px;
  font-size:.74rem; font-weight:700; padding:6px 12px; border-radius:999px;
  background:rgba(255,255,255,.55); color:#0a0a0a;
}
.icm-sc-tocca em{ font-style:normal; font-size:.95rem; }
/* davanti: grafite come il resto del sito, con un alone di colore tenue
   (diverso per ogni schedina) che ricorda l'aurora dello sfondo */
.icm-sc-davanti{
  color:#fff;
  background:
    radial-gradient(90% 70% at 85% 0%,var(--sc-alone,rgba(130,170,255,.22)),rgba(0,0,0,0) 70%),
    linear-gradient(160deg,#1c1e23 0%,#111215 60%,#0b0c0e 100%);
}
.icm-sc-davanti::after{ /* riflesso lucido in alto a sinistra */
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(110% 55% at 10% 0%,rgba(255,255,255,.10),rgba(255,255,255,0) 55%);
}
.icm-sc-davanti .icm-sc-testa i{ opacity:.45; }
.sc-sf-1{ --sc-alone:rgba(150,180,255,.24); }   /* azzurro freddo */
.sc-sf-2{ --sc-alone:rgba(255,180,120,.20); }   /* ambra */
.sc-sf-3{ --sc-alone:rgba(140,220,190,.18); }   /* salvia */
.sc-sf-4{ --sc-alone:rgba(255,140,140,.18); }   /* rosso spento */
.sc-sf-5{ --sc-alone:rgba(200,170,255,.20); }   /* lilla */
.sc-sf-6{ --sc-alone:rgba(120,200,255,.20); }   /* cielo */
.sc-sf-7{ --sc-alone:rgba(230,215,170,.18); }   /* sabbia */
.sc-sf-8{ --sc-alone:rgba(255,170,210,.18); }   /* rosa cipria */
.icm-sc-davanti .icm-sc-tocca{ background:rgba(255,255,255,.92); color:#0a0a0a; }
/* dietro: la spiegazione */
.icm-sc-dietro{
  transform:rotateY(180deg); color:#fff;
  background:radial-gradient(130% 90% at 20% 0%,#23262e,#0e0f12 70%);
  gap:10px;
}
.icm-sc-dietro strong{ font-size:1.02rem; }
.icm-sc-d{ font-size:.86rem; line-height:1.55; color:#c3c8d0; }
.icm-sc-dietro .icm-sc-tocca{ margin-top:auto; background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.16); }

@media (max-width:1340px){ .icm-sc-fila{ grid-template-columns:repeat(2,minmax(0,1fr)); } .icm-sc-carta{ aspect-ratio:4/3.6; } }
@media (max-width:900px){ .icm-sc-carta{ aspect-ratio:3/4; } }
/* telefono: una fila che si scorre col dito, una schedina e un pezzo della prossima */
@media (max-width:640px){
  .icm-sc-fila{
    display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    margin:0; padding:6px 2px 18px; scrollbar-width:none;
  }
  .icm-sc-fila::-webkit-scrollbar{ display:none; }
  .icm-sc-carta{ flex:0 0 82%; scroll-snap-align:center; aspect-ratio:4/5.4; }
  .icm-sc-d{ font-size:.92rem; }
}
@media (max-width:390px){ .icm-sc-carta{ flex-basis:88%; aspect-ratio:4/6.2; } .icm-sc-d{ font-size:.86rem; } }
@media (prefers-reduced-motion: reduce){ .icm-sc-gira{ transition:none; } }

/* ════════ IMPAGINAZIONE DELLE SEZIONI ════════ */
.icm-intesta, .icm-griglia-demo, .icm-dentro, .icm-libro, .icm-car{ width:100%; }
.icm-intesta{ display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; }
.icm-griglia-demo{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin-top:34px; }
.icm-dentro{ display:grid; grid-template-columns:1fr; gap:30px; }   /* titolo sopra, libro grande sotto */
.icm-striscia{ margin-top:26px; }
@media (max-width:1000px){ .icm-griglia-demo{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:820px){
  .icm-intesta, .icm-dentro{ grid-template-columns:1fr; }
  .icm-intesta .icm-qr3d .icm-q3{ font-size:11px; }
}
@media (max-width:560px){ .icm-griglia-demo{ grid-template-columns:minmax(0,320px); justify-content:center; gap:26px; } }

/* ── tema chiaro ── */
html[data-theme="light"] .icm-cm-testo p{ color:rgba(255,255,255,.9); }
html[data-theme="light"] .icm-car-foto figcaption strong,
html[data-theme="light"] .icm-demo-dida strong{ color:#0f172a; }

/* ── telefono ── */
@media (max-width:560px){
  .icm-car-foto{ flex-basis:200px; }
  .icm-car-pista{ padding-left:calc(50% - 100px); padding-right:calc(50% - 100px); gap:12px; }
}

/* ── chi chiede meno movimento: tutto fermo e leggibile ── */
@media (prefers-reduced-motion: reduce){
  [data-icm] *{ animation:none !important; }
  .icm-car-foto, .icm-foglio, .icm-libro-blocco{ transition:none !important; }
  .icm-cm-scia, .icm-cur{ display:none; }
  .icm-c1-tw{ width:124px; border-right:0; }
  .icm-c2-old{ display:none; } .icm-c2-new{ clip-path:none; }
  .icm-c3-ok{ opacity:1; } .icm-c3-barra i{ transform:none; }
  .icm-c4-io, .icm-c4-lei, .icm-c4-modulo{ opacity:1; } .icm-c4-io{ opacity:0 !important; } .icm-c4-flusso{ transform:translateY(-35px); }
}