/* ==========================================================================
   MP Design System v3 · Motion & scroll
   Si animano solo transform, opacity, clip-path, filter, colori.
   Senza JS o con prefers-reduced-motion tutto resta leggibile e statico.
   ========================================================================== */

@keyframes pulse { 0% { box-shadow: 0 0 0 0 currentColor; } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
@keyframes spin { to { rotate: 1turn; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes aurora-drift {
  0%, 100% { translate: 0 0; scale: 1; }
  33% { translate: 4% -3%; scale: 1.08; }
  66% { translate: -3% 2%; scale: 0.96; }
}
@keyframes cue { 0% { transform: scaleY(0); transform-origin: 50% 0; } 45% { transform: scaleY(1); transform-origin: 50% 0; } 55% { transform: scaleY(1); transform-origin: 50% 100%; } 100% { transform: scaleY(0); transform-origin: 50% 100%; } }
@keyframes pill-run { 0% { transform: scaleX(0); } 40%, 78% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes intro-failsafe { to { visibility: hidden; opacity: 0; } }

/* ---------- Gating: niente testo visibile prima dei font (zero CLS da font swap) ---------- */
.js:not(.is-ready) body { visibility: hidden; }
.js:not(.is-ready) .intro { visibility: visible; }

/* ---------- Lenis (smooth scroll opzionale) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- Reveal ---------- */
.js [data-reveal] {
  opacity: 0;
  translate: 0 var(--reveal-distance);
  transition:
    opacity var(--dur-slower) var(--ease-out-expo),
    translate var(--dur-slower) var(--ease-out-expo),
    filter var(--dur-slower) var(--ease-out-expo),
    clip-path var(--dur-epic) var(--ease-out-expo),
    scale var(--dur-epic) var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js [data-reveal="blur"] { filter: blur(12px); translate: 0 12px; }
.js [data-reveal="scale"] { scale: 0.92; translate: 0 0; }
.js [data-reveal="clip"] { opacity: 1; translate: 0 0; clip-path: inset(100% 0 0 0 round var(--radius-lg)); }
.js [data-reveal="clip-x"] { opacity: 1; translate: 0 0; clip-path: inset(0 100% 0 0 round var(--radius-lg)); }
.js [data-reveal].is-in { opacity: 1; translate: 0 0; filter: none; scale: 1; }
.js [data-reveal^="clip"].is-in { clip-path: inset(0 0 0 0 round var(--radius-lg)); }

/* ---------- Split per righe (maschera) ---------- */
.split-line { display: block; clip-path: inset(-0.35em -0.3em -0.14em -0.3em); }
.split-line > span { display: inline-block; }
.split-word { display: inline-block; white-space: nowrap; }
.split-char, .split-atom { display: inline-block; }
.js [data-split]:not([data-split="chars"]) .split-line > span {
  translate: 0 150%;
  rotate: 3deg;
  transform-origin: 0 100%;
  transition: translate var(--dur-epic) var(--ease-out-expo), rotate var(--dur-epic) var(--ease-out-expo);
  transition-delay: calc(var(--li, 0) * var(--stagger) + var(--delay, 0ms));
}
.js [data-split]:not([data-split="chars"]).is-in .split-line > span { translate: 0 0; rotate: 0deg; }

/* ---------- Split per caratteri: flip 3D ---------- */
.js [data-split="chars"] :is(.split-char, .split-atom) {
  opacity: 0;
  transform: perspective(700px) translateY(0.5em) rotateX(-95deg);
  transform-origin: 50% 100%;
  transition: transform 1.3s var(--ease-out-expo), opacity 0.5s var(--ease-standard);
  transition-delay: calc(var(--ci, 0) * 26ms + var(--delay, 0ms));
}
.js [data-split="chars"].is-in :is(.split-char, .split-atom) { opacity: 1; transform: none; }

/* ---------- Tipografia cinetica: peso variabile per prossimità del cursore ----------
   Box dei caratteri a larghezza fissa (JS), quindi il peso cambia senza layout shift. */
[data-kinetic] .split-char {
  font-weight: calc(var(--kw-base, 800) - var(--f, 0) * (var(--kw-base, 800) - var(--kw-min, 150)));
  translate: var(--dx, 0em) 0;
  color: color-mix(in oklab, var(--accent) calc(var(--f, 0) * 100%), currentColor);
}
[data-kinetic].is-measuring .split-char { transform: none !important; translate: none !important; transition: none !important; font-weight: var(--kw-base, 800) !important; }
[data-kinetic].is-measuring.is-min .split-char { font-weight: var(--kw-min, 150) !important; }
.is-fitting, .is-fitting * { transition: none !important; }

/* ---------- Scrub: parole che si accendono con lo scroll ---------- */
[data-scrub] .scrub-word { opacity: calc(0.14 + var(--w, 0) * 0.86); }
[data-scrub] .scrub-word.is-accent { color: var(--accent); }

/* ---------- Parallax / drift / scale ---------- */
[data-parallax] { translate: 0 var(--parallax, 0px); }
.drift { translate: calc((var(--p, 0.5) - 0.5) * var(--drift, 0) * 100vw) 0; }
[data-scroll-scale] {
  scale: calc(0.86 + var(--p, 0) * 0.14);
  border-radius: calc(var(--radius-xl) * (1 - var(--p, 0) * 0.5));
  transform-origin: 50% 0;
}

/* ---------- Aurora (gradiente radiale: animazione solo sul compositor) ---------- */
.aurora { position: absolute; inset: -20% -10% auto; height: 120%; z-index: -1; pointer-events: none; }
.aurora span { position: absolute; border-radius: 50%; will-change: translate, scale; animation: aurora-drift 18s var(--ease-in-out) infinite; }
.aurora span:nth-child(1) { width: 60vw; height: 60vw; left: -12%; top: -8%; background: radial-gradient(closest-side, rgb(248 192 0 / 0.24), transparent); }
.aurora span:nth-child(2) { width: 70vw; height: 70vw; right: -18%; top: -18%; background: radial-gradient(closest-side, rgb(0 126 167 / 0.5), transparent); animation-delay: -6s; animation-duration: 22s; }
.aurora span:nth-child(3) { width: 50vw; height: 50vw; left: 28%; top: 22%; background: radial-gradient(closest-side, rgb(34 181 226 / 0.2), transparent); animation-delay: -12s; }

/* ---------- Cursore contestuale (scala, mai width/height: zero CLS) ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: var(--z-cursor); pointer-events: none; mix-blend-mode: difference; transition: opacity var(--dur-base); }
.cursor.is-hidden { opacity: 0; }
.cursor[data-state="label"] { mix-blend-mode: normal; }
.cursor__shape {
  position: absolute;
  left: -48px;
  top: -48px;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #fff;
  scale: 0.125;
  transition: scale var(--dur-slow) var(--ease-out-expo), background-color var(--dur-base);
}
.cursor[data-state="hover"] .cursor__shape { scale: 0.6; }
.cursor[data-state="label"] .cursor__shape { scale: 1; background: var(--accent); }
.cursor__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-on-accent); opacity: 0; transition: opacity var(--dur-fast); }
.cursor[data-state="label"] .cursor__label { opacity: 1; transition-delay: 120ms; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }
@media (hover: hover) and (pointer: fine) { [data-cursor] { cursor: none; } }

/* ---------- Magnetic / tilt / follow ---------- */
[data-magnetic] { translate: var(--mgx, 0px) var(--mgy, 0px); transition: translate var(--dur-slow) var(--ease-spring); }
[data-magnetic].is-magnet { transition-duration: var(--dur-fast); transition-timing-function: var(--ease-standard); }
[data-tilt] { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform var(--dur-slow) var(--ease-out-expo); }
.caret::after { content: "▍"; color: var(--accent); animation: blink 1s steps(1) infinite; margin-left: 2px; }

/* ---------- Intro: sipario con tempo di caricamento reale ---------- */
.intro { position: fixed; inset: 0; z-index: 2000; animation: intro-failsafe 0s 6s forwards; }
html:not(.js) .intro { display: none; }
.intro__panel { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--navy-950); transition: translate var(--dur-slower) var(--ease-in-out-expo); }
.intro__panel--top { top: 0; }
.intro__panel--bottom { bottom: 0; }
.intro__content { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-base); }
.intro.is-counting .intro__content { opacity: 1; }
.intro__label { position: absolute; top: var(--space-6); left: var(--gutter); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-mute); }
.intro__meta { position: absolute; top: var(--space-6); right: var(--gutter); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--accent); }
.intro__count {
  position: absolute;
  left: var(--gutter);
  top: calc(100% - 0.82em - var(--space-7));
  font-family: var(--font-display);
  font-size: clamp(6rem, 24vw, 24rem);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.intro__bar { position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--space-6); height: 2px; background: var(--grad-signal); transform-origin: 0 50%; transform: scaleX(var(--ip, 0)); }
.intro.is-leaving { pointer-events: none; }
.intro.is-leaving .intro__content { opacity: 0; transition-duration: var(--dur-fast); }
.intro.is-leaving .intro__panel--top { translate: 0 -100%; }
.intro.is-leaving .intro__panel--bottom { translate: 0 100%; }

/* ---------- Flood: la pagina si allaga di giallo (clip circolare legato allo scroll) ---------- */
.flood { position: relative; height: 270vh; }
.flood__sticky { position: sticky; top: 0; height: 100vh; overflow: clip; }
.flood__layer {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: var(--space-6);
  padding: calc(var(--nav-h) + var(--space-5)) var(--gutter) var(--space-9);
  background: var(--accent);
  color: var(--navy-950);
  clip-path: circle(calc(clamp(0, var(--p, 0) / 0.26, 1) * 75%) at 50% 50%);
}
.flood__title { font-family: var(--font-display); font-size: clamp(3.4rem, 0.5rem + 13vw, 15rem); font-weight: 800; line-height: 0.82; letter-spacing: -0.045em; text-transform: uppercase; }
.flood__line { display: block; clip-path: inset(-0.35em -0.3em -0.1em -0.3em); }
.flood__line > span { display: block; translate: 0 calc((1 - clamp(0, (var(--p, 0) - var(--at, 0)) / 0.1, 1)) * 150%); }
.flood__line:nth-child(even) { text-align: right; }
.flood__title .t-accent { color: var(--navy-950); }
.flood__star { position: absolute; right: var(--gutter); top: calc(var(--nav-h) + var(--space-7)); width: clamp(70px, 10vw, 150px); rotate: calc(var(--p, 0) * 540deg); }
.flood__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; opacity: clamp(0, (var(--p, 0) - 0.72) / 0.08, 1); }

/* ---------- Zoom portale: si vola dentro la O ---------- */
.zoom { position: relative; height: 340vh; }
.zoom__sticky { position: sticky; top: 0; height: 100vh; overflow: clip; display: grid; place-items: center; }
.zoom__word {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(6rem, 27vw, 30rem);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  perspective: 1200px;
  transform: translate(calc(var(--zdx, 0px) * var(--zt, 0)), calc(var(--zdy, 0px) * var(--zt, 0))) scale(var(--zs, 1));
}
.zoom__flip { display: inline-grid; justify-items: center; transform-style: preserve-3d; rotate: x calc(clamp(0, (var(--p, 0) - 0.07) / 0.13, 1) * -180deg); }
.zoom__face { grid-area: 1 / 1; backface-visibility: hidden; }
.zoom__face--back { transform: rotateX(180deg); color: var(--accent); }
.zoom__o { position: relative; isolation: isolate; display: inline-block; }
.zoom__portal { position: absolute; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, #fff8e0, var(--yellow-400) 34%, var(--cyan-500) 72%, var(--navy-700)); }
.baseline-probe { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.zoom__caps { position: absolute; left: 0; right: 0; bottom: 14vh; display: grid; justify-items: center; font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: var(--tracking-caps); text-transform: uppercase; opacity: calc(1 - clamp(0, (var(--p, 0) - 0.28) / 0.06, 1)); }
.zoom__cap { grid-area: 1 / 1; }
.zoom__cap--a { color: var(--fg-mute); opacity: calc(1 - clamp(0, (var(--p, 0) - 0.08) / 0.06, 1)); }
.zoom__cap--b { color: var(--accent); opacity: clamp(0, (var(--p, 0) - 0.12) / 0.06, 1); }
.zoom__hint { position: absolute; top: calc(var(--nav-h) + var(--space-7)); left: 0; right: 0; text-align: center; opacity: calc(1 - clamp(0, (var(--p, 0) - 0.2) / 0.08, 1)); }
.zoom__after {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-5);
  padding: var(--gutter);
  text-align: center;
  color: var(--navy-950);
  opacity: clamp(0, (var(--p, 0) - 0.8) / 0.1, 1);
  scale: calc(0.9 + clamp(0, (var(--p, 0) - 0.8) / 0.16, 1) * 0.1);
  pointer-events: none;
}
.zoom__after h2 { font-family: var(--font-display); font-size: clamp(2.6rem, 1rem + 6.5vw, 8rem); font-weight: 800; line-height: 0.86; letter-spacing: -0.045em; text-transform: uppercase; max-width: 13ch; }
.zoom__after .t-accent { color: var(--navy-950); }
.zoom__after .t-eyebrow { color: var(--navy-800); }
.zoom__after .t-eyebrow::before { background: var(--navy-950); box-shadow: none; }

/* ---------- View Transitions tra pagine ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: var(--dur-base) var(--ease-in) both vt-out; }
::view-transition-new(root) { animation: var(--dur-slow) var(--ease-out-expo) both vt-in; }
@keyframes vt-out { to { opacity: 0; translate: 0 -16px; filter: blur(6px); } }
@keyframes vt-in { from { opacity: 0; translate: 0 24px; filter: blur(8px); } }

/* ---------- Scroll-driven CSS nativo dove supportato ---------- */
@supports (animation-timeline: scroll()) {
  .scroll-progress { animation: grow-x linear both; animation-timeline: scroll(root); }
  @keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ---------- Reduced motion: stati finali, set piece statici ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .js [data-reveal], .js [data-split] .split-line > span, .js [data-split] :is(.split-char, .split-atom) { opacity: 1; translate: none; rotate: none; filter: none; clip-path: none; scale: 1; transform: none; }
  [data-scrub] .scrub-word { opacity: 1; }
  .drift, [data-parallax], [data-magnetic], [data-scroll-scale], .stack-cards__item, .footer__wordmark, .footer__marquee { translate: none !important; scale: 1 !important; filter: none !important; }
  .aurora span, .orb__ring { animation: none; }
  .cursor, .intro { display: none; }
  .hscroll { height: auto; }
  .hscroll__sticky { position: static; height: auto; overflow-x: auto; padding-block: var(--space-7); }
  .hscroll__track { translate: none; }
  .flood, .zoom { height: auto; }
  .flood__sticky, .zoom__sticky { position: relative; height: auto; min-height: 100vh; }
  .flood__layer { position: relative; clip-path: none; min-height: 100vh; }
  .flood__line > span { translate: none; }
  .flood__meta { opacity: 1; }
  .zoom__sticky { background: radial-gradient(closest-side, #fff8e0, var(--yellow-400) 40%, var(--cyan-500)); }
  .zoom__word, .zoom__caps, .zoom__hint { display: none; }
  .zoom__after { position: relative; opacity: 1; scale: 1; min-height: 100vh; }
}