/* ============================================================
   motion.css — regole minime che motion.js si aspetta (DDStaff)
   Da caricare insieme a motion.js. Non contiene il design del sito:
   token, tipografia e layout vanno nel CSS del progetto.
   ============================================================ */

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

/* Base anti-jank */
html { overflow-x: clip; scroll-behavior: auto; }
body { min-height: 100svh; }
img, video { display: block; max-width: 100%; }

/* Testo splittato: nascosto finché motion.js non lo prepara (senza JS resta visibile) */
html.js [data-split] { visibility: hidden; }
.line { display: block; }

/* Media con clip / parallax */
[data-clip] { overflow: hidden; will-change: clip-path; }
[data-clip] img, [data-clip] video,
[data-parallax] img, [data-parallax] video { width: 100%; height: 100%; object-fit: cover; }
[data-parallax] { overflow: hidden; position: relative; }

/* Preloader */
[data-preloader] {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--bg, #0b0b0c); color: var(--fg, #ede8e0);
  font-size: clamp(2rem, 8vw, 7rem); font-variant-numeric: tabular-nums; line-height: 1;
}
[data-preloader-count]::after { content: "%"; font-size: 0.35em; vertical-align: top; margin-left: 0.1em; opacity: 0.6; }

/* Header */
[data-nav] {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.4s, backdrop-filter 0.4s;
}
[data-nav].is-hidden { transform: translateY(-100%); }
[data-nav].is-scrolled { background: color-mix(in srgb, var(--bg, #0b0b0c) 70%, transparent); backdrop-filter: blur(12px); }

/* Marquee */
[data-marquee] { display: flex; overflow: hidden; white-space: nowrap; }
[data-marquee] > * { flex: 0 0 auto; display: flex; gap: var(--marquee-gap, 3rem); padding-right: var(--marquee-gap, 3rem); }

/* Sezioni orizzontali e pinnate */
[data-horizontal] { overflow: hidden; }
[data-track] { display: flex; width: max-content; }
[data-pin] { position: relative; min-height: 100svh; }
[data-pin-step] { position: absolute; inset: 0; display: grid; place-items: center; }
@media (max-width: 767px) { [data-pin-step] { position: static; } }
@media (max-width: 1023px) { [data-track] { width: auto; flex-wrap: wrap; } }

/* Cursore custom (solo mouse) */
[data-cursor] {
  position: fixed; top: 0; left: 0; z-index: 10000; pointer-events: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--fg, #fff); mix-blend-mode: difference;
  display: grid; place-items: center; font: 500 0.75rem/1 sans-serif; letter-spacing: 0.04em; color: #000;
  transition: width 0.3s, height 0.3s, background-color 0.3s;
}
[data-cursor].is-hover { width: 48px; height: 48px; }
[data-cursor].is-label { width: 88px; height: 88px; mix-blend-mode: normal; background: var(--accent, #c9a96e); color: var(--bg, #000); }
@media (hover: hover) and (pointer: fine) { html.js.cursor-none body, html.js.cursor-none a, html.js.cursor-none button { cursor: none; } }
@media (hover: none) { [data-cursor] { display: none; } }

/* Grana (texture premium, costo quasi zero) */
.grain {
  position: fixed; inset: 0; z-index: 9000; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* Stato ridotto: tutto visibile, transizioni brevi */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html.js [data-split] { visibility: visible; }
  [data-cursor], [data-preloader] { display: none; }
}