/* motion.css: scroll and entrance motion for the home page.
   Every initial (hidden) state is scoped to html.motion, which is only set when the
   visitor has not asked for reduced motion, so the page is complete without it. */

:root { --ease-out: cubic-bezier(.22, .61, .36, 1); --ease-mask: cubic-bezier(.77, 0, .18, 1); }

/* ── Masked headlines: each word rises out of its own window ─────────────────── */
.mw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.mw > span { display: inline-block; }
html.motion .mh .mw > span { transform: translateY(108%); transition: transform 1.05s var(--ease-mask); transition-delay: calc(var(--i, 0) * 55ms + var(--d, 0ms)); }
html.motion .mh.in .mw > span { transform: none; }

/* ── 9 · Nav: transparent over the dark hero, solid after it ──────────────────── */
@media (min-width: 881px) {
  nav.nav-over { background: linear-gradient(rgba(10,10,10,.62), rgba(10,10,10,.28)) !important; border-bottom-color: transparent !important; }
  nav.nav-over [data-r="nav-links"] > a { color: rgba(242,240,236,.72) !important; }
  nav.nav-over [data-r="nav-links"] > a:hover { color: #F2F0EC !important; }
  nav { transition: background .45s ease, border-color .45s ease; }
  nav [data-r="nav-links"] > a { transition: color .35s ease; }
}

/* ── 9 · Buttons fill from the bottom on hover ─────────────────────────────────── */
.btn-fill { position: relative; overflow: hidden; isolation: isolate; transition: color .35s ease, border-color .35s ease; }
.btn-fill::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #8B1A1F; transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease-out); }
.btn-fill:hover::before, .btn-fill:focus-visible::before { transform: scaleY(1); }
.btn-fill:hover, .btn-fill:focus-visible { color: #F2F0EC !important; border-color: #8B1A1F !important; }
.btn-fill.btn-primary::before { background: #F2F0EC; }
.btn-fill.btn-primary:hover, .btn-fill.btn-primary:focus-visible { background: #8B1A1F !important; color: #0A0A0A !important; border-color: #F2F0EC !important; }

/* ── 4 · Images arrive soft and settle sharp ──────────────────────────────────── */
html.motion .fx img, html.motion .fx video { opacity: 0; filter: blur(18px); transform: scale(1.1); transition: opacity 1.1s ease, filter 1.5s var(--ease-out), transform 2s var(--ease-out); transition-delay: calc(var(--i, 0) * 140ms); }
html.motion .fx.in img, html.motion .fx.in video { opacity: 1; filter: blur(0); transform: scale(1); }
html.motion .fx.in:hover img, html.motion .fx.in:hover video { transform: scale(1.04); transition-delay: 0s; transition-duration: 1.2s; }

/* ── 2 · How I work: pinned, scroll walks the six steps ───────────────────────── */
@media (min-width: 1081px) and (min-height: 700px) {
  html.motion.pin-on [data-r="process-pin"] { height: calc(100vh + 6 * 55vh); }
  html.motion.pin-on [data-r="process-pin"] > [data-r="process"] { position: sticky; top: max(96px, calc(50vh - 230px)); }
  html.motion.pin-on [data-r="process-content"] { transition: opacity .45s ease, transform .45s var(--ease-out); }
  html.motion.pin-on [data-r="process-content"].swap { opacity: 0; transform: translateY(14px); transition-duration: 0s; }
  html.motion.pin-on [data-r="process-tabs"] { position: relative; }
  html.motion.pin-on [data-r="process-tabs"]::after { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: var(--pp, 0%); background: rgba(178,52,57,.55); pointer-events: none; transition: height .2s linear; }
}

/* ── 8 · Experience: header stays while the career scrolls ────────────────────── */
@media (min-width: 1000px) {
  [data-r="cv-split"] { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; align-items: start; }
  [data-r="cv-split"] > div:first-child { position: sticky; top: 112px; margin-bottom: 0 !important; }
  [data-r="cv-split"] h2 { font-size: clamp(44px, 4.6vw, 76px) !important; }
}

/* ── 7 · Testimonials: a track you scroll sideways, the backdrop follows ──────── */
[data-r="quotes"]::-webkit-scrollbar { display: none; }
[data-r="quotes-bg"] { position: absolute; left: 0; right: 0; top: -8px; height: 100%; pointer-events: none; overflow: hidden; }
[data-r="quotes-bg"] > span { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-weight: 700; font-size: clamp(120px, 19vw, 300px); line-height: .85; letter-spacing: -.04em; color: rgba(139,26,31,.07); white-space: nowrap; opacity: 0; transition: opacity 1.6s ease; }
[data-r="quotes-bg"] > span.on { opacity: 1; }
[data-r="quote"] { transition: opacity .6s ease; }
[data-r="quotes"].ready [data-r="quote"]:not(.cur) { opacity: .38; }
[data-r="quotes-nav"] { display: flex; align-items: center; gap: 16px; margin-top: 36px; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: .08em; color: #6B6A66; }
[data-r="quotes-nav"] button { appearance: none; -webkit-appearance: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(0,0,0,.18); background: transparent; color: #0E0E0E; font-size: 16px; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
[data-r="quotes-nav"] button:hover { background: #8B1A1F; border-color: #8B1A1F; color: #F2F0EC; }
[data-r="quotes-nav"] button:disabled { opacity: .3; cursor: default; background: transparent; color: #0E0E0E; border-color: rgba(0,0,0,.18); }

@media (prefers-reduced-motion: reduce) {
  [data-r="quotes-bg"] > span, [data-r="quote"], .btn-fill, .btn-fill::before { transition: none; }
}
[data-r="quotes"] { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 92%, transparent 100%); }

/* Display face on the home page: titles use Bricolage Grotesque at 700, natural spacing */
h1, h2, h3, h4 { font-family: 'Bricolage Grotesque', 'Inter Tight', system-ui, sans-serif !important; font-weight: 700 !important; letter-spacing: 0 !important; }