/* Motion states — designv2.md §6. Only applies when JS runs (html.js); reduced motion shows everything still.
   Entrances use the individual `translate` property so hover `transform`s on cards stay free. */
html.js [data-reveal] {
  opacity: 0; translate: 0 40px;
  transition: opacity var(--t-section) var(--ease-out-soft) calc(var(--delay, 0s) + 0.2s),
              translate var(--t-section) var(--ease-out-soft) calc(var(--delay, 0s) + 0.2s),
              filter var(--t-text) var(--ease-out-soft) var(--delay, 0s);
}
html.js .cards > [data-reveal] { translate: -50px 0; transition-duration: var(--t-slide); transition-delay: calc(var(--delay, 0s) + 0.1s); }
html.js [data-reveal][data-fx="fade"] { translate: none; transition: opacity 0.6s linear var(--delay, 0s); }
html.js [data-reveal][data-fx="blur"] { translate: 0 5px; filter: blur(2px); transition-delay: var(--delay, 0s); }
html.js [data-reveal][data-fx="left"] { translate: -12px 0; transition-duration: var(--t-ui); transition-delay: var(--delay, 0s); }
html.js [data-reveal].is-in { opacity: 1; translate: none; filter: none; }

/* Word-by-word blur reveal (designv2 §6.4) */
html.js .headline-silver.is-split .word { opacity: 0; transform: translateY(10px); filter: blur(10px); }
html.js .headline-silver.is-split.is-in .word {
  animation: word-in var(--t-text) var(--ease-out-soft) forwards;
  animation-delay: calc(var(--i) * 50ms + var(--word-base, 0ms));
}
html.js .hero .headline-silver { --word-base: 500ms; }
@keyframes word-in { to { opacity: 1; transform: none; filter: blur(0); } }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
[id] { scroll-margin-top: 90px; }

/* Footer rises from beneath main (designv2 §6.6) */
main { position: relative; z-index: 1; background: var(--bg); }
.closing { z-index: 0; }
.closing-stage { will-change: transform; }

/* Custom cursor (designv2 §6.8) — pointer devices only, created by motion.js */
.cursor {
  position: fixed; z-index: 60; left: 0; top: 0; pointer-events: none;
  width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 99px;
  background: rgb(230, 230, 230); box-shadow: 0 0 6px rgba(230, 230, 230, 0.6);
  display: grid; place-items: center; opacity: 0;
  transition: width 0.45s var(--ease-out-soft), height 0.45s var(--ease-out-soft), margin 0.45s var(--ease-out-soft), opacity 0.3s;
}
.cursor.is-live { opacity: 1; }
.cursor span { font: 500 11px var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase; color: #0A0A0A; opacity: 0; transition: opacity 0.2s; }
.cursor.is-label { width: 64px; height: 28px; margin: -14px 0 0 -32px; }
.cursor.is-label span { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; translate: none; filter: none; transition: none; }
  html.js .headline-silver.is-split .word { opacity: 1; transform: none; filter: none; animation: none; }
  .closing-stage { transform: none !important; }
}