/* Motion and micro-interactions, from the jerry-design motion rules.
   Hovers start at once and finish in ~200ms. Monochrome: no coloured light on hover.
   The accent (International Orange) is used only for keyboard focus rings. */
:root {
  --d-press: 120ms;
  --d-fast: 200ms;
  --d-glide: 160ms;
  --d-arrow: 380ms;
  --e-ui: cubic-bezier(0.2, 0, 0, 1);
  --e-exit: cubic-bezier(0.4, 0, 1, 1);
  --accent: #e5532a;
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Before the intro sets its first frame: hide what it brings in (removed by motion.js, or after 2.5s). */
.motion-init .nav > *,
.motion-init .hero-copy,
.motion-init .card,
.motion-init [data-intro] { opacity: 0; }

.w { display: inline-block; }

/* ---------- Arrows that slide through their chip ----------
   One arrow slides out the way it points while its twin slides in behind it. */
.pill-arrow, .card .chip { position: relative; overflow: hidden; display: inline-grid; place-items: center; }
.arrow-in, .chip-in { grid-area: 1 / 1; display: block; line-height: 1; transition: transform var(--d-arrow) var(--e-ui); }
/* In px, not %: the arrow is narrower than its chip, and the 40px chip on Submit would show a % offset. */
.arrow-next { transform: translateX(-30px); }
.chip-next { transform: translateX(-160%); }
.chip-next[data-dir="ne"] { transform: translate(-160%, 160%); }

/* ---------- Pills ---------- */
.pill { transition: background-color var(--d-fast) var(--e-ui), scale var(--d-press) var(--e-ui); } /* never `transform`: GSAP moves it */
.pill:active { scale: 0.97; }
.pill-arrow { transition: transform var(--d-fast) var(--e-ui); }
@media (hover: hover) {
  .pill--soft:hover { background: color-mix(in srgb, var(--ink) 15%, transparent); }
  .pill--ink:hover { background: color-mix(in srgb, var(--ink) 86%, var(--paper)); }
  .pill--ink:hover .pill-arrow { transform: scale(1.08); }
  .pill:hover .arrow-in:first-child { transform: translateX(30px); }
  .pill:hover .arrow-next { transform: none; }
}
:is(.pill, .card, .card a, .row-link, .rail a, .person-link, .foot a, .wordmark):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}

/* ---------- Route cards ----------
   The whole card is the link (cards.js). On hover the card darkens, its shape comes forward
   (grows, darkens, turns toward the pointer), the text rises 4px together, and the link's arrow
   inverts into an ink chip and slides through it. The tile itself never moves or resizes. */
.card { cursor: pointer; isolation: isolate; transition: background-color var(--d-fast) var(--e-ui); }
/* The hover lift is on the text's children: GSAP owns .card-text's transform (its scroll exit). */
.card-text { display: flex; flex-direction: column; align-items: flex-start; }
.card-text > * { transition: translate var(--d-fast) var(--e-ui); }
.card-text > * { position: static !important; }
.card a { display: inline-flex; align-items: center; gap: 8px; }
.card .chip {
  width: 24px; height: 24px; margin-block: -2px; border-radius: var(--r-chip);
  transition: background-color var(--d-fast) var(--e-ui), color var(--d-fast) var(--e-ui);
}
@media (hover: hover) {
  .card:hover { background: color-mix(in srgb, var(--ink) 8.5%, transparent); }
  .card:hover .card-text > * { translate: 0 -4px; }
  .card:hover .chip { background: var(--ink); color: var(--paper); }
  .card:hover .chip-in:first-child { transform: translateX(160%); }
  .card:hover .chip-in:first-child[data-dir="ne"] { transform: translate(160%, -160%); }
  .card:hover .chip-next { transform: none; }
}
.card:active { background: color-mix(in srgb, var(--ink) 11%, transparent); }

/* ---------- Gliders: one soft highlight per group, gliding quickly between items ---------- */
.glider {
  position: absolute !important; z-index: 0 !important; pointer-events: none; left: 0; top: 0; width: 0; height: 0;
  border-radius: 10px; background: color-mix(in srgb, var(--ink) 4%, transparent);
  opacity: 0;
  transition: transform var(--d-glide) var(--e-ui), width var(--d-glide) var(--e-ui), height var(--d-glide) var(--e-ui), opacity var(--d-press) var(--e-ui);
}
.glider.is-on { opacity: 1; }
.glider.is-jump { transition: opacity var(--d-press) var(--e-ui); } /* first arrival: appear in place */
.foot .glider { background: color-mix(in srgb, var(--paper) 8%, transparent); border-radius: 8px; }
.rows, .rail ol, .foot-cols { position: relative; }
.rows > :not(.glider), .rail li, .foot-col { position: relative; z-index: 1; }

/* The rail's current section: an ink tick that glides with it. */
.rail-tick {
  position: absolute; left: -14px; top: 0; width: 2px; height: 16px; border-radius: 2px; background: var(--ink);
  transition: transform var(--d-fast) var(--e-ui), opacity var(--d-press) var(--e-ui);
}

/* Copy prompt: presses in; the copy icon swaps to a check with a small scale. */
.copy { position: relative; transition: transform var(--d-press) var(--e-ui); }
.copy:active { transform: scale(0.97); }
.copy .icon-slot { position: relative; display: inline-grid; width: 16px; height: 16px; }
.copy .icon-slot svg { grid-area: 1 / 1; display: block !important; transition: opacity var(--d-fast) var(--e-ui), transform var(--d-fast) var(--e-ui); }
.copy .icon-slot .i-check { opacity: 0; transform: scale(0.6); }
.copy[data-copied] .icon-slot .i-copy { opacity: 0; transform: scale(0.6); }
.copy[data-copied] .icon-slot .i-check { opacity: 1; transform: none; }

/* Team: the photo lifts a touch. */
.photo { transition: transform var(--d-fast) var(--e-ui); }
@media (hover: hover) { .person:hover .photo { transform: translateY(-2px); } }

/* Leaving the page: main fades out quickly on the ground colour, no lift. */
body.is-leaving main, body.is-leaving .foot { opacity: 0; transition: opacity 180ms var(--e-exit); }

@media (prefers-reduced-motion: reduce) {
  .pill, .pill-arrow, .arrow-in, .chip-in, .card, .card-text > *, .card .chip, .glider, .rail-tick, .copy, .photo { transition: none !important; }
  .pill:active { scale: none; }
  .copy:active { transform: none; }
}

/* The logomark (logo.js) springs its squares itself; they may overshoot the mark's box as they bounce. */
.logomark--live { overflow: visible; }