/* ---- Lenis ----
   Shipped as lenis/dist/lenis.css upstream. Inlined rather than pulled from the
   CDN because it is twelve lines and not worth a blocking request. Lenis needs
   the height rule in particular: without it a page whose html or body is set to
   100% reports the wrong scrollable extent and the last section is unreachable. */
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; }

/* Lenis drives the page from rAF, so anything it cannot control -- an embedded
   frame mid-scroll -- swallows the wheel and stalls the page behind it. */
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---- motion, only once scripts/motion.js switches it on ---- */
.reveals [data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-2) ease, transform var(--dur-2) var(--ease-out);
}
.reveals [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ---- custom cursor ----
   Everything is gated on .has-cursor, which scripts/cursor.js adds on mount and
   removes on teardown. Nothing here applies on a touch device, and the native
   cursor comes straight back if the layer ever goes away. */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-1) ease;
  will-change: transform;
}
.cursor.is-on { opacity: 1; }

.cursor__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text);
  transition: transform var(--dur-1) var(--ease-out);
}
.cursor.is-labelled .cursor__dot { transform: scale(0.55); }

.cursor__label {
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--text);
  color: var(--surface);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
}
.cursor.is-labelled .cursor__label {
  opacity: 1;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .has-cursor,
  .has-cursor a,
  .has-cursor button,
  .has-cursor [data-cursor-label] { cursor: none; }
}
/* The replacement is decorative and the keyboard never sees it, so the focus
   ring has to keep working exactly as it did. */
.has-cursor :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }