/* ============================================================
   NAPKIN FOLD — tovagliolo che si piega in 4 (scrub)
   Refactor: estratto dal widget HTML inline di Elementor.
   Tutto scopato sotto #napkin-fold — niente perdite globali.
   ============================================================ */
#napkin-fold{
  --bg-deep:#0F3B3F; --accent:#54C0DC; --accent-ink:#0E7C90;
  --on-deep:#EAF4F1; --on-deep-soft:#9FC3BD;
  --fhead:'Sora',system-ui,sans-serif; --fbody:'Hanken Grotesk',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --cloth:#FBFCFB; --cloth-2:#EDF3F1; --cloth-edge:rgba(15,46,49,.16);
  position:relative; background:var(--bg-deep); color:var(--on-deep);
  font-family:var(--fbody); -webkit-font-smoothing:antialiased; display:block;
}
#napkin-fold *,#napkin-fold *::before,#napkin-fold *::after{box-sizing:border-box;margin:0;padding:0}
#napkin-fold .nf-track{height:260vh}   /* spazio di scroll per lo scrub */
#napkin-fold .nf-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;overflow:hidden}
#napkin-fold .nf-head{text-align:center;padding-top:clamp(2.2rem,6vh,4.5rem);z-index:3}
#napkin-fold .nf-eyebrow{font-family:var(--fhead);font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);display:inline-block;margin-bottom:.7rem}
#napkin-fold .nf-head h2{font-family:var(--fhead);font-weight:700;font-size:clamp(2rem,4vw,3rem);line-height:1.05;letter-spacing:-.02em;color:#fff;margin:0}
#napkin-fold .nf-stage{flex:1;position:relative;display:grid;place-items:center}
#napkin-fold .nf-scene{position:relative;width:min(720px,92vw);height:min(48vh,420px);perspective:1200px}
#napkin-fold .nf-napkin{position:absolute;top:50%;left:50%;width:176px;height:176px;transform-style:preserve-3d;will-change:transform}
#napkin-fold .nf-panel{position:absolute;border-radius:3px;background:
    repeating-linear-gradient(0deg,rgba(15,46,49,.045) 0 1px,transparent 1px 11px),
    repeating-linear-gradient(90deg,rgba(15,46,49,.045) 0 1px,transparent 1px 11px),
    linear-gradient(135deg,var(--cloth),var(--cloth-2));
  box-shadow:inset 0 0 0 1px var(--cloth-edge);backface-visibility:visible}
#napkin-fold .nf-stack{z-index:1}
#napkin-fold .nf-stack::after,#napkin-fold .nf-flap::after{content:"";position:absolute;inset:5px;border:1.5px solid rgba(84,192,220,.45);border-radius:2px;pointer-events:none}
#napkin-fold .nf-flap{z-index:3;transform-style:preserve-3d}
#napkin-fold .nf-shadow{position:absolute;z-index:2;border-radius:4px;background:rgba(0,0,0,.28);filter:blur(7px);opacity:0}
#napkin-fold .nf-sparkle{position:absolute;width:18px;height:18px;opacity:0;color:var(--accent);z-index:4}
#napkin-fold .nf-sparkle svg{width:100%;height:100%;fill:currentColor}
#napkin-fold .nf-captions{position:relative;z-index:3;padding-bottom:clamp(2rem,6vh,4rem);display:grid}
#napkin-fold .nf-cap{grid-area:1/1;text-align:center;opacity:0;transition:opacity .25s linear}
#napkin-fold .nf-cap b{font-family:var(--fhead);font-size:1.25rem;color:#fff;display:block}
#napkin-fold .nf-cap span{color:var(--on-deep-soft);font-size:.95rem}
#napkin-fold .nf-progress{width:min(460px,82vw);margin:1rem auto 0;grid-area:2/1}
#napkin-fold .nf-progress__track{height:4px;border-radius:4px;background:rgba(255,255,255,.16);overflow:hidden}
#napkin-fold .nf-progress__bar{height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:var(--accent);border-radius:4px;will-change:transform}
#napkin-fold .nf-progress__labels{display:flex;justify-content:space-between;margin-top:.6rem;font-family:var(--fhead);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--on-deep-soft)}
#napkin-fold .nf-progress__labels span.on{color:var(--accent)}
#napkin-fold .nf-hint{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-size:.78rem;color:var(--on-deep-soft);display:flex;flex-direction:column;align-items:center;gap:.4rem;opacity:.8}
#napkin-fold .nf-m{width:22px;height:34px;border:1.5px solid var(--on-deep-soft);border-radius:12px;position:relative}
#napkin-fold .nf-m::after{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:4px;height:7px;border-radius:2px;background:var(--accent);animation:npk-scrolly 1.6s var(--ease) infinite}
@keyframes npk-scrolly{0%{opacity:0;top:6px}30%{opacity:1}70%{opacity:1;top:16px}100%{opacity:0;top:18px}}
@media (prefers-reduced-motion:reduce){
  #napkin-fold .nf-track{height:auto}
  #napkin-fold .nf-sticky{position:relative;height:auto;padding-bottom:4rem}
  #napkin-fold .nf-hint{display:none}
}
@media (max-width:680px){ #napkin-fold .nf-scene{height:400px} }