/* 4MG motion layer: smooth scroll, kinetic type, scroll-driven reveals, cursor, 3D hero.
   Everything here only applies once motion.js has added .motion to <html>, so visitors
   with reduced motion (or without JS) get the plain site. */

/* Lenis smooth scrolling */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Kinetic headlines: split into words and characters */
.motion .split .word { display: inline-block; white-space: nowrap; }
.motion .split .char { display: inline-block; will-change: transform, opacity; }

/* Scroll-scrubbed statement */
.statement { padding: clamp(90px, 14vw, 180px) 0; border-block: 1px solid var(--line); }
.statement-text {
  font-family: var(--display); text-transform: uppercase; font-weight: 400;
  font-size: clamp(36px, 6.4vw, 96px); line-height: 1.02; letter-spacing: .005em;
  margin: 0; max-width: 22ch;
}
.statement-text em { font-style: normal; color: var(--red); }
.statement-text .w { display: inline-block; }
.motion .statement-text .w { opacity: .14; }
.statement .eyebrow { display: block; margin-bottom: 28px; }

/* Image curtain reveal */
.motion [data-curtain] { clip-path: inset(0 0 0 0); }

/* Custom cursor (mouse/trackpad only) */
.cursor-ring, .cursor-dot {
  position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
  border-radius: 50%; transform: translate(-50%, -50%);
}
.cursor-dot { width: 6px; height: 6px; background: var(--red); }
.cursor-ring {
  width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.45);
  display: grid; place-items: center;
  transition: width .35s cubic-bezier(.2,.7,.2,1), height .35s cubic-bezier(.2,.7,.2,1),
              background .35s, border-color .35s;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #fff;
}
.cursor-ring span { opacity: 0; transition: opacity .2s; }
.cursor-ring.is-link { width: 58px; height: 58px; border-color: var(--red); }
.cursor-ring.is-play { width: 92px; height: 92px; background: var(--red); border-color: var(--red); }
.cursor-ring.is-play span { opacity: 1; }
.cursor-ring.is-hidden, .cursor-dot.is-hidden { opacity: 0; }
@media (hover: none), (pointer: coarse) { .cursor-ring, .cursor-dot { display: none; } }