/* ═══ MOVIMENTO ══════════════════════════════════════════════════════════
   Tutto quello che c'e' qui e' decorazione: con prefers-reduced-motion si ferma
   (in fondo al file), e senza JavaScript la pagina resta completa. */

/* ── luci di palco dietro la testata ─────────────────────────────────── */
.beams{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;}
.beams i{position:absolute;top:-80px;width:220px;height:1100px;transform-origin:50% 0;
  filter:blur(18px);mix-blend-mode:screen;opacity:.55;
  animation:sweep 14s ease-in-out infinite alternate;}
.beams i:nth-child(1){left:58%;background:linear-gradient(180deg,rgba(229,72,77,.35),transparent 70%);
  clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);--a:-24deg;--b:-6deg;}
.beams i:nth-child(2){left:72%;background:linear-gradient(180deg,rgba(224,161,44,.28),transparent 72%);
  clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);--a:10deg;--b:28deg;animation-duration:17s;}
.beams i:nth-child(3){left:86%;background:linear-gradient(180deg,rgba(122,162,200,.26),transparent 70%);
  clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);--a:18deg;--b:-4deg;animation-duration:12s;}
.beams i:nth-child(4){left:20%;background:linear-gradient(180deg,rgba(63,185,80,.14),transparent 65%);
  clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);--a:-14deg;--b:8deg;animation-duration:19s;opacity:.4;}
@keyframes sweep{from{transform:rotate(var(--a));}to{transform:rotate(var(--b));}}
.hero{isolation:isolate;}
.hero .wrap{z-index:1;}
@media(max-width:700px){.beams i{width:140px;}.beams i:nth-child(4){display:none;}}

/* ── la parola che cambia nel titolo ─────────────────────────────────── */
.rot{display:inline-grid;vertical-align:bottom;overflow:hidden;padding-bottom:.24em;margin-bottom:-.24em;
  transition:width .55s cubic-bezier(.7,0,.2,1);}
.rot-w{grid-area:1/1;justify-self:start;white-space:nowrap;opacity:0;transform:translateY(105%);
  transition:opacity .45s ease,transform .55s cubic-bezier(.7,0,.2,1);
  background:linear-gradient(92deg,#ff8a8d 0%,#e5484d 40%,#e0a12c 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.rot-w.on{opacity:1;transform:none;}
.rot-w.out{opacity:0;transform:translateY(-105%);}

/* ── la spia accanto all'occhiello ───────────────────────────────────── */
.eyebrow .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--rec);
  margin-right:10px;vertical-align:1px;box-shadow:0 0 0 0 rgba(229,72,77,.6);animation:pulse 2s infinite;}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(229,72,77,0);}100%{box-shadow:0 0 0 0 rgba(229,72,77,0);}}

/* ── il ticker ───────────────────────────────────────────────────────── */
.ticker{border-bottom:1px solid var(--line-soft);background:var(--surface);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.ticker-in{display:flex;width:max-content;align-items:center;gap:26px;padding:18px 0;
  animation:crawl 60s linear infinite;}
.ticker:hover .ticker-in{animation-play-state:paused;}
.ticker span{font-family:var(--cond);font-weight:600;font-size:24px;letter-spacing:.03em;color:var(--dim);
  white-space:nowrap;}
.ticker i{font-style:normal;font-size:8px;color:var(--rec);opacity:.7;}
.ticker i:nth-of-type(3n+2){color:var(--live);}
.ticker i:nth-of-type(3n){color:var(--arm);}
@keyframes crawl{to{transform:translateX(-50%);}}

/* ── la luce che segue il mouse ──────────────────────────────────────── */
.pt,.pack,.rig,.contact,.core,.case-flow{position:relative;}
.pt::after,.pack::after,.rig::after,.contact::after,.core::after,.case-flow::after{content:"";position:absolute;inset:0;
  pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.06),transparent 60%);}
.pt:hover::after,.pack:hover::after,.rig:hover::after,.contact:hover::after,.core:hover::after,.case-flow:hover::after{opacity:1;}
.pack:hover{transform:translateY(-4px);box-shadow:0 24px 50px -24px rgba(0,0,0,.9);}
.pack.k-live:hover{box-shadow:0 24px 60px -28px rgba(63,185,80,.35);}
.pack.k-arm:hover{box-shadow:0 24px 60px -28px rgba(224,161,44,.35);}
.pack.k-rec:hover{box-shadow:0 24px 60px -28px rgba(229,72,77,.35);}

/* ── l'illustrazione della testata si raddrizza scorrendo ────────────── */
.hero .shot{transform:perspective(1800px) rotateX(calc(var(--tilt,0) * 14deg)) scale(calc(1 - var(--tilt,0) * .04));
  transform-origin:50% 0;will-change:transform;}

/* ── i riquadri entrano uno dopo l'altro ─────────────────────────────── */
.js .band :is(.points,.packs,.rigs,.terms)>*{
  transition:opacity .6s ease,transform .6s ease,background .2s,border-color .25s,box-shadow .25s;}
.js .band:not(.in) :is(.points,.packs,.rigs,.terms)>*{opacity:0;transform:translateY(22px);}
.js .band.in :is(.points,.packs,.rigs,.terms)>*:nth-child(2){transition-delay:.08s,.08s,0s,0s,0s;}
.js .band.in :is(.points,.packs,.rigs,.terms)>*:nth-child(3){transition-delay:.16s,.16s,0s,0s,0s;}
.js .band.in :is(.points,.packs,.rigs,.terms)>*:nth-child(4){transition-delay:.24s,.24s,0s,0s,0s;}
.js .band.in :is(.points,.packs,.rigs,.terms)>*:nth-child(5){transition-delay:.32s,.32s,0s,0s,0s;}
.js .band.in :is(.points,.packs,.rigs,.terms)>*:nth-child(6){transition-delay:.40s,.40s,0s,0s,0s;}

/* ── il riflesso sui tasti ───────────────────────────────────────────── */
.btn{position:relative;overflow:hidden;}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent);transform:skewX(-20deg);}
.btn:hover::after{animation:sheen .8s ease;}
.btn.go{animation:glow 3s ease-in-out infinite;}
@keyframes sheen{to{left:130%;}}
@keyframes glow{50%{box-shadow:0 0 22px -2px rgba(63,185,80,.35);}}

/* ── la striscia del tally ha una luce che scorre ────────────────────── */
.tally{position:relative;overflow:hidden;}
.tally::after{content:"";position:absolute;top:0;bottom:0;width:160px;left:-160px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:scan 7s ease-in-out infinite;}
@keyframes scan{0%{left:-160px;}60%,100%{left:100%;}}

/* ── il bordo del contatto ha il segnale che scorre ──────────────────── */
.contact{overflow:hidden;}
.contact::before{content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent,#9be8a8,transparent);background-size:100% 50%;
  background-repeat:no-repeat;animation:run 3s linear infinite;}
@keyframes run{from{background-position:0 -100%;}to{background-position:0 200%;}}

/* ── il segnale sui cavi degli esempi ─────────────────────────────────── */
.nf-wires .flow{stroke-dasharray:3 13;animation:nfflow 1.1s linear infinite;}
@keyframes nfflow{to{stroke-dashoffset:-16;}}

@media (prefers-reduced-motion:reduce){
  .nf-wires .flow{animation:none;}
  .beams i,.ticker-in,.eyebrow .dot,.btn.go,.tally::after,.contact::before{animation:none;}
  .hero .shot{transform:none;}
  .js .band :is(.points,.packs,.rigs,.terms)>*{opacity:1;transform:none;transition:none;}
}