/* ============ Grandlense — motion layer ============ */
/* Lenis (official stylesheet rules) */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- fixed nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), background .4s, padding .4s, opacity .8s;
}
.nav.scrolled { background: rgba(20, 19, 23, .62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding-top: 12px; padding-bottom: 12px; }
.nav.hide { transform: translateY(-110%); }
.hero-body { padding-top: clamp(100px, 12vh, 140px); }
@media (max-width: 780px) { .nav.open .nav-links { top: 70px; } }

/* ---------- hero intro (waits for body.loaded) ---------- */
.hero-slides { transform: scale(1.18); transition: transform 2.2s cubic-bezier(.2, .7, .2, 1); }
body.loaded .hero-slides { transform: scale(1); }
.hero-card { clip-path: inset(6% 6% 6% 6% round 32px); transition: clip-path 1.6s cubic-bezier(.77, 0, .18, 1); }
body.loaded .hero-card { clip-path: inset(0 0 0 0 round 0); }
.nav { opacity: 0; }
body.loaded .nav { opacity: 1; transition-delay: 0s, 0s, 0s, .7s; }

.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.w > span { display: inline-block; transform: translateY(105%) rotate(4deg); transform-origin: left bottom; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
body.loaded .hero h1 .w > span { transform: none; }

.hero .chip, .hero .progress { opacity: 0; transform: translateY(16px) scale(.9); transition: opacity .7s, transform .7s cubic-bezier(.34, 1.56, .64, 1); }
body.loaded .hero .chip, body.loaded .hero .progress { opacity: 1; transform: none; }

/* ---------- scroll-lit statements ---------- */
.statement .sw, .cta .sw { transition: opacity .4s; opacity: .18; }
.statement .sw.lit, .cta .sw.lit { opacity: 1; }

/* ---------- reveal variants ---------- */
[data-a] { transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1), clip-path 1.2s cubic-bezier(.77, 0, .18, 1); transition-delay: var(--d, 0s); }
[data-a="up"] { opacity: 0; transform: translateY(40px); }
[data-a="pop"] { opacity: 0; transform: translateY(20px) scale(.85); transition-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
[data-a="left"] { opacity: 0; transform: translateX(-40px); }
[data-a="clip"] { clip-path: inset(100% 0 0 0 round 12px); }
[data-a="clip"] > img { transform: scale(1.3); transition: transform 1.6s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
[data-a].in { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 12px); }
[data-a="clip"].in > img { transform: scale(1); }

/* card parallax image (taller than the card so it can drift) */
.card > img { top: -8%; height: 116%; }
.card.settled > img { transform: none; translate: 0 var(--py, 0); scale: 1; transition: scale 1.2s cubic-bezier(.2, .7, .2, 1); will-change: translate; }
.card.settled:hover > img { transform: none; scale: 1.06; }

/* panels morph in from a rounded card to full bleed */
.panel { will-change: scale; transform-origin: 50% 0; }

/* ---------- marquee ---------- */
.marquee { overflow: hidden; padding: clamp(28px, 4vw, 56px) 0; border-block: 1px solid var(--line); margin-top: clamp(40px, 6vw, 80px); }
.marquee-track { display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); width: max-content; will-change: transform; }
.marquee span { font-size: clamp(48px, 9vw, 140px); font-weight: 500; letter-spacing: -.04em; line-height: 1; white-space: nowrap; }
.marquee span.o { color: transparent; -webkit-text-stroke: 1px rgba(244, 242, 236, .5); font-weight: 300; }
.marquee i { font-style: normal; font-size: clamp(24px, 3vw, 44px); color: var(--ink-3); display: inline-block; animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- cursor ---------- */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 90; pointer-events: none;
  width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--ink); mix-blend-mode: difference;
  display: grid; place-items: center; opacity: 0;
  transition: width .35s cubic-bezier(.2, .7, .2, 1), height .35s cubic-bezier(.2, .7, .2, 1), margin .35s cubic-bezier(.2, .7, .2, 1), opacity .3s, background .3s;
}
.cursor span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bg); opacity: 0; transition: opacity .2s; }
.cursor.on { opacity: 1; }
.cursor.link { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.cursor.view { width: 92px; height: 92px; margin: -46px 0 0 -46px; mix-blend-mode: normal; }
.cursor.view span { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* magnetic targets move smoothly back when released */
.mag { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }

/* ---------- reduced motion: show everything, no movement ---------- */
@media (prefers-reduced-motion: reduce) {
  .cursor { display: none; }
  .hero-card { clip-path: none; }
  .hero-slides, .w > span, .hero .chip, .hero .progress, .nav, [data-a], [data-a] > img { transform: none !important; opacity: 1 !important; clip-path: none !important; }
  .statement .sw, .cta .sw { opacity: 1; filter: none; }
  .marquee-track { transform: none !important; }
}

/* accent touches in the motion layer */
.marquee i { color: var(--accent); }
.cursor { background: var(--accent); mix-blend-mode: normal; }
.cursor span { color: var(--on-accent); }