/* ============ strato "dettagli" — grana, reveal, cursore, progress ============ */

/* grana finissima su tutto: toglie il piatto digitale */
body::after{
  content:'';position:fixed;inset:-50%;pointer-events:none;z-index:80;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}   16%{transform:translate(-3%,-4%)}
  33%{transform:translate(-6%,2%)}    50%{transform:translate(3%,-5%)}
  66%{transform:translate(5%,3%)}     83%{transform:translate(-2%,6%)}
}

/* barra di avanzamento lettura */
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:90;background:var(--color-accent);
  box-shadow:0 0 14px var(--color-accent);transition:width 90ms linear}

/* sipario d'apertura */
.curtain{position:fixed;inset:0;z-index:95;background:var(--color-void);pointer-events:none;
  transition:opacity 900ms var(--ease-out),visibility 900ms}
.curtain.up{opacity:0;visibility:hidden}
.curtain span{position:absolute;left:50%;top:50%;translate:-50% -50%;font-family:var(--font-display);
  font-weight:700;font-size:var(--text-sm);letter-spacing:.4em;text-transform:uppercase;color:var(--color-ink-3);
  animation:breathe 1.6s var(--ease-in-out) infinite}
@keyframes breathe{0%,100%{opacity:.25}50%{opacity:.8}}

/* reveal allo scroll */
[data-rise]{opacity:0;transform:translateY(26px);filter:blur(6px);
  transition:opacity 900ms var(--ease-out),transform 900ms var(--ease-out),filter 900ms var(--ease-out)}
[data-rise].seen{opacity:1;transform:none;filter:none}
[data-rise][data-delay="1"]{transition-delay:90ms}
[data-rise][data-delay="2"]{transition-delay:180ms}
[data-rise][data-delay="3"]{transition-delay:270ms}

/* titolo hero: lettere che salgono una a una */
.split{display:inline-block;overflow:hidden;vertical-align:bottom}
.split i{display:inline-block;font-style:normal;transform:translateY(105%);
  transition:transform 1000ms var(--ease-out)}
.lit .split i{transform:none}

/* cursore custom sullo stage */
.cursor{position:fixed;z-index:70;width:74px;height:74px;border-radius:50%;pointer-events:none;
  border:var(--rule-hair) solid var(--color-line-2);background:oklch(15% .01 250/.28);backdrop-filter:blur(6px);
  display:grid;place-items:center;font-size:var(--text-2xs);letter-spacing:var(--track-wide);
  text-transform:uppercase;color:var(--color-ink);opacity:0;transform:translate(-50%,-50%) scale(.6);
  transition:opacity 200ms var(--ease-out),transform 260ms var(--ease-out)}
.cursor.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (hover:none){ .cursor{display:none} }
.stage.hascursor,.stage.hascursor *{cursor:none}

/* numeri che contano */
.fig b{font-variant-numeric:tabular-nums}

/* bottoni con luce che passa */
.cta,.acts a.primary{position:relative;overflow:hidden;isolation:isolate}
.cta::after,.acts a.primary::after{
  content:'';position:absolute;inset:0;z-index:-1;transform:translateX(-110%);
  background:linear-gradient(100deg,transparent 20%,oklch(100% 0 0/.5) 50%,transparent 80%)}
.cta:hover::after,.acts a.primary:hover::after{transform:translateX(110%);transition:transform 780ms var(--ease-out)}

/* immagini che entrano da dietro una tendina */
.veiled{position:relative;overflow:hidden}
.veiled::before{content:'';position:absolute;inset:0;z-index:2;background:var(--color-paper);
  transform-origin:right;transition:transform 1000ms var(--ease-in-out)}
.veiled.seen::before{transform:scaleX(0)}

/* rifiniture */
.manifesto h2 .thin{position:relative;display:block}
.hero .title h1{position:relative}
.stage .grip,.room-arrow{will-change:transform}
.plan-box{box-shadow:0 40px 120px oklch(4% 0 0/.5)}
.manifesto-reel video{transition:transform 600ms var(--ease-out)}
.manifesto-reel:hover video{transform:translateY(-6px) scale(1.01)}

@media (prefers-reduced-motion:reduce){
  body::after{animation:none}
  [data-rise]{opacity:1!important;transform:none!important;filter:none!important}
  .split i{transform:none!important}
  .veiled::before{display:none}
  .curtain{display:none}
}