/* ============================================================
   MOTION — the Kinetic elements carried back to the staging site.
   Opt-in via html.mo (set by motion.js). Heroes untouched. Nothing here
   changes copy or layout at rest; every rule below is stilled under
   prefers-reduced-motion. No custom cursor, no footer track.
   ============================================================ */

/* ---------- 01 · pages slide sideways; the bar stays ---------- */
@view-transition { navigation: auto; }
.mo .site-bar { view-transition-name: site-bar; }
@keyframes mo-page-out { to { opacity: 0; transform: translateX(-5vw); } }
@keyframes mo-page-in { from { opacity: 0; transform: translateX(5vw); } }
::view-transition-old(root) { animation: mo-page-out .26s cubic-bezier(.4,0,.2,1) both; }
::view-transition-new(root) { animation: mo-page-in .55s cubic-bezier(.2,.7,.2,1) both; }
::view-transition-old(site-bar), ::view-transition-new(site-bar) { animation: none; }

/* ---------- 03 · headings cut in from below, word by word ---------- */
.js.mo .mo-cut { display: inline-block; overflow: hidden; vertical-align: top; line-height: inherit; padding: 0 .04em .12em 0; margin-bottom: -.12em; }   /* the clip box must not add leading between lines */
.js.mo .mo-cut > span { display: inline-block; transform: translateY(118%) rotate(2deg); transform-origin: 0 100%; transition: transform .95s cubic-bezier(.2,.85,.2,1); transition-delay: calc(var(--i, 0) * 55ms); will-change: transform; }
.js.mo .mo-in .mo-cut > span { transform: none; }
/* card reveals lean in from the side instead of rising */
.js.mo .grid-reveal .card[data-rev] { transform: translateX(-28px) rotate(-1.2deg); }
.js.mo .grid-reveal .card[data-rev].in { transform: none; }

/* ---------- 04 · tilt with glare, at half the lab's angle ---------- */
.mo-tilt { transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s; will-change: transform; }
.mo-tilt.mo-live { transition: transform .07s linear, box-shadow .5s; }
.mo-tilt:hover { box-shadow: 0 30px 60px -32px rgba(0,0,0,.95), 0 0 0 1px rgba(52,211,153,.26); }
.mo-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; z-index: 2; mix-blend-mode: screen;
  background: radial-gradient(520px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.13), rgba(255,255,255,.035) 40%, transparent 62%);
  transition: opacity .3s; }
.mo-tilt:hover .mo-glare { opacity: 1; }
.mo .card > *:not(.mo-glare), .mo .fc > *:not(.mo-glare) { position: relative; z-index: 1; transform: translateZ(1px); }
.mo .stampcard > *:not(.mo-glare) { transform: translateZ(1px); }

/* ---------- 05 · a perspective floor under the process path ---------- */
.mo-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 68%; pointer-events: none; z-index: 0; overflow: hidden; perspective: 520px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 45%, #000 88%, transparent); mask-image: linear-gradient(180deg, transparent 0, #000 45%, #000 88%, transparent); }
.mo-floor::before { content: ""; position: absolute; left: 0; right: 0; top: -120%; bottom: 0;
  background-image: linear-gradient(rgba(52,211,153,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(52,211,153,.17) 1px, transparent 1px);
  background-size: 72px 72px; transform-origin: 50% 100%; transform: rotateX(66deg); animation: mo-floor 5.5s linear infinite; }
@keyframes mo-floor { to { background-position: 0 72px, 0 0; } }
.mo .pathact > .wrap, .mo .path-sticky > .wrap { position: relative; z-index: 1; }
.mo .closeband { isolation: isolate; }
.mo .closeband .close-in { position: relative; z-index: 1; }

/* ---------- 07 · box grid behind the plain sections ---------- */
.mo-boxes { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .9; }
/* Consulting carries more of this than any other page - five engagement blocks and the process path -
   so the grid is held back there and reads as texture rather than an effect. */
html[data-page="consulting"] .mo-boxes { opacity: .4; }
.mo .sec > .wrap { position: relative; z-index: 1; }

/* ---------- 08 · the sticky index beside the engagements (Consulting) ---------- */
@media (min-width: 860px) {
  .mo-engs { display: grid; grid-template-columns: minmax(0, 1fr) clamp(13rem, 20vw, 17rem); column-gap: clamp(2rem, 4vw, 3.2rem); align-items: start; }
  .mo-engs > * { grid-column: 1; }
  .mo-engs > .head-mid, .mo-engs > .sec-head { grid-column: 1 / -1; }   /* the section head stays centred on the page, not the column */
  .mo-engs > .mo-sticky { grid-column: 2; grid-row: var(--row, 2) / span var(--n, 5); position: sticky; top: var(--top, 6.5rem); align-self: start; padding: 1.7rem 0 0 1.4rem; border-left: 1px solid rgba(157,179,170,.16); }   /* 1.7rem = the engagement's own top padding, so the numeral sits level with the heading */
  .mo-sticky .num { font: 700 clamp(3.6rem, 6.5vw, 6.5rem)/1 var(--font-display, Archivo, system-ui, sans-serif); letter-spacing: -.03em; color: #f4f4f5; font-variant-numeric: tabular-nums; position: relative; height: 1em; overflow: hidden; }
  .mo-sticky .num span { position: absolute; left: 0; top: 0; transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .35s; }
  .mo-sticky .num span.prev { transform: translateY(-105%); opacity: 0; }
  .mo-sticky .num span.next { transform: translateY(105%); opacity: 0; }
  .mo-sticky .num span b { color: #34d399; font-weight: 700; }
  .mo-sticky .ttl { font: 600 1.05rem/1.25 var(--font-display, Archivo, system-ui, sans-serif); color: #e7ebe8; margin: .9rem 0 .25rem; min-height: 2.5em; }
  .mo-sticky .meta { font-size: .66rem; letter-spacing: .18em; color: #8a978f; text-transform: uppercase; }
  .mo-sticky .rail { display: grid; gap: .45rem; margin-top: 1.4rem; }
  .mo-sticky .rail i { display: block; height: 2px; width: 2.2rem; background: rgba(157,179,170,.2); transition: background .3s, width .4s cubic-bezier(.2,.7,.2,1); }
  .mo-sticky .rail i.on { background: #34d399; width: 4.4rem; box-shadow: 0 0 10px rgba(52,211,153,.6); }
}
@media (max-width: 859px) { .mo-sticky { display: none; } }

/* ---------- 09 · nav: the underline sweeps in from the left and out to the right ---------- */
.mo .site-nav a { position: relative; border-bottom-color: transparent !important; }
.mo .site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: #34d399; transform: scaleX(0); transform-origin: 100% 50%; transition: transform .32s cubic-bezier(.2,.7,.2,1); }
.mo .site-nav a:hover::after, .mo .site-nav a:focus-visible::after, .mo .site-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: 0 50%; }

/* ---------- stillness ---------- */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .js.mo .mo-cut > span { transition: none; transform: none; }
  .js.mo .grid-reveal .card[data-rev] { transform: none; }
  .mo-floor::before { animation: none !important; }
  .mo-tilt { transition: none; }
  .mo-boxes { display: none; }
  .mo .site-nav a::after { transition: none; }
}