/* motion/motion.css — the CSS half of the motion layer (motion/README.md).
   Hides what the intro will reveal ONLY while the script is on its way (:root.m-on, set by the head
   snippet, minus .m-ready, set by motion.mjs). If the script never arrives, a failsafe shows everything
   after 2.5 s. Under prefers-reduced-motion nothing is hidden and nothing moves. */

@keyframes m-failsafe { to { opacity: 1; visibility: visible; } }

@media (prefers-reduced-motion: no-preference) {
  /* before the script: hidden, with a failsafe in case it never arrives */
  :root.m-on:not(.m-ready) [data-m-split],
  :root.m-on:not(.m-ready) [data-m-reveal]:not([data-m-reveal="scale"]) {
    opacity: 0;
    animation: m-failsafe 0s 2.5s forwards;
  }
  /* after it: text waits for its split, blocks for their reveal (both happen as they near the viewport) */
  :root.m-ready [data-m-split]:not([data-m-done]) { opacity: 0; }
  :root.m-ready [data-m-reveal]:not([data-m-shown]) { opacity: 0; }
  :root.m-ready [data-m-reveal="rise"]:not([data-m-shown]) { transform: translateY(64px); }
  :root.m-ready [data-m-reveal="clip"]:not([data-m-shown]) { opacity: 1; clip-path: inset(100% 0% 0% 0%); }
  /* a reveal image waits for its canvas (WebGL dissolve) or its clip wipe (touch, or no WebGL) */
  :root.m-ready [data-m-distort="reveal"]:not([data-m-shown]) img { opacity: 0; }
  /* the scale reveal starts painted (inset, slightly zoomed), so a hero image counts for LCP at first paint */
  :root.m-on [data-m-reveal="scale"]:not([data-m-shown]) { opacity: 1; clip-path: inset(8% 8% 8% 8%); transform: scale(1.12); }
}

/* screen-reader-only text (counters' final values) */
.m-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* split text: each line is its own mask, so pieces rise out of nothing */
[data-m-split] .m-line { padding-bottom: .08em; margin-bottom: -.08em; }

/* Lenis */
html.m-smooth, html.m-smooth body { height: auto; }
html.m-smooth.lenis-stopped { overflow: clip; }
html.m-smooth .lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* pinned story: steps stack in one place and take turns; under reduced motion they read in order */
[data-m-pin] { position: relative; }
[data-m-horizontal] { overflow: clip; }
@media (prefers-reduced-motion: reduce) { [data-m-horizontal] { overflow-x: auto; } }
[data-m-autohide] { transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
[data-m-autohide].m-hidden { transform: translateY(-110%); }
[data-m-track] { display: flex; width: max-content; will-change: transform; }

/* distort: the canvas covers the image, which stays for alt text and layout */
[data-m-distort] { position: relative; overflow: clip; }
[data-m-distort].m-distort-on img { opacity: 0; }
.m-distort-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

/* cursor (pointer devices only; cursor.mjs never adds it on touch or reduced motion) */
.m-cursor { position: fixed; inset: 0; pointer-events: none; z-index: 2147483000; }
.m-cursor-dot, .m-cursor-ring { position: absolute; left: 0; top: 0; border-radius: 50%; opacity: 0; transition: opacity .3s; }
.m-cursor[data-state="on"] .m-cursor-dot, .m-cursor[data-state="on"] .m-cursor-ring { opacity: 1; }
.m-cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--ds-ink); }
.m-cursor-ring {
  width: 36px; height: 36px; margin: -18px 0 0 -18px;
  border: 1px solid var(--ds-ink);
  display: grid; place-items: center;
  transition: opacity .3s, width .45s cubic-bezier(.16, 1, .3, 1), height .45s cubic-bezier(.16, 1, .3, 1), margin .45s cubic-bezier(.16, 1, .3, 1), background-color .3s, border-color .3s;
}
.m-cursor-label {
  font: 600 11px/1 var(--ds-font-sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ds-ink-inverse); opacity: 0; transition: opacity .2s;
}
.m-cursor[data-hover="link"] .m-cursor-ring { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
.m-cursor[data-hover="label"] .m-cursor-ring { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: var(--ds-ink); }
.m-cursor[data-hover="label"] .m-cursor-label { opacity: 1; }
.m-cursor[data-hover="label"] .m-cursor-dot, .m-cursor[data-hover="field"] .m-cursor-dot, .m-cursor[data-hover="field"] .m-cursor-ring { opacity: 0; }
.m-cursor.is-down .m-cursor-ring { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
html.m-cursor-on, html.m-cursor-on a, html.m-cursor-on button, html.m-cursor-on [role="button"], html.m-cursor-on label { cursor: none; }

/* preloader: shown on a visitor's first page of the session only (see the head snippet) */
[data-m-preloader] {
  position: fixed; inset: 0; z-index: 2147482000;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: var(--ds-space-8);
  background: var(--ds-surface-inverse); color: var(--ds-ink-inverse);
  clip-path: inset(0% 0% 0% 0%);
  overflow: clip;
}
:root.m-skip-preloader [data-m-preloader] { display: none; }
@media (prefers-reduced-motion: reduce) { [data-m-preloader] { display: none; } }

/* curtain fallback for page transitions (browsers without cross-document View Transitions) */
.m-curtain {
  position: fixed; inset: 0; z-index: 2147482500; pointer-events: none;
  background: var(--ds-surface-inverse);
  clip-path: inset(100% 0% 0% 0%);
}
:root.m-arriving .m-curtain { clip-path: inset(0% 0% 0% 0%); }