/* Homepage motion and the components that carry it: scroll reveals, word-by-word headings, the client
   logo marquee, the facts band, the floating 3D service objects and the process progress line.
   Hidden start states only apply under html.motion, which is set before paint and only when the visitor
   has not asked for reduced motion, so without JavaScript or with reduced motion the page is fully static. */

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
}

/* ---------- Smooth scrolling (Lenis) ---------- */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

/* ---------- Scroll progress under the nav ---------- */
.nav-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--crimson); transform-origin: 0 50%; transform: scaleX(var(--sp, 0));
  pointer-events: none;
}

/* ---------- Generic reveal ---------- */
.motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 0.9s var(--ease-soft), transform 1.1s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.motion [data-reveal].in { opacity: 1; transform: none; }
.motion [data-reveal="fade"] { transform: none; }
.motion [data-reveal="words"] { opacity: 1; transform: none; }
.motion [data-reveal="scale"] { transform: scale(0.94); }
.motion [data-reveal="scale"].in { transform: none; }

/* ---------- Word-by-word headings ---------- */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.02em 0.12em 0.16em 0.04em; margin: -0.02em -0.12em -0.16em -0.04em; }
.split .wi { display: inline-block; }
.motion .split:not(.lit-text) .wi {
  transform: translate3d(0, 115%, 0) rotate(4deg);
  transform-origin: 0 100%;
  transition: transform 1.1s var(--ease-out);
  transition-delay: calc(var(--i) * 42ms + var(--d, 0s));
}
.motion .split.in:not(.lit-text) .wi { transform: none; }

/* Manifesto: words light up as you read down the page. */
.motion .lit-text .wi { opacity: 0.16; transition: opacity 0.45s var(--ease-soft); }
.motion .lit-text .wi.lit { opacity: 1; }

/* ---------- Hero entrance and parallax ---------- */
.motion .hero-plate {
  clip-path: inset(3% 2.5% 3% 2.5% round 32px);
  transition: clip-path 1.6s var(--ease-out);
}
.motion.is-loaded .hero-plate { clip-path: inset(0 0 0 0 round var(--radius-lg)); }
.hero-video { will-change: transform; transform: translate3d(0, var(--hy, 0px), 0) scale(var(--hs, 1)); }
.motion .hero-video { --hs: 1.14; }
.motion .hero-plate .hero-video { transition: transform 2.2s var(--ease-out); }
.motion.is-loaded .hero-video { --hs: 1.04; }
.motion.hero-settled .hero-plate .hero-video { transition: none; }
.hero-copy { transform: translate3d(0, var(--cy, 0px), 0); opacity: var(--co, 1); }
.motion .hero-sub, .motion .hero-actions, .motion .hero-tabs {
  opacity: 0; transform: translate3d(0, 20px, 0);
  transition: opacity 1s var(--ease-soft), transform 1.2s var(--ease-out);
}
.motion .hero-tabs { transition-delay: 0.15s; }
.motion .hero-sub { transition-delay: 0.65s; }
.motion .hero-actions { transition-delay: 0.85s; }
.motion.is-loaded .hero-sub, .motion.is-loaded .hero-actions, .motion.is-loaded .hero-tabs { opacity: 1; transform: none; }
.motion .hero .split .wi { transition-duration: 1.3s; transition-delay: calc(var(--i) * 60ms + 0.25s); }

/* ---------- Clients: logo marquee ---------- */
.clients { padding: 56px 0 8px; overflow: hidden; }
.clients-line { max-width: 1200px; margin: 0 auto 26px; padding: 0 24px; text-align: center; color: var(--muted); font-size: 0.9375rem; }
.marquee {
  --gap: clamp(40px, 6vw, 84px);
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee + .marquee { margin-top: 18px; }
.marquee-track { display: flex; width: max-content; animation: marquee 46s linear infinite; }
.marquee--reverse .marquee-track { animation-direction: reverse; animation-duration: 52s; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee ul { display: flex; align-items: center; gap: var(--gap); margin: 0; padding: 10px calc(var(--gap) / 2); list-style: none; }
.marquee li { flex: none; height: 46px; display: flex; align-items: center; }
.marquee li img {
  height: 100%; width: auto; max-width: 168px; object-fit: contain;
  filter: grayscale(1) contrast(1.05); opacity: 0.62;
  transition: filter 0.4s var(--ease-soft), opacity 0.4s var(--ease-soft), transform 0.4s var(--ease-out);
}
.marquee li.is-badge { height: 52px; }
.marquee li.is-badge img { width: 52px; border-radius: 12px; }
.marquee li:hover img { filter: none; opacity: 1; transform: scale(1.06); }
@keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (max-width: 640px) {
  .clients { padding-top: 40px; }
  .marquee li { height: 36px; }
  .marquee li.is-badge { height: 42px; }
  .marquee li.is-badge img { width: 42px; }
}

/* ---------- Facts band ---------- */
.facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  width: calc(100% - 48px); max-width: 1152px; padding: 0;
  margin-top: 96px; border-top: 1px solid var(--ink);
}
@media (max-width: 640px) { .facts { width: calc(100% - 32px); } }
.fact { padding: 28px 28px 8px 0; }
.fact + .fact { padding-left: 28px; border-left: 1px solid var(--hairline-strong); }
.fact-n {
  font-family: var(--serif); font-size: clamp(3.4rem, 6.4vw, 5.6rem); line-height: 0.95; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fact-n em { font-size: 0.36em; letter-spacing: 0; color: var(--crimson); margin-left: 0.1em; }
.fact > p:last-child { margin-top: 14px; color: var(--muted); font-size: 0.9375rem; max-width: 24ch; }
@media (max-width: 900px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact:nth-child(3) { padding-left: 0; border-left: 0; }
  .fact:nth-child(n+3) { border-top: 1px solid var(--hairline-strong); }
}
@media (max-width: 480px) {
  .facts { margin-top: 64px; }
  .fact, .fact + .fact { padding: 22px 12px 6px 0; }
  .fact:nth-child(even) { padding-left: 16px; }
}

/* ---------- 3D service objects ---------- */
.obj-grid { gap: 36px 18px; }
.obj-card { position: relative; }
.obj-stage {
  position: relative; aspect-ratio: 1 / 1;
  background: radial-gradient(52% 46% at var(--gx, 50%) var(--gy, 46%), rgba(163, 32, 47, 0.26), rgba(163, 32, 47, 0) 72%);
  perspective: 700px;
  transition: background 0.5s var(--ease-soft);
}
.obj-glow {
  position: absolute; left: 50%; bottom: 14%; width: 70%; height: 28%;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(240, 138, 150, 0.22), rgba(240, 138, 150, 0));
  filter: blur(6px);
}
.obj-float {
  position: absolute; inset: 10% 11% 16%;
  display: grid; place-items: center;
  animation: obj-bob 6.4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.73s);
  transform-style: preserve-3d;
}
.obj {
  width: 100%; height: auto; max-width: none;
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.5)) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--os, 1));
  transition: transform 0.9s var(--ease-out);
  will-change: transform;
}
.obj-shadow {
  position: absolute; left: 50%; bottom: 10%; width: 46%; height: 7%;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  animation: obj-shadow 6.4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.73s);
}
@keyframes obj-bob {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
  50% { transform: translate3d(0, -12px, 0) rotate(2deg); }
}
@keyframes obj-shadow {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.9; }
  50% { transform: translateX(-50%) scale(0.78); opacity: 0.55; }
}
.obj-card h3 { margin-top: 16px; font-size: 1rem; font-weight: 600; color: var(--stage-text); }
.obj-card p { margin-top: 4px; font-size: 0.875rem; line-height: 1.5; color: var(--stage-muted); }
.obj-card:hover .obj { --os: 1.07; }
.motion .obj-card[data-reveal] .obj { --os: 0.72; }
.motion .obj-card[data-reveal].in .obj { --os: 1; transition-duration: 1.4s; }
.motion .obj-card[data-reveal].in:hover .obj { --os: 1.07; }
@media (max-width: 1080px) { .obj-card { scroll-snap-align: start; } }

/* ---------- What we build: hover sweep ---------- */
.row { position: relative; }
.row::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--crimson); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.7s var(--ease-out);
}
.row:hover::after { transform: scaleX(1); }

/* ---------- Before / after: the arrow slides in ---------- */
.motion .shift tr[data-reveal] td:last-child::before { display: inline-block; opacity: 0; transform: translateX(-10px); transition: opacity 0.6s, transform 0.8s var(--ease-out); transition-delay: calc(var(--d, 0s) + 0.25s); }
.motion .shift tr[data-reveal].in td:last-child::before { opacity: 1; transform: none; }

/* ---------- Bento hover ---------- */
.tile { transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out); }
.tile--media video, .tile--media img, .tile--flow img { transition: transform 1.2s var(--ease-out); }
@media (hover: hover) {
  .tile:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(26, 22, 20, 0.05), 0 18px 40px rgba(26, 22, 20, 0.12); }
  .tile--media:hover video, .tile--media:hover img, .tile--flow:hover img { transform: scale(1.04); }
}

/* ---------- Process: progress line ---------- */
.steps { position: relative; }
.steps::before, .steps::after {
  content: ""; position: absolute; left: 13px; top: 30px; bottom: 30px; width: 1px;
}
.steps::before { background: var(--hairline-strong); }
.steps::after { background: var(--crimson); transform-origin: 50% 0; transform: scaleY(var(--p, 0)); }
.step-n { position: relative; z-index: 1; justify-self: start; width: 28px; padding: 4px 0 8px; background: var(--paper); text-align: center; transition: color 0.4s; }
.motion .steps li .step-n { color: var(--faint); }
.motion .steps li.on .step-n { color: var(--crimson); }
@media (max-width: 720px) { .steps::before, .steps::after { left: 13px; } }

/* ---------- Zamili image drift ---------- */
.plane-figure img { transform: translate3d(0, var(--py, 0px), 0) rotate(var(--pr, 0deg)); will-change: transform; }

/* ---------- Reduced motion: everything static ---------- */
@media (prefers-reduced-motion: reduce) {
  .marquee-track, .obj-float, .obj-shadow { animation: none; }
  .marquee { overflow-x: auto; }
}