/* ============================================================
   RHINO STUDIO — MANIFESTO v3 · sequenza cinematografica
   Filo conduttore: il foglio · 7 atti continui
   ============================================================ */

:root{
  --ink:#080808;
  --paper:#f4f1ea;
  --paper-pure:#ffffff;
  --accent:#c80000;
  --accent-warm:#d9ae5f;
  --grey:#9a958c;
  --nav-h:96px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%}
html.has-mouse, html.has-mouse body, html.has-mouse *{cursor:none}
html.has-mouse input, html.has-mouse textarea, html.has-mouse select{cursor:text}
body{
  background:var(--paper);color:var(--ink);
  font-family:"Fraunces",Georgia,serif;font-weight:300;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
em{font-style:italic;color:var(--accent)}

/* ---------- SIPARIO ---------- */
#curtain{position:fixed;inset:0;z-index:9999;background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;transition:transform 1.4s var(--ease)}
#curtain.lift{transform:translateY(-100%)}
.curtain-inner{text-align:center;padding:0 24px;max-width:680px}
.curtain-logo{width:clamp(110px,16vw,200px);height:auto;display:block;margin:0 auto;
  animation:pulse 2.2s ease-in-out infinite}
.curtain-line{display:block;margin-top:34px;font-size:clamp(15px,1.8vw,22px);
  letter-spacing:.06em;color:var(--paper);font-style:italic;line-height:1.5}
.curtain-cookies{margin-top:44px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.ck-btn{font-family:"Anton",sans-serif;font-size:14px;letter-spacing:.25em;
  text-transform:uppercase;padding:18px 28px;cursor:pointer;
  background:transparent;color:var(--paper);border:1.5px solid var(--paper);
  transition:.3s var(--ease)}
.ck-btn:hover{background:var(--paper);color:var(--ink)}
.ck-primary{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.ck-primary:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}

.curtain-policy{
  display:inline-block;margin-top:24px;
  font-family:"Anton",sans-serif;font-size:12px;letter-spacing:.35em;
  text-transform:uppercase;
  color:rgba(244,241,234,.7);text-decoration:none;
  border-bottom:1px solid rgba(244,241,234,.4);padding-bottom:4px;
  transition:color .3s var(--ease),border-color .3s var(--ease)
}
.curtain-policy:hover{color:var(--accent);border-bottom-color:var(--accent)}
@keyframes pulse{50%{opacity:.35}}

/* ---------- CURSORE CUSTOM · solo etichetta tipografica ---------- */
#cursor{position:fixed;top:0;left:0;pointer-events:none;z-index:10000;
  width:0;height:0;mix-blend-mode:difference;display:none}
.cur-label{position:absolute;left:18px;top:-10px;
  font-family:"Anton",sans-serif;font-size:13px;letter-spacing:.35em;
  text-transform:uppercase;color:#fff;white-space:nowrap;
  transition:opacity .25s var(--ease)}
#cursor.show{display:block}

/* ---------- PROGRESS BAR + SCENE TAG ---------- */
#progress{position:fixed;top:0;left:0;right:0;height:2px;background:transparent;z-index:910;pointer-events:none}
#progress i{display:block;height:100%;width:0;background:var(--accent);transition:width .15s linear}

/* ---------- NAV ---------- */
/* mix-blend-mode su tutta la nav: solo così il blend si fonde con le sezioni
   sottostanti (un blend su figlio dentro stacking context vede solo il padre).
   #nav è bianco-difference: contenuti bianchi diventano neri su chiaro, bianchi su scuro. */
#nav{position:fixed;top:0;left:0;right:0;z-index:900;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(20px,5vw,64px);
  mix-blend-mode:difference;
  transition:height .3s var(--ease)}
#nav.shrink{height:var(--nav-h)} /* niente shrink: il nav non si riduce */
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
/* logo overlay: FUORI dal mix-blend-mode di #nav, resta sempre rosso */
.brand-overlay{position:fixed;top:0;left:clamp(20px,5vw,64px);
  height:var(--nav-h);display:flex;align-items:center;z-index:951}
.brand-overlay .brand-logo{width:clamp(48px,5vw,68px);height:auto;display:block}

/* placeholder dentro la nav: tiene lo spazio dove starebbe il logo, è invisibile */
.brand-logo-placeholder{display:inline-block;width:clamp(48px,5vw,68px);
  height:clamp(48px,5vw,68px);flex-shrink:0}

.brand-logo{width:clamp(48px,5vw,68px);height:auto;flex-shrink:0}

/* brand: nessun blend qui — è ereditato da #nav intero. Bianco di base. */
.brand-name{font-family:"Anton",sans-serif;font-size:clamp(28px,3.2vw,42px);
  line-height:1;letter-spacing:.04em;color:#fff;display:flex;align-items:baseline;gap:0}
.brand-studio{margin-left:.25em;color:transparent;-webkit-text-stroke:1.5px #fff}
/* niente shrink sul nome brand: resta della stessa dimensione */

/* hamburger: bianco anche qui, così il difference della nav lo rende
   nero su sfondo bianco e bianco su nero — coerente con tutto il resto */
#hamburger{background:none;border:0;cursor:pointer;width:38px;height:28px;position:relative;z-index:950;
  display:block}
#hamburger span{display:block;height:2px;background:#fff;border-radius:2px;
  transition:transform .35s var(--ease),opacity .25s}
#hamburger span+span{margin-top:9px}
#hamburger.active span:nth-child(1){transform:translateY(11px) rotate(45deg)}
#hamburger.active span:nth-child(2){opacity:0}
#hamburger.active span:nth-child(3){transform:translateY(-11px) rotate(-45deg)}

/* il menu desktop scompare — solo hamburger guida tutto */
#nav nav{display:none}

/* il menu si apre come overlay fullscreen, voci centrate orizzontalmente e verticalmente */
#nav nav.open{display:flex;position:fixed;inset:0;background:var(--ink);
  align-items:center;justify-content:center;z-index:940;
  animation:menuFade .4s var(--ease)}
@keyframes menuFade{from{opacity:0}to{opacity:1}}
#nav nav.open ul{list-style:none;display:flex;flex-direction:column;gap:18px;
  text-align:center;align-items:center;justify-content:center;
  margin:0;padding:0;width:100%}
#nav nav.open a{font-family:"Anton",sans-serif;font-size:clamp(32px,5vw,58px);
  letter-spacing:.04em;text-transform:uppercase;color:#fff;text-decoration:none;
  display:inline-block;padding:6px 0;position:relative}
#nav nav.open a:hover{color:var(--accent)}

/* ---------- TIPOGRAFIA COMUNE ---------- */
.act{position:relative;padding:clamp(90px,16vh,180px) clamp(20px,7vw,120px);
  min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.kicker{font-size:clamp(11px,1vw,13px);letter-spacing:.5em;text-transform:uppercase;
  color:var(--ink);margin-bottom:40px;font-family:"Anton",sans-serif}
.big-type{font-family:"Anton",sans-serif;font-weight:400;
  font-size:clamp(40px,9vw,138px);line-height:1.02;text-transform:uppercase;letter-spacing:-.005em;
  padding-top:0.15em}
.big-type span{display:block;padding-top:0.05em}
.big-type .muted{color:var(--grey)}
.big-type .accent{color:var(--accent)}
.big-type.light{color:var(--paper)}
.big-type .accent-warm{color:var(--accent-warm)}
.act-body{margin-top:48px;max-width:46ch;font-size:clamp(16px,1.5vw,21px);line-height:1.65;color:#3a3a3a}
.act-body.light{color:rgba(255,255,255,.78)}

/* split letters — generato da JS.
   IMPORTANTE: non usiamo overflow:hidden sul container split (tagliava accenti su È, À).
   Il "mask" lo facciamo a livello di line-height + initial transform. */
[data-split]{display:inline-block;line-height:1.05}
[data-split] .word{display:inline-block}
[data-split] .ch{display:inline-block;transform:translateY(110%);will-change:transform}

.reveal{opacity:0;transform:translateY(40px)}
.reveal.in{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1s var(--ease)}

/* ============================================================
   ATTO 0 — HERO
   ============================================================ */
.act-hero{align-items:flex-start;text-align:left;overflow:visible}
.hero-grid{position:absolute;inset:0;display:grid;
  grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(4,1fr);
  pointer-events:none;opacity:0;transition:opacity 1.2s var(--ease)}
.hero-grid.in{opacity:1}
.hero-grid span{border-right:1px solid rgba(8,8,8,.05);border-bottom:1px solid rgba(8,8,8,.05)}
.hero-grain{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E")}
.hero-title{font-family:"Anton",sans-serif;font-weight:400;
  font-size:clamp(56px,13vw,200px);line-height:.92;letter-spacing:-.01em;text-transform:uppercase;
  position:relative;z-index:2}
.hero-title .line{display:block}
.hero-title .accent{color:var(--accent);display:inline-block;transform-origin:left center}
.hero-sub{margin-top:44px;font-size:clamp(18px,2.2vw,28px);max-width:34ch;font-style:italic;color:#444;position:relative;z-index:2;line-height:1.45}

/* ============================================================
   ATTO 1 — SGUARDO — 5 strati di parallasse + occhio
   ============================================================ */
.act-sguardo{background:var(--paper);overflow:hidden;position:relative;min-height:100vh}
.layer{position:absolute;pointer-events:none;will-change:transform}
.layer-front{position:relative;z-index:5;pointer-events:auto}

/* foglio bianco fluttuante a destra che sporge tra hero e sguardo */
.hero-floating-paper{
  position:absolute;right:-8%;bottom:-25vh;
  width:42vw;height:75vh;
  background:var(--paper-pure);
  box-shadow:0 40px 100px rgba(0,0,0,.10);
  transform:rotate(4deg);z-index:1;pointer-events:none;will-change:transform
}

/* foglio fantasma in basso a sinistra in Sguardo */
.ghost-paper-2{position:absolute;left:-4%;bottom:6vh;width:38vw;height:48vh;
  background:var(--paper-pure);opacity:.18;transform:rotate(-4deg);z-index:1;
  box-shadow:0 30px 60px rgba(0,0,0,.10)}

/* occhio SVG in basso a destra (sotto la frase "Nessuno decide di guardarti...") */
.sguardo-eye{position:absolute;right:clamp(40px,8vw,140px);bottom:clamp(60px,10vh,140px);
  width:clamp(260px,30vw,460px);z-index:6;pointer-events:none;
  mix-blend-mode:multiply}
.sguardo-eye svg{width:100%;height:auto;display:block}
.sguardo-eye .eye-lid{fill:var(--ink)}
.sguardo-eye .eye-pupil{fill:var(--accent);transition:transform .15s var(--ease)}

/* ============================================================
   ATTO 2 — FOGLIO · pin scene
   ============================================================ */
.act-foglio{position:relative;height:100vh;width:100%;overflow:hidden;background:var(--ink);
  display:flex;align-items:center;justify-content:center}
.foglio-stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
/* il foglio ora occupa TUTTA la larghezza e quasi tutta l'altezza */
.paper{position:relative;width:100vw;height:100vh;
  background:var(--paper-pure);
  transform-origin:center center;overflow:hidden;will-change:transform}

.pen{position:absolute;left:50%;top:50%;width:40px;height:60px;
  transform:translate(-50%,-110%) rotate(-12deg);z-index:5;opacity:0;will-change:transform,opacity;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.25))}

.paper-track{position:absolute;top:0;bottom:0;left:0;
  display:flex;flex-wrap:nowrap;align-items:center;will-change:transform;height:100%}
.paper-row{flex:0 0 auto;width:100vw;max-width:100vw;
  padding:0 clamp(40px,7vw,140px);
  display:flex;flex-direction:column;justify-content:center;gap:30px}
.row-caption{font-size:clamp(14px,1.3vw,18px);line-height:1.5;font-style:italic;color:var(--grey);max-width:30ch}
.row-line{font-family:"Anton",sans-serif;font-weight:400;
  font-size:clamp(40px,9vw,140px);line-height:1.02;
  text-transform:uppercase;letter-spacing:-.01em;color:var(--ink);
  padding-top:.1em}
.row-line.accent{color:var(--accent)}
.row-line .dt-red{color:var(--accent)}
.row-line .dt-black{color:var(--ink)}
.row-line .dot{display:inline-block;width:.18em;height:.18em;border-radius:50%;
  background:var(--accent);margin:0 .1em .1em;vertical-align:baseline}
.row-line .dot-ink{background:var(--ink)}

/* ============================================================
   ATTO 3 — SEGNO / PRESSA TIPOGRAFICA
   ============================================================ */
.act-segno{background:var(--ink);overflow:hidden;position:relative;
  padding:clamp(80px,12vh,140px) clamp(20px,7vw,120px);justify-content:center}
.press-stage{position:absolute;inset:0;z-index:1;pointer-events:none}

.press-sheet{position:absolute;background:var(--paper-pure);
  width:clamp(180px,22vw,300px);height:clamp(240px,30vw,400px);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 30px 80px rgba(0,0,0,.5);will-change:transform,opacity;opacity:0;
  top:-50vh;}
/* posizioni left dei 5 fogli, tutti nella metà sinistra per non coprire UNA STAMPA che sta a destra */
.ps1{left:4%}
.ps2{left:18%}
.ps3{left:32%}
.ps4{left:46%}
.ps5{left:10%}
.ps-word{font-family:"Anton",sans-serif;font-size:clamp(20px,2.4vw,32px);
  letter-spacing:.04em;color:var(--ink);text-transform:uppercase;z-index:2;position:relative}
.ps-stamp{position:absolute;left:50%;top:50%;width:80%;height:60%;
  transform:translate(-50%,-50%) rotate(-12deg);
  border:3px solid var(--accent);opacity:0;
  border-radius:6px}
.press-sheet.stamped .ps-stamp{opacity:.85;animation:stamp .4s var(--ease)}
@keyframes stamp{0%{transform:translate(-50%,-50%) rotate(-12deg) scale(1.4);opacity:0}
  100%{transform:translate(-50%,-50%) rotate(-12deg) scale(1);opacity:.85}}

.segno-text{position:relative;z-index:5;max-width:600px;margin-left:auto}

/* parallax verticale tra Stampa e Firma: nasconde su desktop, vivo su mobile */
.segno-parallax{display:none}
@media(max-width:768px){
  .segno-parallax{
    display:block;position:relative;width:100%;height:70vh;
    margin-top:60px;overflow:hidden;pointer-events:none
  }
  .sp-word{
    position:absolute;font-family:"Anton",sans-serif;
    text-transform:uppercase;letter-spacing:-.01em;line-height:1;
    color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.25);
    white-space:nowrap;will-change:transform
  }
  .sp-1{font-size:16vw;top:6%;left:-8%}
  .sp-2{font-size:22vw;top:22%;right:-15%;color:rgba(217,174,95,.22);-webkit-text-stroke:0}
  .sp-3{font-size:14vw;top:40%;left:5%}
  .sp-4{font-size:20vw;top:58%;right:-6%}
  .sp-5{font-size:18vw;top:76%;left:-10%;color:rgba(200,0,0,.28);-webkit-text-stroke:0}
}

/* ============================================================
   ATTO 4 — VOCE · marquee a X
   ============================================================ */
.act-voce{background:var(--ink);color:var(--paper);overflow:hidden;position:relative}
.stack-stage{position:absolute;inset:0;pointer-events:none;z-index:1}
.stack-paper{position:absolute;background:var(--paper-pure);
  box-shadow:0 30px 60px rgba(0,0,0,.4);will-change:transform}
/* foglio gemello di quello in Sguardo, dietro al testo "La ripetizione..." */
.stack-paper.s3{left:-4%;bottom:8vh;width:38vw;height:42vh;
  transform:rotate(-4deg);opacity:.12}

.act-voce > *{position:relative;z-index:2}
.marquee{margin:30px 0 50px;transform:rotate(-2deg);width:115%;margin-left:-7%}
.marquee-row{display:flex;white-space:nowrap;font-family:"Anton",sans-serif;
  font-size:clamp(44px,9vw,130px);text-transform:uppercase;line-height:1.05}
.marquee-row span{padding-right:.3em;animation:slide 26s linear infinite;color:var(--paper)}
.marquee-row.rev{margin-top:8px}
.marquee-row.rev span{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.55);
  animation-duration:34s;animation-direction:reverse}
@keyframes slide{to{transform:translateX(-25%)}}

/* ============================================================
   ATTO 5 — IN STRADA · treno di affissioni
   ============================================================ */
.act-strada{position:relative;height:100vh;width:100%;overflow:hidden;background:var(--paper-pure);
  display:flex;align-items:center}
.strada-stage{position:relative;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(80px,10vh,120px) clamp(20px,5vw,80px)}
.strada-title{font-family:"Anton",sans-serif;font-weight:400;
  font-size:clamp(40px,8vw,128px);line-height:.96;text-transform:uppercase;letter-spacing:-.005em;
  margin-bottom:40px}
.strada-title span{display:block}
.strada-title .accent{color:var(--accent)}

.strada-track{display:flex;gap:clamp(24px,3vw,60px);will-change:transform;
  margin-top:5px}
.bill{flex:0 0 auto;width:clamp(280px,28vw,440px);height:clamp(360px,46vh,560px);
  background:var(--ink);color:var(--paper);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(24px,2.5vw,40px);position:relative}
.bill-1{background:var(--ink);color:var(--paper)}
.bill-2{background:var(--accent);color:var(--paper)}
.bill-3{background:var(--paper);color:var(--ink);outline:1.5px solid var(--ink);outline-offset:-1.5px}
.bill-4{background:var(--ink);color:var(--accent-warm)}
.bill-5{background:var(--accent-warm);color:var(--ink)}
.bill-no{font-family:"Anton",sans-serif;font-size:14px;letter-spacing:.3em;text-transform:uppercase;opacity:.7}
.bill-headline{font-family:"Anton",sans-serif;font-size:clamp(48px,5vw,84px);line-height:.95;
  letter-spacing:-.01em;text-transform:uppercase}
.bill-sub{font-family:"Fraunces",serif;font-style:italic;font-size:14px;opacity:.85}

.strada-meta{margin-top:30px;font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--grey)}

/* ============================================================
   ATTO 6 — CHIUSURA
   ============================================================ */
.act-close{background:var(--paper-pure);overflow:hidden;position:relative}
.close-papers{position:absolute;inset:0;pointer-events:none;z-index:0}
.cp{position:absolute;background:var(--paper);box-shadow:0 30px 80px rgba(0,0,0,.08);will-change:transform,opacity}
.cp1{width:42vw;height:55vh;left:-15vw;top:20vh;transform:rotate(-10deg)}
.cp2{width:38vw;height:50vh;right:-10vw;top:8vh;transform:rotate(8deg)}
.cp3{width:32vw;height:42vh;right:5vw;bottom:-15vh;transform:rotate(-4deg)}
.cp4{width:28vw;height:36vh;left:5vw;bottom:-8vh;transform:rotate(12deg)}

.act-close > *{position:relative;z-index:2}
.close-title{font-family:"Anton",sans-serif;font-weight:400;
  font-size:clamp(40px,8.5vw,128px);line-height:.98;text-transform:uppercase}
.close-title span{display:block}
.close-title .accent{color:var(--accent)}

.form{margin-top:60px;max-width:560px;width:100%}
.hp{position:absolute;left:-9999px}
.field{position:relative;margin-bottom:30px}
.field input,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1.5px solid var(--ink);
  padding:14px 2px 10px;font-family:"Fraunces",serif;font-size:18px;color:var(--ink);resize:none}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field label{position:absolute;left:2px;top:14px;color:var(--grey);font-size:18px;
  pointer-events:none;transition:.3s var(--ease)}
.field input:focus+label,.field input:not(:placeholder-shown)+label,
.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{
  top:-14px;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.privacy{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:#555;margin:8px 0 36px;cursor:pointer}
.privacy input{margin-top:3px;accent-color:var(--accent)}
.privacy a{border-bottom:1px solid currentColor}
.submit{position:relative;font-family:"Anton",sans-serif;font-size:clamp(20px,2.6vw,30px);
  text-transform:uppercase;letter-spacing:.04em;
  background:var(--ink);color:var(--paper);border:0;cursor:pointer;
  padding:22px 48px;transition:.4s var(--ease);overflow:hidden}
.submit:hover{background:var(--accent);transform:translateY(-3px)}
.submit-stamp{position:absolute;left:50%;top:50%;width:120%;height:140%;
  transform:translate(-50%,-50%) rotate(-8deg) scale(2);
  border:3px solid var(--accent);opacity:0;pointer-events:none;border-radius:8px}
.submit.stamped .submit-stamp{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1);
  transition:transform .3s var(--ease),opacity .3s}

/* ============================================================
   FOOTER · COOKIE
   ============================================================ */
footer{background:var(--ink);color:var(--paper);padding:0 0 48px;position:relative;overflow:hidden}

/* nastro marquee in cima al footer */
.foot-marquee{padding:30px 0;border-bottom:1px solid rgba(255,255,255,.1);overflow:hidden;
  margin-bottom:50px}
.fm-row{display:flex;align-items:center;white-space:nowrap;
  font-family:"Anton",sans-serif;font-size:clamp(28px,4vw,52px);text-transform:uppercase;
  animation:slide 32s linear infinite;letter-spacing:.04em}
.fm-row span{padding:0 .8em}
.fm-row .fm-dot{display:inline-block;width:12px;height:12px;border-radius:50%;
  background:var(--accent);flex:0 0 auto}

/* dashboard live */
.foot-dashboard{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin:0 clamp(20px,5vw,80px) 80px;border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
.fd-col{padding:clamp(24px,3vw,40px);border-right:1px solid rgba(255,255,255,.12);
  display:flex;flex-direction:column;gap:8px}
.fd-col:last-child{border-right:0}
.fd-label{font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.fd-value{font-family:"Anton",sans-serif;font-size:clamp(28px,3.5vw,46px);
  line-height:1.1;letter-spacing:.02em;color:var(--paper);font-variant-numeric:tabular-nums}
.fd-sub{font-size:13px;color:rgba(255,255,255,.6);font-style:italic;margin-top:auto}

.fd-pulse{display:inline-block;width:12px;height:12px;border-radius:50%;
  background:var(--accent);color:var(--accent);
  box-shadow:0 0 0 0 currentColor;
  animation:livePulse 2s ease-in-out infinite;margin-right:10px;vertical-align:middle;
  flex-shrink:0}
@keyframes livePulse{
  0%,100%{box-shadow:0 0 0 0 currentColor;transform:scale(1)}
  50%{box-shadow:0 0 0 12px transparent;transform:scale(1.2)}
}

.foot-mark{font-family:"Anton",sans-serif;font-size:clamp(48px,16vw,220px);
  line-height:.9;letter-spacing:-.02em;text-align:center;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.4);
  margin:0 0 60px;padding:0 clamp(20px,5vw,80px)}

.foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;
  padding:0 clamp(20px,7vw,120px);margin-bottom:60px}
.foot-info{display:flex;gap:60px;flex-wrap:wrap;font-size:15px;line-height:1.7;color:rgba(255,255,255,.75)}
.foot-info a:hover{color:var(--accent)}
.foot-social{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}
.foot-social a{display:inline-flex;align-items:center;gap:10px;
  font-size:13px;letter-spacing:.25em;text-transform:uppercase;
  padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.3);
  transition:.3s var(--ease);color:rgba(255,255,255,.85)}
.foot-social a svg{width:18px;height:18px;flex-shrink:0;display:block}
.foot-social a:hover{color:var(--accent);border-color:var(--accent)}
.foot-copy{font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.35);text-align:center;padding:0 20px}

/* ============================================================
   MOBILE — tutta la coreografia salta
   ============================================================ */
@media(max-width:768px){
  #cursor{display:none!important}

  .act{padding:110px 24px;min-height:auto}
  .sguardo-eye,.ghost-paper,.ghost-paper-2{display:none}

  .act-foglio{height:auto;background:var(--ink);padding:100px 24px}
  .foglio-stage{flex-direction:column}
  .paper{width:100%;height:auto;box-shadow:none;background:transparent;color:var(--paper)}
  .pen{display:none}
  .paper-track{position:static;flex-direction:column;gap:60px;height:auto;transform:none!important}
  .paper-row{width:100%;padding:0;gap:18px;
    opacity:0;transform:translateX(-30px);
    transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .paper-row.in{opacity:1;transform:none}
  .paper-row.in:nth-child(2){transition-delay:.15s}
  .paper-row.in:nth-child(3){transition-delay:.3s}
  .row-line{color:var(--paper);font-size:clamp(38px,11vw,72px)}
  .row-line .dt-red{color:var(--accent)}
  .row-line .dt-black{color:var(--paper)}

  /* STAMPA mobile: nascondiamo i fogli pressa (sostituiti dal parallax verticale qui sotto) */
  .press-stage{display:none}
  .press-sheet{display:none}
  .segno-text{margin:0}

  /* RITMO mobile: galleria scroll-x touch nativa */
  .act-strada{height:auto;padding:80px 0}
  .strada-stage{padding:0 24px 30px}
  .strada-track{margin-top:30px;
    overflow-x:auto;overflow-y:visible;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding:0 24px 20px;gap:18px;
    scrollbar-width:none}
  .strada-track::-webkit-scrollbar{display:none}
  .bill{width:80vw;height:auto;min-height:380px;
    scroll-snap-align:start;
    transform:none !important}
  .bill-headline{font-size:clamp(40px,11vw,64px)}

  /* marquee continua a scorrere anche su mobile, solo più piccolo */
  .marquee{width:115%;margin-left:-7%;transform:rotate(-2deg)}
  .marquee-row{flex-wrap:nowrap;white-space:nowrap;font-size:clamp(34px,9vw,60px)}
  .marquee-row span{animation:slide 22s linear infinite;padding-right:.3em}
  .marquee-row.rev span{animation-duration:30s;animation-direction:reverse}

  /* dashboard footer in colonna */
  .foot-dashboard{grid-template-columns:1fr;margin:0 24px 60px}
  .fd-col{border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}
  .fd-col:last-child{border-bottom:0}
  .foot-grid{flex-direction:column;gap:30px;padding:0 24px}
  .foot-info{gap:30px}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  [data-split] .ch{transform:none!important}
  #curtain,#cursor{display:none!important}
  .hero-grid{opacity:1}
  .ghost-paper,.ghost-paper-2,.sguardo-eye,
  .stack-paper,.press-sheet,.marquee-row span,.paper-track{transform:none!important}
  .act-foglio{height:auto;padding:100px 24px}
  .foglio-stage{flex-direction:column}
  .paper{width:100%;height:auto;transform:none!important}
  .paper-track{position:static;flex-direction:column;gap:60px;height:auto}
  .paper-row{width:100%;padding:0}
  .pen,.press-stage{display:none}
  .act-strada{height:auto}
  .strada-track{flex-wrap:wrap}
  .bill{width:100%;height:auto;min-height:240px}
  .cross-marquee,.marquee{height:auto}
  .marquee-row{flex-wrap:wrap;white-space:normal;font-size:clamp(28px,7vw,52px)}
  .marquee-row span{animation:none!important}
  .press-sheet{opacity:0!important}
}