/* ─── RESET & ROOT ─── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --deep:   #050A14;
  --water:  #00C4F0;
  --ice:    #F0F8FF;
  --ghost:  #8B9BB4;
  --gold:   #C9A96E;
  --red:    #FF3B3B;
  --clash:  'Clash Display', 'Inter', sans-serif;
  --mono:   'JetBrains Mono', monospace;
  --inter:  'Inter', sans-serif;
}
html{ scroll-behavior: auto; overscroll-behavior: none; }
body{
  background: var(--deep);
  font-family: var(--inter);
  color: var(--ice);
  overflow-x: hidden;
  touch-action: pan-y;   /* impedisce swipe orizzontale su iOS/Android */
  cursor: none;
}

/* ─── PROGRESS BAR ─── */
#prog{
  position:fixed; top:0; left:0; height:1px; width:0%;
  background: linear-gradient(90deg, #003A8C, #0070CC, #00C4F0, #80E8FF);
  z-index:99999; pointer-events:none;
  box-shadow: 0 0 6px rgba(0,196,240,.6);
  transition: width 0.1s linear;
}

/* ─── CURSOR ─── */
#cursor-dot{
  position:fixed; width:10px; height:10px;
  background: var(--water); border-radius:50%;
  pointer-events:none; z-index:99998;
  transform: translate(-50%,-50%);
  box-shadow: 0 0 12px rgba(0,196,240,.8);
  transition: width .2s, height .2s, background .2s;
}
#cursor-ring{
  position:fixed; width:36px; height:36px;
  border: 1px solid rgba(0,196,240,.35);
  border-radius:50%;
  pointer-events:none; z-index:99997;
  transform: translate(-50%,-50%);
  transition: transform .08s ease, width .3s, height .3s, border-color .3s;
}
body:has(a:hover) #cursor-dot,
body:has(button:hover) #cursor-dot{ width:16px; height:16px; background: var(--gold); }
body:has(a:hover) #cursor-ring,
body:has(button:hover) #cursor-ring{ width:52px; height:52px; border-color: rgba(201,169,110,.5); }

/* ─── GRAIN OVERLAY ─── */
#grain{
  position:fixed; inset:-8%; width:116%; height:116%;
  pointer-events:none; z-index:9000;
  opacity:.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
  animation: grain 0.8s steps(1) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0);}12.5%{transform:translate(-2%,-3%);}25%{transform:translate(3%,1%);}
  37.5%{transform:translate(-1%,2%);}50%{transform:translate(2%,-2%);}62.5%{transform:translate(-3%,3%);}
  75%{transform:translate(1%,-1%);}87.5%{transform:translate(-2%,2%);}100%{transform:translate(2%,-3%);}
}

/* ─── LOADER ─── */
#loader{
  position:fixed; inset:0; z-index:99999;
  background: var(--deep);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:32px;
  transition: opacity 1.2s ease, visibility 1.2s ease;
}
#loader.out{ opacity:0; visibility:hidden; pointer-events:none; }
#ld-logo{
  font-family: var(--clash); font-size: clamp(2.5rem,6vw,5rem); font-weight:700;
  color: var(--ice); letter-spacing:.08em;
  text-align: center;
  clip-path: inset(0 100% 0 0);
  animation: ldwipe 1.2s cubic-bezier(.22,1,.36,1) .3s forwards;
}
@keyframes ldwipe{ to{ clip-path: inset(0 0% 0 0); } }
#ld-sub{
  font-family: var(--mono); font-size: 10px; letter-spacing:.3em; text-transform:uppercase;
  color: rgba(255,255,255,.2); opacity:0; text-align: center;
  animation: ldfade .8s ease 1.2s forwards;
}
@keyframes ldfade{ to{ opacity:1; } }
#ld-track{ width:180px; height:1px; background:rgba(255,255,255,.06); border-radius:1px; overflow:hidden; }
#ld-fill{ height:100%; width:0%; background: linear-gradient(90deg, #003A8C, #0070CC, #00C4F0, #80E8FF); }

/* ─── NAV PILL ─── */
#nav{
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%);
  z-index:9999;
  opacity:1;
  background: rgba(5,10,20,.72);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0,196,240,.12);
  border-radius: 50px; padding: 10px 24px;
  display:flex; align-items:center; gap:24px;
  transition: opacity .4s;
}
#nav-logo{ font-family:var(--clash); font-size:.9rem; font-weight:700; color:var(--water); letter-spacing:.12em; text-decoration:none; }
.nav-link{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.35); text-decoration:none;
  transition: color .25s;
}
.nav-link:hover{ color: var(--water); }
.nav-cta-pill{
  background: var(--gold); color: var(--deep);
  font-family:var(--mono); font-size:.62rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  padding:6px 16px; border-radius:50px; text-decoration:none;
  transition: box-shadow .25s, transform .2s;
}
.nav-cta-pill:hover{ box-shadow: 0 0 20px rgba(201,169,110,.5); transform:translateY(-1px); }

/* ─── NAV RESPONSIVE — clamp fluido desktop, full-width mobile ─── */
#nav{
  flex-wrap: nowrap;
}
#nav-logo{ white-space: nowrap; }
.nav-link{ white-space: nowrap; }
.nav-cta-pill{ white-space: nowrap; }

@media (max-width: 640px){
  #nav{
    /* pill centrata — stessa logica del desktop, solo più piccola */
    left:      50%;
    right:     auto;
    transform: translateX(-50%);
    width:     max-content;
    bottom:    14px;
    justify-content: center;
    gap:     8px;
    padding: 8px 16px;
  }
  #nav-logo      { font-size:.70rem; letter-spacing:.08em; }
  .nav-link      { font-size:.48rem; letter-spacing:.10em; }
  .nav-cta-pill  { font-size:.48rem; letter-spacing:.08em; padding:5px 11px; }
  /* Skip button dentro il mockup YouTube — nascosto su mobile */
  .skip-yt       { display: none !important; }
}
#nav-progress-ring{
  position:absolute; inset:-3px; border-radius:50px;
  background: conic-gradient(var(--water) var(--p,0%), transparent 0%);
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #fff calc(100% - 2px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #fff calc(100% - 2px));
  pointer-events:none; opacity:.3;
}

/* Variante testo p5-sub: desktop mostra la versione lunga, mobile quella corta */
.p5-sub-mob  { display: none; }
.p5-sub-desk { display: inline; }
.scroll-section{ position:relative; }
.sticky-wrap{
  position:sticky; top:0; width:100vw; height:100vh; overflow:hidden;
}

/* ════════════════════════════════
   SEC 1 — HERO / SKIP BUTTON
════════════════════════════════ */
#sec1{ height:500vh; overflow-x: clip; } /* clip: blocca scroll X senza creare nuovo scroll container (GSAP safe) */
/* i prodotti zoomano OLTRE i bordi del viewport: non clippare il wrapping sticky */
#sec1 .sticky-wrap{ overflow:visible; }
#hero-bg{
  position:absolute; inset:0;
  background: radial-gradient(ellipse 80% 70% at 50% 50%, #0A1628 0%, var(--deep) 70%);
}

/* ═══ ADS SEQUENCE — 3 piattaforme × 4s ═══ */
#ads-wrap{ position:absolute; inset:0; z-index:10; }
.ad-overlay{
  position:absolute; inset:0; display:none;
}
.ad-overlay.active{
  display:flex;
  animation: ad-fadein .3s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes ad-fadein{ from{opacity:0} to{opacity:1} }

/* ─── PLATFORM LABEL (badge comune) ─── */
.plat-label{
  position:absolute; top:18px; left:18px; z-index:20;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  background:rgba(0,0,0,.55); color:rgba(255,255,255,.5);
  padding:4px 10px; border-radius:3px;
  backdrop-filter:blur(6px);
}

/* ══════════ YOUTUBE AD ══════════ */
.ad-yt{
  background:#0f0f0f;
  align-items:center;
  justify-content:center;
}
/* Monitor PC — schermo nello schermo */
.yt-monitor{
  display:flex; flex-direction:column; align-items:center;
  filter: drop-shadow(0 28px 70px rgba(0,0,0,.9));
}
.yt-screen{
  width:min(860px,84vw);
  background:#0f0f0f;
  border:10px solid #1c1c1e;
  border-bottom:20px solid #1c1c1e;
  border-radius:8px 8px 0 0;
  overflow:hidden;
  position:relative;
}
.yt-monitor-stand{
  width:26%; height:16px; background:#1e1e1e;
  border-radius:0 0 5px 5px;
}
.yt-monitor-base{
  width:44%; height:10px; background:#181818;
  border-radius:0 0 8px 8px;
  border:1px solid #222; border-top:none;
}
.yt-topbar{
  width:100%; display:flex; align-items:center; gap:14px;
  padding:12px 18px 10px; flex-shrink:0;
  background:#0f0f0f;
}
.yt-logo{
  display:flex; align-items:center; gap:8px;
}
.yt-logo-icon{
  display:flex; align-items:center; justify-content:center;
  background:#FF0000; border-radius:5px;
  width:34px; height:24px;
}
.yt-logo-icon svg{ width:16px; height:16px; fill:#fff; }
.yt-logo-text{
  font-family:'YouTube Noto',Roboto,Arial,sans-serif;
  font-size:20px; font-weight:700; color:#fff; letter-spacing:-.5px;
}
.yt-ad-chip{
  margin-left:auto;
  background:#FFD600; color:#0f0f0f;
  font-family:Roboto,Arial,sans-serif; font-size:11px; font-weight:700;
  padding:3px 8px; border-radius:3px; letter-spacing:.04em;
}
/* Video frame — occupa tutto lo schermo del monitor */
.yt-video-frame{
  width:100%; aspect-ratio:16/9;
  background:linear-gradient(140deg,#0d1b2a 0%,#1a2d45 50%,#0d2137 100%);
  position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.yt-video-bottle{
  height:68%; width:auto;
  filter:drop-shadow(0 0 30px rgba(0,196,240,.35)) brightness(.9);
  opacity:.9;
}
.yt-video-player{
  position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;
}
.yt-video-badge{
  position:absolute; bottom:8px; left:10px;
  font-family:Roboto,Arial,sans-serif; font-size:11px; font-weight:500;
  background:rgba(0,0,0,.72); color:#aaa;
  padding:2px 7px; border-radius:2px;
}
.yt-progress{
  position:absolute; bottom:0; left:0; right:0;
  height:3px; background:rgba(255,255,255,.12);
}
.yt-progress-fill{
  height:100%; background:#FF0000;
  animation:yt-prog 4s linear forwards;
}
@keyframes yt-prog{ from{width:0%} to{width:100%} }
/* skip button YouTube — dentro il video frame */
.yt-skip-anchor{
  position:absolute; bottom:48px; right:0; z-index:15;
}
.skip-yt{
  display:flex; align-items:stretch;
  cursor:pointer; user-select:none;
  font-family:Roboto,Arial,sans-serif;
  transform-origin:right center;
}
.skip-yt .ct-yt{
  background:rgba(6,6,6,.96);
  color:rgba(255,255,255,.5);
  padding:13px 16px;
  font-size:13px; min-width:26px; text-align:center;
  font-family:'JetBrains Mono',monospace;
  border-right:1px solid rgba(255,255,255,.07);
}
.skip-yt .label-yt{
  background:rgba(22,22,22,.96);
  color:#ddd; padding:13px 22px 13px 14px;
  display:flex; align-items:center; gap:10px;
  font-size:14px; transition:background .15s;
}
.skip-yt:hover .label-yt{ background:rgba(50,50,50,.98); }
.skip-yt svg{ width:20px; height:20px; fill:#ddd; }
.no-msg-yt,.no-msg-ig,.no-msg-tt{ display:none; }
/* yt bottombar */
.yt-bottom{
  width:100%; background:#0f0f0f;
  padding:10px 14px; display:flex; align-items:center; gap:14px; flex-shrink:0;
}
.yt-btn-icon{ width:24px; height:24px; fill:none; stroke:#fff; stroke-width:2; opacity:.6; }
.yt-channel{ font-family:Roboto,Arial,sans-serif; font-size:13px; color:#aaa; margin-left:4px; }

/* ══════════ INSTAGRAM AD ══════════ */
.ad-ig{
  background:var(--deep);
  align-items:center; justify-content:center;
}
/* Phone wrapper — stesse logiche del monitor YT */
.ig-phone-wrap{
  display:flex; flex-direction:column; align-items:center;
  filter: drop-shadow(0 32px 80px rgba(0,0,0,.92));
  position:relative;
}
/* Tasti laterali sinistri (volume) */
.ig-phone-wrap::before{
  content:'';
  position:absolute; left:-18px; top:22%;
  width:4px; height:52px;
  background:#282828; border-radius:3px 0 0 3px;
  box-shadow:0 28px 0 #282828, 0 52px 0 #282828;
}
/* Tasto power destra */
.ig-phone-wrap::after{
  content:'';
  position:absolute; right:-18px; top:30%;
  width:4px; height:64px;
  background:#282828; border-radius:0 3px 3px 0;
}
.ig-phone-frame{
  border:12px solid #1c1c1e;
  border-radius:46px;
  overflow:hidden;
  position:relative;
  background:#1c1c1e;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
}
.ig-phone-notch{
  width:110px; height:26px; background:#1c1c1e;
  border-radius:0 0 18px 18px;
  margin:0 auto;
  position:relative; z-index:10;
}
.ig-card{
  width:min(410px,82vw);
  background:#fff;
  border-radius:0;
  display:flex; flex-direction:column;
  overflow:hidden;
  max-height:calc(88vh - 80px);
}
.ig-header{
  display:flex; align-items:center; gap:10px;
  padding:11px 12px; flex-shrink:0;
}
.ig-avatar-ring{
  width:36px; height:36px; border-radius:50%; flex-shrink:0; padding:2px;
  background:conic-gradient(#f9ce34, #ee2a7b 40%, #6228d7 70%);
}
.ig-avatar-inner{
  width:100%; height:100%; border-radius:50%;
  border:2px solid #fff;
  background:linear-gradient(135deg,#00C4F0,#0050a0);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--clash); font-size:9px; font-weight:700; color:#fff; letter-spacing:.04em;
}
.ig-userinfo{ flex:1; line-height:1.3; }
.ig-name{ font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:13px; font-weight:600; color:#262626; }
.ig-sponsored{ font-family:-apple-system,BlinkMacSystemFont,sans-serif; font-size:11px; color:#8e8e8e; }
.ig-dots{ margin-left:auto; font-size:22px; color:#262626; line-height:1; padding:0 4px; cursor:default; }
/* post image */
.ig-post-image{
  width:100%; aspect-ratio:1/1; background:linear-gradient(155deg,#dff0f7 0%,#a8d9ef 60%,#7bc5e8 100%);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative;
}
.ig-post-bottle{ display:none; }
.ig-post-tetra{
  position:static;
  height:72%; width:auto; opacity:1;
  filter:drop-shadow(0 8px 22px rgba(0,80,120,.32));
}
.ig-post-video{
  position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;
}
/* bottom row */
.ig-bottom{ padding:10px 12px 6px; flex-shrink:0; }
.ig-action-row{ display:flex; gap:14px; align-items:center; margin-bottom:7px; }
.ig-icon{ width:22px; height:22px; fill:none; stroke:#262626; stroke-width:1.8; }
.ig-icon-fill{ width:22px; height:22px; fill:#262626; stroke:none; }
.ig-save{ margin-left:auto; }
.ig-likes{ font-family:-apple-system,BlinkMacSystemFont,sans-serif; font-size:13px; font-weight:600; color:#262626; margin-bottom:5px; }
.ig-caption{ font-family:-apple-system,BlinkMacSystemFont,sans-serif; font-size:13px; color:#262626; margin-bottom:8px; }
.ig-caption strong{ font-weight:700; }
.ig-cta-btn{
  display:block; width:100%; text-align:center;
  background:#efefef; border-radius:4px;
  font-family:-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:13px; font-weight:600; color:#262626;
  padding:8px 0; margin-bottom:10px; text-decoration:none;
}
.ig-skip-row{
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
  padding:8px 12px 12px;
  border-top:1px solid #efefef;
  background:#fafafa; flex-shrink:0;
}
.ig-skip-label{ font-family:-apple-system,sans-serif; font-size:11px; color:#8e8e8e; }
.skip-ig{
  display:flex; align-items:center; gap:6px;
  background:transparent; border:1.5px solid #dbdbdb;
  border-radius:4px; padding:6px 13px;
  font-family:-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:13px; font-weight:600; color:#262626;
  cursor:pointer; user-select:none; transition:border-color .15s;
  position:relative;
}
.skip-ig:hover{ border-color:#aaa; }
.ct-ig{ color:#8e8e8e; font-size:11px; font-family:'JetBrains Mono',monospace; }
.ig-progress-bar{
  height:2px; width:100%; background:#efefef;
}
.ig-progress-fill{
  height:100%; background:linear-gradient(90deg,#ee2a7b,#6228d7);
  animation:ig-prog 3s linear forwards;
}
@keyframes ig-prog{ from{width:0%} to{width:100%} }
.no-msg-ig{ display:none; }

/* ══════════ TIKTOK AD ══════════ */
.ad-tt{
  background:#000;
  align-items:center; justify-content:center;
}
.tt-phone-wrap{
  display:flex; flex-direction:column; align-items:center;
  filter: drop-shadow(0 32px 80px rgba(0,0,0,.92));
  position:relative;
}
/* Tasti laterali sinistri */
.tt-phone-wrap::before{
  content:'';
  position:absolute; left:-18px; top:18%;
  width:4px; height:48px;
  background:#1a1a1a; border-radius:3px 0 0 3px;
  box-shadow:0 26px 0 #1a1a1a, 0 52px 0 #1a1a1a;
}
/* Tasto power destra */
.tt-phone-wrap::after{
  content:'';
  position:absolute; right:-18px; top:28%;
  width:4px; height:60px;
  background:#1a1a1a; border-radius:0 3px 3px 0;
}
.tt-phone{
  width:min(300px,52vw);
  height:min(590px,88vh);
  background:#0d0d0d;
  border-radius:44px;
  border:10px solid #1a1a1a;
  position:relative; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  flex-shrink:0;
  transform:translateZ(0);  /* fix overflow:hidden + border-radius su GPU */
  -webkit-transform:translateZ(0);
}
.tt-video-bg{
  position:absolute; inset:0;
  background:linear-gradient(180deg,#05101e 0%,#001018 40%,#030f18 100%);
}
.tt-notch{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:80px; height:18px; background:#0d0d0d; border-radius:0 0 12px 12px; z-index:20;
}
.tt-bottle-wrap{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.tt-bottle-img{
  height:65%; width:auto;
  filter:drop-shadow(0 0 24px rgba(0,196,240,.3)) brightness(.85);
}
/* TikTok sidebar icons */
.tt-sidebar{
  position:absolute; right:10px; top:50%; transform:translateY(-60%);
  display:flex; flex-direction:column; align-items:center; gap:20px; z-index:10;
}
.tt-side-icon{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.tt-side-icon svg{ width:26px; height:26px; fill:#fff; }
.tt-side-icon span{ font-size:9px; color:rgba(255,255,255,.7); font-family:-apple-system,sans-serif; }
/* top row */
.tt-top{
  position:absolute; top:22px; left:14px; right:14px;
  display:flex; align-items:center; justify-content:center; z-index:10;
  gap:0;
}
.tt-top-tab{
  font-family:-apple-system,sans-serif; font-size:13px; color:rgba(255,255,255,.45);
  padding:0 14px;
}
.tt-top-tab.active{ font-weight:700; color:#fff; border-bottom:2px solid #fff; }
.tt-badge-ad{
  position:absolute; top:62px; left:14px;
  background:rgba(255,255,255,.15); backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.22); border-radius:3px;
  font-size:10px; font-family:-apple-system,sans-serif;
  color:rgba(255,255,255,.8); padding:3px 7px; letter-spacing:.05em;
  z-index:10;
}
/* TikTok bottom */
.tt-bottom{
  position:absolute; bottom:0; left:0; right:0; padding:14px 16px 26px;
  background:linear-gradient(to top,rgba(0,0,0,.92) 0%,transparent 100%);
  display:flex; flex-direction:column; gap:8px; z-index:10;
}
.tt-username{ font-family:-apple-system,sans-serif; font-size:13px; font-weight:700; color:#fff; }
.tt-caption{ font-family:-apple-system,sans-serif; font-size:12px; color:rgba(255,255,255,.85); line-height:1.4; }
.tt-skip-row{ display:flex; justify-content:flex-end; position:relative; padding-right:4px; }
.no-msg-tt{ display:none; }
.tt-progress{
  position:absolute; top:0; left:0; right:0; height:2px;
  background:rgba(255,255,255,.1); z-index:20;
}
.tt-progress-fill{
  height:100%; background:linear-gradient(90deg,#fe2c55,#25F4EE);
  animation:tt-prog 4s linear forwards;
}
@keyframes tt-prog{ from{width:0%} to{width:100%} }

/* Pausa progress quando ad non attivo */
.ad-overlay:not(.active) .yt-progress-fill,
.ad-overlay:not(.active) .ig-progress-fill,
.ad-overlay:not(.active) .tt-progress-fill{ animation-play-state:paused; }

/* ─── MESSAGGIO RIFIUTO GLOBALE — fuori da tutti gli overflow ─── */
#global-refuse-msg{
  position:absolute; top:28px; left:50%;
  z-index:300; pointer-events:none; opacity:0;
  font-family:var(--mono); font-size:clamp(.75rem,2vw,1rem);
  letter-spacing:.18em; text-transform:uppercase;
  color:#fff; white-space:nowrap;
  background:rgba(220,0,0,.92); border-radius:4px;
  padding:11px 26px;
  box-shadow: 0 4px 28px rgba(220,0,0,.55), 0 0 0 1px rgba(255,100,100,.3);
}

/* ─── SKIP BUTTON PULSE RING ─── */
@keyframes skip-attention{
  0%  { box-shadow: 0 0 0 0 rgba(255,255,255,.55), 0 0 0 0 rgba(255,255,255,.25); }
  60% { box-shadow: 0 0 0 10px rgba(255,255,255,0), 0 0 0 20px rgba(255,255,255,0); }
  100%{ box-shadow: 0 0 0 0  rgba(255,255,255,0), 0 0 0 0  rgba(255,255,255,0); }
}
@keyframes skip-attention-ig{
  0%  { box-shadow: 0 0 0 0 rgba(100,100,100,.5), 0 0 0 0 rgba(100,100,100,.2); }
  60% { box-shadow: 0 0 0 10px rgba(100,100,100,0),0 0 0 20px rgba(100,100,100,0); }
  100%{ box-shadow: 0 0 0 0  rgba(100,100,100,0),0 0 0 0  rgba(100,100,100,0); }
}

/* ─── YOUTUBE skip: grande e palese ─── */
.skip-yt{
  display:flex; align-items:stretch;
  cursor:pointer; user-select:none;
  font-family:Roboto,Arial,sans-serif;
  transform-origin:right center;
  animation: skip-attention 1.6s ease-out 1.5s infinite;
  border-radius:2px; overflow:hidden;
}
.skip-yt .ct-yt{
  background:rgba(6,6,6,.97);
  color:rgba(255,255,255,.55);
  padding:15px 18px;
  font-size:15px; min-width:30px; text-align:center;
  font-family:'JetBrains Mono',monospace;
  border-right:1px solid rgba(255,255,255,.1);
}
.skip-yt .label-yt{
  background:rgba(22,22,22,.97);
  color:#fff; padding:15px 28px 15px 18px;
  display:flex; align-items:center; gap:12px;
  font-size:16px; font-weight:500;
  transition:background .15s;
  letter-spacing:.01em;
}
.skip-yt:hover .label-yt{ background:rgba(55,55,55,.98); }
.skip-yt svg{ width:22px; height:22px; fill:#fff; }

/* ─── INSTAGRAM skip: rosso acceso fuori dalla card ─── */
.ig-skip-row{
  display:flex; align-items:center; justify-content:flex-end; gap:12px;
  padding:10px 14px 14px;
  border-top:1px solid #efefef;
  background:#fafafa; flex-shrink:0;
}
.ig-skip-label{ font-family:-apple-system,sans-serif; font-size:12px; color:#8e8e8e; }
.skip-ig{
  display:flex; align-items:center; gap:8px;
  background:#000; border:none;
  border-radius:5px; padding:10px 18px;
  font-family:-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:14px; font-weight:700; color:#fff;
  cursor:pointer; user-select:none;
  animation: skip-attention-ig 1.6s ease-out 1.5s infinite;
  transition:background .15s;
}
.skip-ig:hover{ background:#222; }
.ct-ig{ color:rgba(255,255,255,.5); font-size:12px; font-family:'JetBrains Mono',monospace; }

/* ─── TIKTOK skip: grande e luminoso ─── */
.skip-tt{
  display:flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.18); border:2px solid rgba(255,255,255,.7);
  border-radius:4px; padding:11px 20px;
  color:#fff; font-family:-apple-system,sans-serif; font-size:14px; font-weight:700;
  cursor:pointer; user-select:none; backdrop-filter:blur(4px);
  transition:background .15s;
  animation: skip-attention 1.6s ease-out 1.5s infinite;
}
.skip-tt:hover{ background:rgba(255,255,255,.28); }
.ct-tt{ color:rgba(255,255,255,.6); font-size:12px; font-family:'JetBrains Mono',monospace; }

/* ─── FLOATING BANNERS — layer sopra gli ads, pointer-events:none ─── */
#float-banners-layer{
  position:absolute; inset:0; z-index:50; pointer-events:none; overflow:visible;
}
/* i banner normali (testo) non catturano click */
.fb{
  position:absolute; pointer-events:none;
  border-radius:6px;
  padding:10px 32px 10px 14px;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:13px; font-weight:600; color:#fff; line-height:1.35;
  box-shadow:0 8px 32px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
  white-space:nowrap;        /* mai va a capo */
  animation: fb-in .28s cubic-bezier(.22,1,.36,1) forwards;
}
.fb .fb-x{
  position:absolute; top:7px; right:10px;
  font-size:17px; opacity:.65; cursor:default; font-weight:400;
}
@keyframes fb-in{
  from{ opacity:0; transform:translateY(14px) scale(.94); }
  to{   opacity:1; transform:translateY(0)    scale(1); }
}
@keyframes fb-out{
  from{ opacity:1; transform:scale(1); }
  to{   opacity:0; transform:scale(.88); }
}
/* Skip button flottante */
.fb-skip{
  display:flex; align-items:center; gap:8px;
  background:rgba(10,10,10,.92); border:1.5px solid rgba(255,255,255,.18);
  border-radius:3px; padding:10px 20px;
  font-family:Roboto,Arial,sans-serif; font-size:13px; font-weight:500; color:#ccc;
  box-shadow:0 4px 20px rgba(0,0,0,.6);
  white-space:nowrap;
  pointer-events:auto !important;
  cursor:pointer;
}
.fb-skip .fb-skip-count{
  color:rgba(255,255,255,.4); font-family:'JetBrains Mono',monospace;
  font-size:12px; min-width:14px; text-align:center;
}

/* ─── DESKTOP: skip flottanti massicci + animazione aggressiva ─── */
@media (min-width:769px){
  @keyframes fb-in {
    0%   { opacity:0; transform:scale(.45) translateY(24px); }
    62%  { opacity:1; transform:scale(1.09) translateY(-8px); }
    80%  { transform:scale(.95) translateY(4px); }
    100% { opacity:1; transform:scale(1) translateY(0); }
  }
  @keyframes fb-skip-annoy {
    0%,100% { transform:translateX(0) rotate(0); box-shadow:0 8px 40px rgba(0,0,0,.8),0 0 0 0 rgba(255,255,255,0); }
    4%  { transform:translateX(-10px) rotate(-2.5deg); }
    8%  { transform:translateX(10px)  rotate(2.5deg); }
    12% { transform:translateX(-7px)  rotate(-1.8deg); }
    16% { transform:translateX(7px)   rotate(1.8deg); }
    20% { transform:translateX(-3px)  rotate(-.8deg); }
    25% { transform:translateX(0)     rotate(0); }
    50% { transform:translateX(0) rotate(0); box-shadow:0 8px 40px rgba(0,0,0,.8),0 0 0 0 rgba(255,255,255,0); }
    58% { transform:translateX(0) rotate(0); box-shadow:0 8px 40px rgba(0,0,0,.8),0 0 30px 8px rgba(255,255,255,.55),0 0 65px 16px rgba(255,255,255,.12); }
    66% { transform:translateX(0) rotate(0); box-shadow:0 8px 40px rgba(0,0,0,.8),0 0 0 0 rgba(255,255,255,0); }
  }
  .fb-skip{
    padding:22px 52px 22px 40px;
    font-size:clamp(18px, 1.6vw, 24px);
    font-weight:600;
    letter-spacing:.02em;
    border-radius:5px;
    border:2px solid rgba(255,255,255,.28);
    background:rgba(8,8,8,.95);
    box-shadow:0 8px 40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06);
    gap:18px;
    backdrop-filter:blur(6px);
    transition:background .15s, border-color .15s;
    animation: fb-skip-annoy 3s ease-in-out .6s infinite;
  }
  .fb-skip:hover{
    background:rgba(30,30,30,.98);
    border-color:rgba(255,255,255,.45);
    box-shadow:0 12px 48px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.12);
    animation-play-state:paused;
  }
  .fb-skip .fb-skip-count{
    font-size:clamp(15px, 1.3vw, 20px);
    min-width:24px;
  }
}
/* AdBlock warning */
.fb-adblock{
  display:flex; align-items:center; gap:10px;
  background:#1a1a1a; border:1.5px solid #FF6B35;
  border-radius:6px; padding:12px 16px;
  font-family:Arial,sans-serif; font-size:12px; color:#eee;
  max-width:290px; box-shadow:0 8px 28px rgba(0,0,0,.7);
}
.fb-ab-icon{ font-size:20px; flex-shrink:0; color:#FF6B35; }
.fb-ab-body{ flex:1; line-height:1.4; }
.fb-ab-body strong{ color:#FF6B35; font-size:13px; display:block; margin-bottom:3px; }
.fb-ab-btn{
  display:block; margin-top:8px; background:#FF6B35; color:#fff;
  border:none; border-radius:3px; padding:5px 12px;
  font-size:11px; font-weight:700; cursor:default;
}
/* Popup modale */
.fb-popup{
  background:#fff; border-radius:8px; padding:18px 20px;
  font-family:-apple-system,BlinkMacSystemFont,sans-serif;
  width:260px; box-shadow:0 12px 48px rgba(0,0,0,.65);
  color:#111;
}
.fb-popup-title{ font-size:14px; font-weight:700; margin-bottom:6px; }
.fb-popup-body{  font-size:12px; color:#555; line-height:1.5; margin-bottom:12px; }
.fb-popup-btns{ display:flex; gap:8px; }
.fb-popup-ok{
  flex:1; background:#1a73e8; color:#fff; border:none;
  border-radius:4px; padding:7px 0; font-size:12px; font-weight:700; cursor:default;
}
.fb-popup-no{
  flex:1; background:#f1f1f1; color:#444; border:none;
  border-radius:4px; padding:7px 0; font-size:12px; cursor:default;
}
/* Cookie banner */
.fb-cookie{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  background:#23272f; border:1px solid rgba(255,255,255,.1);
  border-radius:6px; padding:12px 16px;
  font-family:-apple-system,sans-serif; font-size:11px; color:#ccc;
  max-width:320px; line-height:1.5;
  box-shadow:0 6px 24px rgba(0,0,0,.6);
}
.fb-cookie-ok{
  background:#00C4F0; color:#000; border:none;
  border-radius:3px; padding:5px 12px;
  font-size:11px; font-weight:700; cursor:default; white-space:nowrap;
}
.fb-cookie-no{
  background:transparent; color:#aaa; border:1px solid rgba(255,255,255,.2);
  border-radius:3px; padding:5px 10px;
  font-size:11px; cursor:default; white-space:nowrap;
}

/* Particles */
#skip-particles{ position:absolute; inset:0; pointer-events:none; z-index:9; }

/* Hero bottles */
#hero-bottles{
  position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center;
  gap: 8vw; padding-bottom:8vh; z-index:5; opacity:0;
  overflow:visible;          /* lascia che i prodotti escano dal box durante lo zoom */
}
#bottle-blur-wrap{
  position:relative;
  height: clamp(220px,40vh,520px);
  flex-shrink:0;
  will-change:transform;
  transform-origin: bottom center;  /* cresce verso l'alto/primo piano */
}
#hero-bottle-img{
  height:100%; width:auto;
  display:block;
  filter: drop-shadow(0 0 60px rgba(0,196,240,.35));
}
#hero-bottle-blur{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  height:100%; width:auto;
  pointer-events:none;
  will-change:opacity;
}
#tetra-blur-wrap{
  position:relative;
  height: clamp(200px,36vh,480px);
  flex-shrink:0;
  will-change:transform;
  transform-origin: bottom center;
}
#hero-tetra-img{
  height:100%; width:auto;
  display:block;
  filter: drop-shadow(0 0 60px rgba(0,196,240,.25));
}
#hero-tetra-blur{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  height:100%; width:auto;
  pointer-events:none;
  will-change:opacity;
}

/* Hero headline */
#hero-text{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; z-index:6;
  pointer-events:none; text-align:center;
  padding-bottom: 20vh;
  opacity:0;
}
#hero-title{
  font-family: var(--clash); font-size: clamp(2.8rem, 7.5vw, 9rem);
  font-weight:700; line-height:1.0; letter-spacing:-.02em;
  color: var(--ice);
}
#hero-title span{ display:block; overflow:hidden; }
#hero-title em{ display:inline-block; font-style:normal; transform:translateY(110%); will-change:transform; }
#hero-subtitle{
  font-family:var(--mono); font-size: clamp(.7rem,1.4vw,.95rem);
  color:rgba(255,255,255,.38); letter-spacing:.25em; text-transform:uppercase;
  margin-top:28px; opacity:0;
}
#hero-cta{
  display:inline-flex; align-items:center; gap:8px; margin-top:36px;
  background: var(--gold); color: var(--deep);
  font-family:var(--mono); font-size:.75rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  padding:14px 32px; border-radius:50px; text-decoration:none;
  opacity:0; transform:translateY(20px);
  transition: box-shadow .3s, transform .2s;
}
#hero-cta:hover{ box-shadow: 0 0 30px rgba(201,169,110,.55); transform:translateY(-2px); }

/* Scroll cue */
#scroll-cue{
  position:fixed; bottom:80px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  opacity:0; pointer-events:none; z-index:9998;
  transition: opacity .5s;
}
#scroll-cue span{
  font-family:var(--mono); font-size:8px; letter-spacing:.35em;
  text-transform:uppercase; color:rgba(255,255,255,.45);
  white-space:nowrap;
}
.cue-drop{ width:1px; height:38px; background:linear-gradient(to bottom, var(--water), transparent); animation: cue-anim 2s ease-in-out infinite; }
@keyframes cue-anim{ 0%,100%{opacity:.2; transform:scaleY(.5) translateY(-10px);} 50%{opacity:1; transform:scaleY(1) translateY(0);} }

/* ════════════════════════════════
   SEC 2 — DIGITAL DIES
════════════════════════════════ */
#sec2{ height:400vh; }
#sec2 .sticky-wrap{ background: var(--deep); }
#digital-canvas{ position:absolute; inset:0; width:100%; height:100%; }
#sec2-text{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; z-index:5;
  text-align:center; pointer-events:none;
}
#sec2-stats{
  font-family:var(--mono); font-size:clamp(.75rem,1.5vw,1rem);
  color: var(--red); line-height:2.4; opacity:0;
}
#sec2-stats span{ display:block; }
.stat-val{ color:var(--ice); }
#sec2-title{
  font-family:var(--clash); font-size:clamp(2.2rem,5.5vw,7rem);
  font-weight:700; line-height:1.05; letter-spacing:-.02em;
  margin-top:48px; opacity:0;
}
#sec2-title .ln{ display:block; overflow:hidden; }
#sec2-title em{ display:inline-block; font-style:normal; transform:translateY(110%); }

/* ════════════════════════════════
   SEC 3 — 1500 SILHOUETTE
════════════════════════════════ */
#sec3{ height:400vh; }
#sec3 .sticky-wrap{ background: var(--deep); }
#sil-canvas{ position:absolute; inset:0; width:100%; height:100%; }
#sec3-bottle{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  height: clamp(180px,28vh,360px); width:auto;
  filter: drop-shadow(0 0 30px rgba(0,196,240,.4));
  z-index:5; pointer-events:none;
  opacity:0;  /* parte invisibile — ScrollTrigger la porta in sync con scroll */
}
#sec3-text{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end; padding-bottom:10vh;
  z-index:6; text-align:center; pointer-events:none; opacity:0;
}
#sec3-title{
  font-family:var(--clash); font-size:clamp(2rem,5vw,6.5rem);
  font-weight:700; line-height:1.05; letter-spacing:-.02em;
}
#sec3-title .h{ color:var(--water); }
#sec3-sub{
  font-family:var(--mono); font-size:clamp(.65rem,1.2vw,.85rem); letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.35); margin-top:18px;
}

/* ════════════════════════════════
   SEC 4 — SPLIT SCREEN PRODOTTI
════════════════════════════════ */
#sec4{ height:450vh; }
#sec4 .sticky-wrap{ background: var(--deep); isolation: isolate; }

#split-line{
  position:absolute; top:0; bottom:0; left:50%;
  width:1px; background:linear-gradient(to bottom, transparent, var(--water), transparent);
  z-index:10; opacity:0;
}
.split-half{
  position:absolute; top:0; bottom:0; width:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0 6vw; overflow:hidden;
}
#split-left{ left:0; }
#split-right{ right:0; }

.split-product{
  height: clamp(200px,34vh,440px); width:auto;
  filter: drop-shadow(0 0 28px rgba(0,196,240,.22));
  opacity:0;
  transition: none;
  will-change: transform, opacity;
}
.split-label{
  font-family:var(--mono); font-size:9px; letter-spacing:.35em; text-transform:uppercase;
  color:var(--water); margin-bottom:22px; opacity:0;
}
.split-title{
  font-family:var(--clash); font-size:clamp(1.8rem,3.5vw,4.5rem);
  font-weight:700; line-height:1.05; letter-spacing:-.02em;
  opacity:0; transform:translateY(30px);
}
.split-sub{
  font-family:var(--inter); font-size:clamp(.8rem,1.4vw,1rem); font-weight:300;
  color:rgba(255,255,255,.5); line-height:1.8; margin-top:18px;
  opacity:0; max-width:280px;
}
#split-left .split-sub{ text-align:left; }
#split-right .split-sub{ text-align:right; }

/* path animation left */
#bottle-path{
  position:absolute; bottom:0; left:0; right:0; top:0;
  pointer-events:none; opacity:0; z-index:3;
}

/* surface rects right */
.surf-rect{
  position:absolute; border:1px solid rgba(0,196,240,.4);
  border-radius:3px; opacity:0;
  box-shadow: inset 0 0 12px rgba(0,196,240,.08);
}

/* ─── DISTRIBUTION BANNER — sec4 zona morta ─── */
#distribution-banner{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start;
  padding-top:12vh;
  text-align:center; pointer-events:none;
  z-index:15; opacity:0;
}
/* Scanner — linea luminosa orizzontale */
#dist-scanner{
  position:absolute; left:-5%; right:-5%;
  height:1px; top:0%; opacity:0;
  background:linear-gradient(90deg, transparent, var(--water), rgba(0,196,240,.7), var(--water), transparent);
  box-shadow: 0 0 10px 2px rgba(0,196,240,.55), 0 0 36px 6px rgba(0,196,240,.12);
  z-index:20; pointer-events:none;
}
#dist-text-block{
  display:flex; flex-direction:column; align-items:center;
  position:relative; z-index:16;
}
#dist-label{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.35em;
  text-transform:uppercase; color:var(--water); margin-bottom:22px;
  opacity:0;
}
#dist-title{
  font-family:var(--clash); font-size:clamp(3rem,7.5vw,10rem);
  font-weight:700; line-height:1.0; letter-spacing:-.02em;
  color:var(--ice); opacity:0;
}
#dist-sub{
  font-family:var(--inter); font-size:clamp(.85rem,1.5vw,1.05rem);
  font-weight:300; color:rgba(255,255,255,.45); line-height:1.85;
  margin-top:24px; max-width:500px; opacity:0;
}
/* Rete SVG PCB — full-screen, stile circuito neon */
#dist-net-svg{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:14;
  filter: drop-shadow(0 0 3px rgba(0,196,240,.95)) drop-shadow(0 0 10px rgba(0,196,240,.45));
}
.dist-line{
  stroke:var(--water); stroke-width:1.4;
  fill:none; opacity:0;
  stroke-linecap:round; stroke-linejoin:round;
  /* dasharray/offset gestiti solo da JS via style.setProperty */
}
/* Drop icon — sostituisce cerchio PCB su mappa Distribuiamo noi */
.dist-node-dot{
  opacity:0;
  filter: drop-shadow(0 0 6px rgba(0,196,240,.7));
}
/* Dot piccolo alle giunzioni 90° */
.dist-bend-dot{
  fill:var(--water); opacity:0;
}
.dist-node-label{
  font-size:10px; letter-spacing:2.8px; text-transform:uppercase;
  fill:var(--water); opacity:0;
  font-family:'Courier New',monospace;
  text-shadow: 0 0 8px rgba(0,196,240,.8);
}

/* unified bottom row */
#split-bottom{
  position:absolute; top:6vh; bottom:auto; left:0; right:0; text-align:center; z-index:10;
  font-family:var(--mono); font-size:clamp(.65rem,1.1vw,.8rem); letter-spacing:.25em;
  text-transform:uppercase; color:rgba(255,255,255,.22); opacity:0;
}
#split-bottom strong{ color:var(--water); }

/* ════════════════════════════════
   SEC 5 — PARTICLE MORPH
════════════════════════════════ */
#sec5{ height:650vh; }
#sec5 .sticky-wrap{ background:var(--deep); }
#particle-canvas{
  position:fixed; top:0; left:0; width:100%; height:100%;
  pointer-events:none; z-index:2;
}
.p5-text{
  position:absolute; z-index:5; pointer-events:none;
  opacity:0; transition:opacity .05s linear;
}
#p5-text-bottle{
  left:20vw; top:50%; transform:translateY(-50%);
  max-width:35vw;
}
#p5-text-tetra{
  right:4vw; left:auto; top:auto; bottom:10vh; transform:none;
  max-width:55vw; text-align:left;
}
.p5-title{
  font-family:var(--clash); font-size:clamp(2rem,4.8vw,7rem);
  font-weight:700; line-height:1.05; letter-spacing:-.02em; color:var(--ice);
}
.p5-title .accent{ color:var(--water); }
.p5-sub{
  font-family:var(--mono); font-size:clamp(1rem,2vw,1.5rem); letter-spacing:.3em;
  text-transform:uppercase; color:rgba(255,255,255,.38); margin-top:28px;
  white-space:nowrap;
}

/* ════════════════════════════════
   SEC 6 — QR INTERATTIVO
════════════════════════════════ */
#sec6{ height:300vh; }
#sec6 .sticky-wrap{ background:var(--deep); }
#qr-wrap{
  position:absolute; inset:0; display:none; flex-direction:column;
  align-items:center; justify-content:center; gap:40px;
  z-index:2; pointer-events:none;
}
#qr-svg-wrap{
  position:relative; width:clamp(200px,30vmin,360px); height:clamp(200px,30vmin,360px);
  opacity:0; pointer-events:auto;
}
#qr-svg{ width:100%; height:100%; }
#qr-scan-bar{
  position:absolute; left:4%; right:4%; height:2px;
  background:linear-gradient(90deg, transparent, var(--water), transparent);
  box-shadow:0 0 12px var(--water);
  top:4%; opacity:0;
  animation:qrscan 1.8s ease-in-out infinite;
  animation-play-state:paused;
}
@keyframes qrscan{
  0%{top:4%;}50%{top:92%;}100%{top:4%;}
}
#qr-svg-wrap.scanning #qr-scan-bar{ animation-play-state:running; opacity:1; }
#qr-hint{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.25em; text-transform:uppercase;
  color:rgba(255,255,255,.3); opacity:0; text-align:center;
}
#sec6-title{
  font-family:var(--clash); font-size:clamp(2rem,4.5vw,6rem);
  font-weight:700; line-height:1.05; text-align:center; opacity:0;
}
#sec6-title .ln{ display:block; overflow:hidden; }
#sec6-title em{ display:inline-block; font-style:normal; transform:translateY(110%); }

/* QR pulse ring */
#qr-ring{
  position:absolute; inset:-16px; border:1px solid rgba(0,196,240,.25);
  border-radius:8px; animation:qrpulse 2.5s ease-in-out infinite; opacity:0;
}
@keyframes qrpulse{ 0%,100%{transform:scale(1); opacity:.25;} 50%{transform:scale(1.04); opacity:.5;} }

/* ════════════════════════════════
   SEC 8 — CSR / CHARITY
════════════════════════════════ */
#sec8{ height:600vh; }
#sec8 .sticky-wrap{ background:var(--deep); }

/* ── drop fisso durante la caduta ── */
#csr-drop-fixed{
  position:fixed; z-index:6; pointer-events:none;
  width:clamp(52px,7vmin,92px); height:auto;
  left:50%; top:50%;
  opacity:0;
  /* centrato + fuori schermo in alto: gestito da JS scrub */
  transform: translate(-50%, -50%);
  will-change:transform, opacity;
  transform-origin:center center;
}

/* ── canvas ripple fisso ── */
#csr-canvas{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:5;
  opacity:0;
}

/* ── container centrale ── */
#csr-center{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  pointer-events:none; gap:0;
}
#csr-impact-label{
  font-family:var(--mono); font-size:clamp(.55rem,1.1vw,.75rem); letter-spacing:.35em;
  text-transform:uppercase; color:var(--water); opacity:0;
  text-align:center; margin-bottom:14px; display:block;
}
#csr-big-num{
  font-family:var(--clash); font-size:clamp(5.5rem,16vw,18rem);
  font-weight:700; line-height:.9; letter-spacing:-.03em;
  color:var(--ice); text-align:center;
  text-shadow: 0 0 70px rgba(0,196,240,.22), 0 0 160px rgba(0,196,240,.09);
  opacity:0; transform:scale(.82); display:block;
}
@keyframes csrGlow{
  0%,100%{ text-shadow:0 0 70px rgba(0,196,240,.22), 0 0 160px rgba(0,196,240,.09); }
  50%{     text-shadow:0 0 90px rgba(0,196,240,.38), 0 0 200px rgba(0,196,240,.16), 0 0 280px rgba(0,196,240,.06); }
}
#csr-big-num.glow{ animation:csrGlow 3.2s ease-in-out infinite; }
#csr-big-sub{
  font-family:var(--mono); font-size:clamp(.65rem,1.4vw,.9rem); letter-spacing:.25em;
  text-transform:uppercase; color:rgba(255,255,255,.38); opacity:0;
  text-align:center; margin-top:18px; display:block;
}

/* ── catena causale ── */
#csr-chain{
  position:absolute; left:4vw; right:4vw; bottom:22vh; z-index:5;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(6px,1.6vw,24px); pointer-events:none;
}
.csr-node{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  opacity:0; transform:translateY(22px);
}
.cn-val{
  font-family:var(--clash); font-size:clamp(1.7rem,4vw,5rem);
  font-weight:700; color:var(--water); line-height:1;
}
.cn-label{
  font-family:var(--mono); font-size:clamp(.5rem,.85vw,.66rem); letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.36); white-space:nowrap;
}
.csr-arrow{
  font-family:var(--mono); font-size:clamp(.7rem,1.4vw,1.1rem);
  color:rgba(0,196,240,.28); opacity:0; transform:scaleX(0);
  transform-origin:left center; flex-shrink:0; display:inline-block;
}

/* ── messaggio emotivo ── */
#csr-message{
  position:absolute; left:0; right:0; bottom:10vh; z-index:5;
  text-align:center; pointer-events:none;
  display:flex; flex-direction:column; gap:5px;
}
.csr-msg-line{
  font-family:var(--inter); font-size:clamp(.82rem,1.6vw,1.05rem); font-weight:300;
  color:rgba(255,255,255,.42); opacity:0; transform:translateY(10px);
}

/* ── partner badge ── */
#csr-partner{
  position:absolute; bottom:5vh; left:50%; transform:translateX(-50%);
  z-index:5; text-align:center; white-space:nowrap;
  font-family:var(--mono); font-size:clamp(.55rem,.98vw,.72rem); letter-spacing:.18em;
  text-transform:uppercase; opacity:0;
  display:flex; align-items:center; gap:10px;
}
.cp-with{ color:rgba(255,255,255,.22); }
#csr-partner-link{
  color:var(--water); text-decoration:none;
  border-bottom:1px solid rgba(0,196,240,.3); padding-bottom:1px;
  transition:color .25s, border-color .25s;
}
#csr-partner-link:hover{ color:var(--ice); border-color:rgba(0,196,240,.65); }
.cp-where{ color:rgba(255,255,255,.18); }



/* ════════════════════════════════
   SEC 9 — CTA FINALE
════════════════════════════════ */
#sec9{
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:100px 5vw;
  background: var(--deep); position:relative; overflow:hidden; gap:60px;
}
#cta-bottles{
  display:flex; align-items:flex-end; justify-content:center; gap:8vw;
}
.cta-bottle-wrap{
  display:flex; align-items:flex-end; justify-content:center;
  will-change: transform, opacity;
}
#cta-bottle-img{
  height:clamp(240px,38vh,480px); width:auto; display:block;
  filter: drop-shadow(0 12px 60px rgba(0,196,240,.40)) drop-shadow(0 0 22px rgba(0,196,240,.20));
  will-change: transform;
}
#cta-tetra-img{
  height:clamp(210px,32vh,420px); width:auto; display:block;
  filter: drop-shadow(0 10px 50px rgba(0,196,240,.32)) drop-shadow(0 0 18px rgba(0,196,240,.16));
  will-change: transform;
}
/* ── float keyframes ── */
@keyframes ctaFloatA {
  0%,100% { transform: translateY(0px) rotate(0deg); }
  30%      { transform: translateY(-18px) rotate(.9deg); }
  72%      { transform: translateY(-10px) rotate(-.6deg); }
}
@keyframes ctaFloatB {
  0%,100% { transform: translateY(0px) rotate(0deg); }
  38%      { transform: translateY(-15px) rotate(-.8deg); }
  75%      { transform: translateY(-21px) rotate(.7deg); }
}
.is-floating-a { animation: ctaFloatA 4.4s ease-in-out infinite; }
.is-floating-b { animation: ctaFloatB 3.8s ease-in-out infinite; animation-delay: -2.1s; }
#cta-text{ text-align:center; }
#cta-title{
  font-family:var(--clash); font-size:clamp(2.5rem,6vw,8.5rem);
  font-weight:700; line-height:1.0; letter-spacing:-.02em;
}
.cta-row{ display:flex; justify-content:center; gap:18px; margin-top:52px; flex-wrap:wrap; }
.cta-primary{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--gold); color:var(--deep);
  font-family:var(--mono); font-size:.78rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  padding:18px 40px; border-radius:50px; text-decoration:none;
  transition:box-shadow .3s, transform .2s;
}
.cta-primary:hover{ box-shadow:0 0 40px rgba(201,169,110,.55); transform:translateY(-3px); }
.cta-secondary{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.6);
  font-family:var(--mono); font-size:.78rem; font-weight:400; letter-spacing:.15em; text-transform:uppercase;
  padding:18px 40px; border-radius:50px; text-decoration:none;
  transition:border-color .3s, color .3s;
}
.cta-secondary:hover{ border-color:rgba(0,196,240,.4); color:var(--water); }
#cta-badge{
  font-family:var(--mono); font-size:.65rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.18); margin-top:32px; text-align:center;
}

/* ─── FOOTER ─── */
footer{
  border-top:1px solid rgba(255,255,255,.05);
  padding:36px 5vw; display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:20px;
  font-family:var(--mono); font-size:.65rem; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(255,255,255,.18);
}
.footer-links{ display:flex; gap:20px; flex-wrap:wrap; }
.footer-links a{
  color:rgba(255,255,255,.18); text-decoration:none;
  transition:color .25s;
}
.footer-links a:hover{ color:rgba(255,255,255,.45); }

/* ════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — max-width: 640px
   Regola: tocca SOLO layout/font/gap su schermi stretti.
   Non toccare overflow su html/body (rompe GSAP ScrollTrigger).
════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── Cursore: revert su touch device ── */
  body { cursor: auto; }
  #cursor-dot, #cursor-ring { display: none; }

  /* ════ SEC 1 — HERO ════ */

  /* Titolo hero: stesso clamp di sec2-title per consistenza visiva mobile */
  #hero-title { font-size: clamp(2.2rem, 5.5vw, 7rem); }

  /* Riduci il padding-bottom che spinge il testo fuori dallo schermo */
  #hero-text { padding-bottom: 10vh; }

  /* Subtitle: il min del clamp desktop (1.4vw) su 428px = ~6px, invisibile.
     Impostiamo un floor fisso leggibile. */
  #hero-subtitle {
    font-size: .72rem;
    color: rgba(255,255,255,.65);
    letter-spacing: .16em;
    margin-top: 16px;
  }
  #hero-cta      { margin-top: 24px; padding: 13px 28px; font-size: .72rem; }

  /* Bottiglie hero più basse così non invadono il testo */
  #hero-bottles     { gap: 5vw; padding-bottom: 4vh; }
  #bottle-blur-wrap { height: clamp(150px, 28vh, 260px); }
  #tetra-blur-wrap  { height: clamp(130px, 24vh, 230px); }

  /* Instagram ad: riduce l'immagine post (aspect 1:1 → 4:3) per non
     tagliare il tasto "Salta" su iPhone SE (667 px di altezza). */
  .ig-post-image { aspect-ratio: 4 / 3; }

  /* ════ SEC 4 — DISTRIBUZIONE (PCB network SVG) ════ */
  /* Root cause: preserveAspectRatio="none" su viewBox 1000×600.
     Portrait 428×926 → X scala ×0.428, Y scala ×1.543 → tutto allungato.
     Fix: forziamo il <svg> alle sue proporzioni naturali (1000:600 = 0.6).
     Width 100vw → height = 60vw (= 428 × 0.6 ≈ 257px).
     Con dimensioni corrette preserveAspectRatio="none" non distorce nulla.
     Il SVG viene centrato verticalmente; il testo titolo resta in alto. */
  #dist-net-svg {
    width:  100%;
    height: 60vw;     /* 600/1000 = 0.6 → proporzione esatta del viewBox */
    top:    50%;
    left:   0;
    right:  0;
    bottom: auto;
    transform: translateY(-50%);
  }
  /* Scala uniforme risultante = 428/1000 = 0.428.
     10px SVG user units × 0.428 = 4.3px → illeggibile.
     26px × 0.428 ≈ 11px → leggibile, proporzioni corrette. */
  .dist-node-label { font-size: 26px; letter-spacing: 1.8px; }
  .dist-line       { stroke-width: 2.2; }
  .dist-node-dot   { stroke-width: 2.4; }

  /* Titolo distribuzione: clamp(3rem,7.5vw) → min=3rem=48px su 428px → straripa. */
  #dist-title { font-size: clamp(2rem, 7.5vw, 10rem); }

  /* ════ SEC 5 — PARTICLE MORPH ════ */
  /* Bottiglia: la sagoma è nel 55-93% destro dello schermo (bX0=55%).
     Il testo va a SINISTRA della bottiglia, centrato verticalmente. */
  #p5-text-bottle {
    left: 0;
    right: 48%;       /* 52% sinistro — bottiglia occupa il 55%+ destro */
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    text-align: left;
    padding: 0 0 0 5vw;
    max-width: none;
  }
  /* Tetrapack: posizione bassa centrata va bene (confermata dall'utente) */
  #p5-text-tetra {
    right: 0; left: 0; top: auto; bottom: 4vh;
    max-width: none;
    text-align: center; padding: 0 6vw;
  }
  /* Titolo bottiglia particelle: stesso clamp di sec2-title */
  .p5-title { font-size: clamp(2.2rem, 5.5vw, 7rem); line-height: 1.15; }
  /* Subtitle tetrapack mobile: mostra la versione corta a 3 parole */
  .p5-sub-desk { display: none; }
  .p5-sub-mob  { display: inline; }
  .p5-sub   { font-size: .68rem; letter-spacing: .10em; white-space: nowrap; }
  .p5-sub   { white-space: normal; font-size: clamp(.72rem, 2.4vw, .9rem); letter-spacing: .15em; }

  /* ════ SEC 8 — CSR CHAIN ════ */
  /* La catena 4 nodi + 3 frecce con font min=1.7rem supera di ~13 px
     su 375 px. Riduciamo cn-val a 1.5rem (il GSAP anima solo opacity/translateY
     sui figli, non tocca il container). */
  .cn-val { font-size: 1.5rem; }

  /* Partner badge: white-space:nowrap potrebbe sforare su schermi < 380 px */
  #csr-partner {
    white-space: normal; flex-wrap: wrap; justify-content: center;
    text-align: center; left: 5vw; right: 5vw; transform: none;
    font-size: .55rem;
  }

  /* ════ SEC 8 — CSR: messaggio e partner in alto (navbar sovrasta il bottom su mobile) ════ */
  #csr-message {
    bottom: auto;
    top: 8vh;
  }
  #csr-partner {
    bottom: auto;
    top: 18vh;
    left: 5vw; right: 5vw;
    transform: none;
    white-space: normal;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* ════ SEC 9 — CTA FINALE ════ */
  #sec9        { padding: 60px 5vw; gap: 40px; }
  #cta-bottles { gap: 5vw; }
  #cta-bottle-img { height: clamp(180px, 28vh, 320px); }
  #cta-tetra-img  { height: clamp(155px, 24vh, 280px); }
  .cta-row         { gap: 12px; margin-top: 36px; }
  .cta-primary,
  .cta-secondary   { padding: 15px 28px; font-size: .73rem; }

  /* ════ FOOTER ════ */
  /* La navbar fixed (bottom:14px, h≈48px) copre il footer sul fondo.
     Soluzione: stack verticale centrato + padding-bottom che spinge
     il contenuto sopra la navbar (~80px = navbar + margine). */
  footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding-bottom: 82px;   /* libera spazio sopra la navbar fixed */
    padding-top: 28px;
  }
  .footer-links { justify-content: center; gap: 16px; }
  .footer-copy  { order: 2; opacity: .55; }  /* copyright in fondo, links in cima */
  .footer-links { order: 1; }

  /* ════ FLOATING BANNERS MOBILE ════ */
  .fb {
    font-size: 11px;
    padding: 8px 26px 8px 10px;
    white-space: normal;
    max-width: 44vw;
    line-height: 1.3;
  }
  .fb .fb-x { font-size: 14px; top: 5px; right: 7px; }
  .fb-skip {
    font-size: 11px;
    padding: 7px 12px;
    gap: 5px;
    white-space: normal;
    max-width: 44vw;
  }
  .fb-skip .fb-skip-count { font-size: 10px; }
}