/* Set the --motion-* color tokens in your site's theme. No hidden-content baseline. */
:root {
  --motion-viewport: 100svh;
  --motion-radius: 24px;
  --motion-gutter: clamp(1.25rem, 4vw, 5rem);
  --motion-cursor-size: 5.5rem;
  --motion-cursor-bg: var(--surface, currentColor);
  --motion-cursor-ink: var(--ink, currentColor);
  --motion-line: currentColor;
  --motion-duration: 160ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}
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.lenis-smooth iframe { pointer-events: none; }
.hero-x { position: relative; min-height: var(--motion-viewport); isolation: isolate; }
.hero-x__media { display: block; width: 100%; height: var(--motion-viewport); object-fit: cover; transform-origin: center; overflow: clip; }
.hero-x__media :is(img, video) { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-x__title { position: absolute; inset: auto var(--motion-gutter) 18%; z-index: 1; }
.hero-x__sub { position: absolute; inset: auto var(--motion-gutter) 5%; z-index: 1; }
.motion-word { display: inline-block; }
.hscroll { position: relative; width: 100%; overflow-x: auto; overflow-y: clip; }
.hscroll[data-motion-horizontal] { overflow: clip; }
.hscroll__track { display: flex; position: relative; width: max-content; min-width: 100%; }
.hscroll__panel { position: relative; flex: 0 0 100vw; width: 100vw; min-height: var(--motion-viewport); overflow: clip; }
.hscroll__img { display: block; width: 114%; max-width: none; height: var(--motion-viewport); margin-left: -7%; object-fit: cover; }
.hscroll__progress { position: absolute; inset: auto var(--motion-gutter) 2rem; pointer-events: none; }
.hscroll__bar { display: block; width: 100%; height: 1px; background: var(--motion-line); transform-origin: left center; }
.hscroll__count { display: block; margin-bottom: 1rem; font-variant-numeric: tabular-nums; }
.seq { position: relative; min-height: var(--motion-viewport); isolation: isolate; }
.seq__canvas { display: block; width: 100%; height: var(--motion-viewport); }
.seq__steps { position: absolute; inset: auto var(--motion-gutter) 4rem; display: grid; gap: 1rem; pointer-events: none; }
.seq__step { margin: 0; }
[data-mask] { overflow: clip; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: clip; }
.split__l, .split__r { min-width: 0; }
.mq { overflow: clip; }
.mq__track { display: flex; position: relative; width: max-content; gap: var(--motion-gutter); }
.mq__group { display: inline-flex; flex: 0 0 auto; gap: var(--motion-gutter); align-items: center; white-space: nowrap; }
[data-magnet] { display: inline-flex; touch-action: manipulation; }
.cursor { display: none; position: fixed; z-index: 10000; top: 0; left: 0; width: var(--motion-cursor-size); height: var(--motion-cursor-size); border-radius: 50%; pointer-events: none; background: var(--motion-cursor-bg); color: var(--motion-cursor-ink); align-items: center; justify-content: center; text-align: center; font: 0.65rem/1.2 sans-serif; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0; visibility: hidden; }
[data-count] { font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .cursor { display: flex; }
  [data-magnet]:active { scale: 0.97; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .cursor { display: none !important; }
  .mq__track { max-width: 100%; width: auto; flex-wrap: wrap; }
  .mq__group { white-space: normal; flex-wrap: wrap; }
}