/* Wave 3 chapter kit (identical copy in work/, about/, team/): rail, pixel seams, plate rooms, light plates, Next.
   Transform and opacity only, exponential ease-out (var(--ease)); stills get the finished state. */

/* ---------- the chapter rail: square markers, Space Mono labels, navigation not decoration ---------- */
.xp-rail { display: none; }
@media (min-width: 1024px) {
  .xp-rail { display: block; position: fixed; right: clamp(14px, 1.6vw, 28px); top: 50%; z-index: 45; transform: translateY(-50%);
    --r-ink: oklch(0.965 0.005 358); --r-dim: oklch(0.965 0.005 358 / .34); --r-chip: oklch(0.135 0.006 358 / .9); }
  .xp-rail.on-paper { --r-ink: oklch(0.17 0.006 358); --r-dim: oklch(0.17 0.006 358 / .3); --r-chip: oklch(0.975 0.003 358 / .92); }
  .xp-rail ol { display: grid; gap: 4px; }
  .xp-rail a { position: relative; display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-start; gap: 12px; min-height: 28px; padding-left: 16px; text-decoration: none; }
  .xp-rail i { flex: none; width: 7px; height: 7px; background: var(--r-dim); transition: background-color .5s var(--ease), transform .6s var(--ease); }
  .xp-rail span { font: 400 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--r-ink); white-space: nowrap;
    padding: 6px 8px; background: var(--r-chip); opacity: 0; transform: translateX(8px); pointer-events: none;
    transition: opacity .5s var(--ease), transform .6s var(--ease); }
  .xp-rail a[aria-current] i { background: var(--accent); transform: scale(1.57); }
  .xp-rail a:hover i { background: var(--r-ink); }
  .xp-rail a[aria-current]:hover i { background: var(--accent); }
  .xp-rail:hover span, .xp-rail:focus-within span, .xp-rail.is-tell a[aria-current] span { opacity: 1; transform: none; }
  .xp-rail a:focus-visible { outline: none; }
  .xp-rail a:focus-visible i { outline: 2px solid var(--accent); outline-offset: 3px; }
}

/* ---------- pixel seams: the next ground arrives in squares (motion mode only, built by xp.js) ---------- */
[data-seam] { position: relative; }
.xp-seam { position: absolute; left: 0; right: 0; bottom: 100%; z-index: 3; display: grid; grid-template-columns: repeat(var(--cols, 40), var(--s, 40px)); grid-auto-rows: var(--s, 40px); overflow: hidden;
  height: calc(var(--s, 40px) * 2); pointer-events: none; --seam: var(--ink-0); }
.xp-seam i { background: var(--seam);
  transform: scale(clamp(0, calc((var(--p, 0) - var(--d, 0)) * 4.5), 1)); }

/* ---------- plate rooms: the dark chapter plate is the room, the words sit in its empty side ---------- */
.xp-room { position: relative; isolation: isolate; background: var(--ink-0); }
.xp-stage { position: relative; min-height: 100svh; overflow: hidden; display: flex; align-items: center; }
.xp-media { position: absolute; inset: 0; z-index: 0; transform-origin: 0 0; will-change: transform; }
.xp-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--op, center); display: block; }
.xp-assemble { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.xp-copy { position: relative; z-index: 2; width: 100%; padding-block: calc(var(--hd) + 48px) 72px; }
.xp-copy-in { max-width: min(470px, 34vw); }
.xp-room[data-side="right"] .xp-copy-in { margin-left: auto; }
.xp-copy .h2 { font-size: clamp(2.4rem, 4.2vw, 4.25rem); }
.xp-copy .body { color: var(--fg-2); }
.xp-steps { margin-top: clamp(28px, 5vh, 48px); border-top: 1px solid oklch(0.965 0.005 358 / .18); }
.xp-steps li { position: relative; padding: 18px 0 18px 26px; border-bottom: 1px solid oklch(0.965 0.005 358 / .12); transition: opacity .7s var(--ease); }
.xp-steps li::before { content: ""; position: absolute; left: 0; top: 26px; width: 9px; height: 9px; background: oklch(0.965 0.005 358 / .5);
  transition: background-color .5s var(--ease), transform .6s var(--ease); }
.xp-steps h3 { font: 700 clamp(1.4rem, 1.9vw, 1.9rem)/1.05 var(--f-display); letter-spacing: -0.02em; }
.xp-steps p { color: var(--fg-2); margin-top: 8px; max-width: 40ch; font-size: .9875rem; }
/* the step in view is lit; the others stay readable */
.is-stepping .xp-steps li { opacity: .42; }
.is-stepping .xp-steps li.is-on { opacity: 1; }
.xp-steps li.is-on::before { background: var(--accent); transform: scale(1.4); }
.xp-hint { display: none; }

/* desktop with motion and WebGL: the room pins while the plate assembles and the camera walks it */
.gl .xp-room { height: 320vh; }
.gl .xp-stage { position: sticky; top: 0; height: 100vh; min-height: 640px; }
.gl .xp-hint { display: flex; align-items: center; gap: 10px; margin-top: 22px; font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.gl .xp-hint::before { content: ""; width: 6px; height: 6px; background: var(--accent); }

/* phones: the plate is a picture, the words follow it; all steps equal */
@media (max-width: 767px) {
  .xp-stage { display: block; min-height: 0; }
  .xp-media { position: relative; inset: auto; aspect-ratio: 4 / 3; transform: none !important; }
  .xp-media img { object-position: var(--op-s, var(--op, center)); }
  .xp-copy { padding-block: 32px 88px; }
  .xp-copy-in { max-width: none; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .xp-copy-in { max-width: 46vw; }
}

/* ---------- light plates: the pale gallery still on a paper chapter, type in its empty wall ---------- */
.xp-light { position: relative; margin: 0; overflow: hidden; }
.xp-light-img { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 714; object-fit: cover; }
.xp-light-copy { position: relative; padding: 32px var(--pad) 0; }
@media (min-width: 900px) {
  .xp-light-copy { position: absolute; left: var(--cx, 6%); top: var(--cy, 9%); width: var(--cw, 36%); padding: 0; }
}
@supports (animation-timeline: view()) {
  .motion .xp-light-img { animation: xp-light linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; transform-origin: var(--fo, 70% 60%); }
  @keyframes xp-light { from { transform: scale(1.08); opacity: .4; } to { transform: none; opacity: 1; } }
}

/* ---------- Next: the related page, after the closing ---------- */
.xp-next { display: inline-flex; align-items: baseline; gap: 18px; margin-top: clamp(40px, 7vh, 72px); padding-top: 22px; text-decoration: none; color: var(--fg);
  border-top: 1px solid var(--rule); min-width: min(420px, 100%); }
.xp-next-k { display: inline-flex; align-items: center; gap: 10px; font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.xp-next-k::before { content: ""; width: 7px; height: 7px; background: var(--accent); }
.xp-next-t { font: 700 clamp(1.6rem, 2.6vw, 2.5rem)/1 var(--f-display); letter-spacing: -0.02em; transition: transform .6s var(--ease); }
.xp-next-t::after { content: ""; display: inline-block; width: .32em; height: .32em; margin-left: .35em; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg) translate(-.08em, .02em); }
.xp-next:hover .xp-next-t, .xp-next:focus-visible .xp-next-t { transform: translateX(10px); }