/* MAKE OUUUT — motion layer
   Progressive enhancement only. Every rule keys off html.js-motion / html.motion-ready
   so no-JS and prefers-reduced-motion users keep the static design untouched.
   Monochrome only: no colored gradients, no new hues. */

/* Motion-only chrome stays hidden until JS is ready. */
.hero-canvas,
.scroll-progress { display: none; }
html.motion-ready .hero-canvas,
html.motion-ready .scroll-progress { display: block; }

/* ── Scroll progress ─────────────────────────────────────────────────── */
.scroll-progress {
  position: fixed;
  left: 0; right: 0; top: 0;
  height: 2px;
  z-index: 70;
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  background: var(--foreground);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ── Reveal ──────────────────────────────────────────────────────────── */
html.js-motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  filter: blur(6px);
  transition:
    opacity 0.8s var(--ease-out),
    transform 0.9s var(--ease-out),
    filter 0.8s var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0) * 70ms);
  will-change: opacity, transform;
}
html.js-motion [data-reveal].is-inview {
  opacity: 1;
  transform: none;
  filter: blur(0);
  will-change: auto;
}

/* ── Split text ──────────────────────────────────────────────────────── */
html.js-motion .split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
html.js-motion .split-word > span {
  display: inline-block;
  transform: translate3d(0, 112%, 0) rotate(2deg);
  opacity: 0;
  transition: transform 0.95s var(--ease-out), opacity 0.55s linear;
  transition-delay: calc(var(--i, 0) * 55ms);
}
html.js-motion [data-split].is-inview .split-word > span {
  transform: translate3d(0, 0, 0) rotate(0deg);
  opacity: 1;
}

/* ── Hero field ──────────────────────────────────────────────────────── */
.hero { position: relative; isolation: isolate; }
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.55;
  z-index: 0;
}
.hero > *:not(.hero-canvas) { position: relative; z-index: 1; }

html.motion-ready .hero-pill .dot { animation: dot-pulse 2.6s var(--ease-in-out) infinite; }
@keyframes dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.7); opacity: 0.45; }
}

/* ── Ticker ──────────────────────────────────────────────────────────── */
.ticker {
  position: relative;
  overflow: hidden;
  padding: 13px 0;
  background: var(--background);
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}
.ticker-track { display: flex; align-items: center; width: max-content; }
.ticker-item {
  margin-right: 22px;
  font-size: var(--size-label);
  font-weight: var(--w-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.ticker-sep { margin-right: 22px; font-size: var(--size-label); color: var(--border-control); }
html.motion-ready .ticker-track { animation: ticker-move 36s linear infinite; }
html.motion-ready .ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker-move {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* ── Panels and buttons hold still ────────────────────────────────────
   The hover/press states live in site.css, on fixed transforms: no pointer
   tracking, no sheen, nothing that moves while the pointer moves. Only the
   scroll-linked image drift stays here, because it needs the motion layer. */
html.motion-ready .work-all a,
html.motion-ready .case-foot > a { display: inline-block; }

/* Scroll-linked image drift inside work cards. */
html.motion-ready .work-card .work-media img {
  transform: translate3d(0, var(--py, 0px), 0) scale(1.045);
  transition: transform 0.6s var(--ease-out), clip-path 1s var(--ease-out);
}
html.motion-ready .work-card:hover .work-media img {
  transform: translate3d(0, var(--py, 0px), 0) scale(1.055);
}
html.js-motion .work-card .work-media img { clip-path: inset(0 0 100% 0); }
html.js-motion .work-card.is-inview .work-media img { clip-path: inset(0 0 0 0); }

/* ── Header state + nav ──────────────────────────────────────────────── */
html.motion-ready .site-header { transition: box-shadow 0.3s ease, background 0.3s ease; }
html.motion-ready .site-header.is-scrolled {
  box-shadow: 0 1px 0 var(--border-hairline), 0 16px 36px -30px rgba(0, 0, 0, 0.8);
}
html.motion-ready .header-inner { transition: padding 0.3s var(--ease-out); }
html.motion-ready .site-header.is-scrolled .header-inner { padding-top: 9px; padding-bottom: 9px; }

html.motion-ready .nav > a:not(.nav-cta) { position: relative; }
html.motion-ready .nav > a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -7px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.35s var(--ease-out);
}
html.motion-ready .nav > a:not(.nav-cta):hover::after,
html.motion-ready .nav > a:not(.nav-cta).is-active::after { transform: scaleX(1); }

/* ── Section eyebrow rule ────────────────────────────────────────────── */
html.motion-ready .section-head .eyebrow { display: inline-flex; align-items: center; gap: 9px; }
html.motion-ready .section-head .eyebrow::before {
  content: "";
  width: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
  transition: width 0.65s var(--ease-out) 0.08s;
}
html.motion-ready .section-head.is-inview .eyebrow::before { width: 24px; }

/* ── Process rail ────────────────────────────────────────────────────── */
.process-wrap { position: relative; }
html.motion-ready .process-wrap .process-grid { border-top: 0; }
html.motion-ready .process-track {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--border-hairline);
  overflow: hidden;
}
html.motion-ready .process-track span {
  display: block;
  width: 100%; height: 100%;
  background: var(--foreground);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.18s linear;
}
html.motion-ready .process-step {
  opacity: 1;
  transition: transform 0.5s var(--ease-out);
}
html.motion-ready .process-step .process-num,
html.motion-ready .process-step .process-title { transition: color 0.4s ease; }
html.motion-ready .process-step .process-title { color: var(--muted); }
html.motion-ready .process-step.is-active { transform: translateY(-2px); }
html.motion-ready .process-step.is-active .process-num,
html.motion-ready .process-step.is-active .process-title { color: var(--foreground); }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
html.motion-ready .faq-answer { overflow: hidden; }
html.motion-ready .faq-item summary { transition: color 0.2s ease; }

/* ── Footer marquee ──────────────────────────────────────────────────── */
.footer-marquee {
  position: relative;
  overflow: hidden;
  padding: 20px 0 4px;
  border-top: 1px solid rgba(250, 250, 249, 0.12);
}
.footer-marquee-track { display: flex; align-items: center; width: max-content; }
.footer-marquee-track span {
  margin-right: 28px;
  font-family: var(--font-display);
  font-size: var(--size-display);
  font-weight: var(--w-display);
  letter-spacing: var(--track-display);
  line-height: 1;
  color: rgba(250, 250, 249, 0.42);
  white-space: nowrap;
}
.footer-marquee-track .footer-marquee-dot {
  font-size: var(--size-body);
  color: rgba(250, 250, 249, 0.45);
}
html.motion-ready .footer-marquee-track { animation: footer-marquee 44s linear infinite; }
@keyframes footer-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* ── Reduced motion: hard stop ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html.motion-ready .ticker-track,
  html.motion-ready .footer-marquee-track,
  html.motion-ready .hero-pill .dot { animation: none !important; }
  html.motion-ready .process-step { opacity: 1; transform: none; }
}

@media (max-width: 768px) {
  html.motion-ready .process-track { display: none; }
}

/* ── View transitions ────────────────────────────────────────────────── */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.5s; animation-timing-function: var(--ease-out); }

html.vt-theme::view-transition-old(root) { animation: none; }
html.vt-theme::view-transition-new(root) { animation-name: vt-reveal; }
@keyframes vt-reveal {
  from { clip-path: circle(0% at var(--vt-x, 50%) var(--vt-y, 50%)); }
  to { clip-path: circle(150% at var(--vt-x, 50%) var(--vt-y, 50%)); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}