/* ─────────────────────────────────────────────
   Fonts — ABC Monument Grotesk Regular (the only licensed face)
   ───────────────────────────────────────────── */
@font-face {
  font-family: "Monument Grotesk";
  src: url("fonts/ABCMonumentGrotesk-Regular.woff2?v=2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* ─────────────────────────────────────────────
   Tokens
   ───────────────────────────────────────────── */
:root {
  --bg: #0a0a0a;
  --fg: #fafafa;
  --fg-2: #a3a3a3;
  --rule: #1f1f1f;

  --sans: "Monument Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;  /* free, OFL, via Google Fonts */

  --measure: 34.5rem;
  --gutter: 20px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  background: var(--bg);
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--fg-2);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.625;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  text-wrap: pretty;   /* inherited: avoids orphans and ragged last lines everywhere */
  overflow-x: clip;
}

::selection { background: var(--fg); color: var(--bg); }

h1, h2 { font-size: inherit; font-weight: inherit; color: var(--fg); }
.title { color: var(--fg); }
.muted { color: var(--fg-2); }

/* Dashed underline; a bright dash line draws in over it on hover */
a {
  color: var(--fg);
  text-decoration: none;
  background-image:
    repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 6px),
    repeating-linear-gradient(90deg, #555 0 3px, transparent 3px 6px);
  background-size: 0% 1px, 100% 1px;
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 1px;
  transition: background-size .45s var(--ease);
}
a:hover, a:focus-visible { background-size: 100% 1px, 100% 1px; }
a:focus-visible { outline: none; }

/* ─────────────────────────────────────────────
   Column
   ───────────────────────────────────────────── */
.page {
  max-width: calc(var(--measure) + var(--gutter) * 2);
  margin: 0 auto;
  padding: clamp(64px, 12vh, 112px) var(--gutter) 0;
}

.head { margin-bottom: 24px; }
.avatar {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  margin-bottom: 16px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
  filter: grayscale(1) contrast(1.05);
  transition: transform .5s var(--spring), filter .4s var(--ease);
}
.avatar:hover { transform: scale(1.14) rotate(-6deg); filter: grayscale(1) contrast(1.15) brightness(1.05); }
.head h1 {
  display: inline-block;
  cursor: default;
  font-variant-numeric: tabular-nums;
}

.bio p + p { margin-top: 1.1em; }

.block { margin-top: 80px; }
.block h2 { margin-bottom: 12px; }

/* Hover focus: the row under the cursor stays lit, the rest recede */
.rows li > *,
.roles li > * { transition: opacity .35s var(--ease), transform .5s var(--spring); }
.rows:hover li:not(:hover) > *,
.roles:hover li:not(:hover) > * { opacity: .35; }
.rows .title { display: inline-block; }
.rows li:hover .title { transform: translateX(4px); }

/* Principles */
.rows { list-style: none; }
.rows li {
  display: grid;
  grid-template-columns: 11.5rem 1fr;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
}

/* Experience */
.roles { list-style: none; }
.roles li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
}
.roles li:hover .logo { transform: scale(1.14) rotate(-6deg); }
.logo {
  transition: transform .5s var(--spring);
  width: 24px;
  height: 24px;
  margin-top: 0;
  border-radius: 6px;
  object-fit: contain;
  background: var(--tile, transparent);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
  margin-top: 1px;
}
.logo[style*="--tile:#fff"] { padding: 3px; }
.role-line a { background-size: 0% 1px, 0% 1px; }
.role-line a:hover { background-size: 100% 1px, 0% 1px; }
.role-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.role-line .note { color: var(--fg-2); }
.yr {
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-top: 2px;
}
.desc {
  margin-top: 8px;
}

/* ─────────────────────────────────────────────
   Work ring
   ───────────────────────────────────────────── */
/* Full-bleed band inside the text column */
.work {
  position: relative;
  width: 100vw;
  margin: 72px 0 0 calc(50% - 50vw);
  overflow-x: clip;   /* vertical stays open so the edge blur can fade out above and below */
  overflow-y: visible;
}
.ring {
  --card-w: clamp(320px, 50vw, 760px);
  position: relative;
  height: calc(var(--card-w) * 0.625 + 140px);
  perspective: 1600px;   /* set to the ring radius in JS */
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}

/* Progressive blur at the edges: stacked backdrop blurs, each fading out sooner,
   so the blur builds toward the screen edge instead of a hard cut or a fade */
.edge-blur {
  position: absolute;
  top: -80px;
  bottom: -80px;
  width: clamp(40px, 10vw, 180px);
  pointer-events: none;
  z-index: 2;
}
.edge-blur.left  { left: 0; }
.edge-blur.right { right: 0; transform: scaleX(-1); }
.edge-blur i {
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(var(--b));
          backdrop-filter: blur(var(--b));
  -webkit-mask-image: linear-gradient(90deg, #000, transparent var(--to));
          mask-image: linear-gradient(90deg, #000, transparent var(--to));
}
.edge-blur i:nth-child(1) { --b: 1px; --to: 100%; }
.edge-blur i:nth-child(2) { --b: 3px; --to: 55%; }
.edge-blur i:nth-child(3) { --b: 8px; --to: 18%; }
.ring.dragging { cursor: grabbing; }
.ring-stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--card-w);
  aspect-ratio: 16 / 10;
  margin-left: calc(var(--card-w) / -2);
  margin-top: calc(var(--card-w) * -0.3125);
  border-radius: 14px;
  overflow: hidden;
  background: #151515;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 40px 80px -30px rgba(0,0,0,.85);
  will-change: transform;
  backface-visibility: hidden;
}
.card > .shade {
  position: absolute;
  inset: 0;
  background: #0a0a0a;
  opacity: 0;
  pointer-events: none;
}
.lightbox-stage .shade { display: none; }

/* ── Scenes: same frame, different composition inside ── */
.scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--bg);
  container-type: inline-size;
}
.layer {
  position: absolute;
  display: block;
  object-fit: cover;
  height: auto;
  max-width: none;
  pointer-events: none;
  -webkit-user-drag: none;
  animation: var(--anim) 4.4s linear infinite;
}

/* ─────────────────────────────────────────────
   Tile motion. Each animated tile runs on one clock (its `loop` in script.js), starts from
   0 when it reaches the centre and rests on its `poster` frame everywhere else.
   Easing: out  cubic-bezier(.16,1,.3,1)   — fast start, soft landing (entrances, moves)
           in   cubic-bezier(.7,0,.84,0)   — exits
           io   cubic-bezier(.65,0,.35,1)  — state changes
           pop  cubic-bezier(.34,1.56,.64,1)
   ───────────────────────────────────────────── */

/* ── Whaletax (4.4s, 1% = 44ms) ── one continuous loop, no hard cuts:
   0–30 charts draw in left→right + values count up · 34–48 cursor glides to Import Data (button → hover)
   · 49 click · 52–58 menu drops · 58–70 cursor to Sync Wallets · 73 click · 77–83 menu closes
   · 80–94 the sync clears the charts (they wipe off left→right) while the values roll back to the first frame,
   which is exactly where the loop starts drawing again */
.inl svg { display: block; width: 100%; height: auto; overflow: visible; }
.wt-ln { stroke-dasharray: 1 1; stroke-dashoffset: 2; animation: wt-draw 4.4s infinite; }
.wt-ln.wt-mini { animation-name: wt-draw-mini; }
.wt-ln.wt-rev  { animation-name: wt-draw-rev; }
.wt-ar  { animation: wt-area 4.4s infinite; }
/* All offsets stay positive: Safari mishandles negative dash offsets. The dash pattern repeats every
   2 (dash 1 + gap 1), so 3 ≡ 1 (hidden), 2 ≡ 0 (fully drawn); counting down reveals a line from its
   start, counting up reveals it from its end (for the sparkline whose path runs right → left). */
@keyframes wt-draw {
  0%          { stroke-dashoffset: 3; animation-timing-function: cubic-bezier(.22,1,.36,1); }
  29.5%       { stroke-dashoffset: 2; }
  80.7%       { stroke-dashoffset: 2; animation-timing-function: cubic-bezier(.65,0,.35,1); }
  94.3%, 100% { stroke-dashoffset: 1; }
}
@keyframes wt-draw-mini {
  0%, 2.3%    { stroke-dashoffset: 3; animation-timing-function: cubic-bezier(.22,1,.36,1); }
  27.3%       { stroke-dashoffset: 2; }
  81.8%       { stroke-dashoffset: 2; animation-timing-function: cubic-bezier(.65,0,.35,1); }
  93.2%, 100% { stroke-dashoffset: 1; }
}
@keyframes wt-draw-rev {
  0%, 2.3%    { stroke-dashoffset: 1; animation-timing-function: cubic-bezier(.22,1,.36,1); }
  27.3%       { stroke-dashoffset: 2; }
  81.8%       { stroke-dashoffset: 2; animation-timing-function: cubic-bezier(.65,0,.35,1); }
  93.2%, 100% { stroke-dashoffset: 3; }
}
@keyframes wt-area {
  0%, 4.5%   { opacity: 0; animation-timing-function: cubic-bezier(.22,1,.36,1); }
  31.8%      { opacity: 1; }
  79.5%      { opacity: 1; animation-timing-function: cubic-bezier(.65,0,.35,1); }
  90.9%, 100% { opacity: 0; }
}

/* the two values (drawn by drawWtNum) — DM Sans Medium at Figma's size, with its superscript $ */
.live.wtn-wrap { aspect-ratio: auto; height: 100%; }
.wtn { position: absolute; inset: 0; container-type: inline-size; }
.wtn-v {
  position: absolute; top: var(--wt-top, 34.64%);
  color: #171717; white-space: nowrap;
  font: 500 var(--wt-fs, 4.2564cqw)/var(--wt-fs, 4.2564cqw) "DM Sans", system-ui, sans-serif;
  font-variation-settings: "opsz" 14;
  letter-spacing: 0;
}
.wtn-cost { left: var(--wt-cost, 18.822%); }
.wtn-ret  { left: var(--wt-ret, 58.372%); }
/* Figma sets the $ with the font's superscript feature; the web build of DM Sans doesn't ship it, so draw it */
.wtn-cur  { display: inline-block; font-size: .62em; line-height: 1; transform: translateY(-.42em); }

.layer.seq { opacity: 0; }               /* resting state (and reduced motion): menu closed, no cursor */
.layer.menu, .layer.menu-hl { filter: drop-shadow(0 .45cqw .9cqw rgba(0,0,0,.12)); transform-origin: 50% 0; }
.layer.hand { transform-origin: 30% 20%; }
.a-wt-btn     { --anim: wt-btn; }
.a-wt-menu    { --anim: wt-menu; }
.a-wt-menu-hl { --anim: wt-menu-hl; }
.a-wt-hand    { --anim: wt-hand; }
.a-wt-ripple  { --anim: wt-ripple; }
/* the resting button sits over the hover state baked into the base; it lifts off while the cursor is on it */
@keyframes wt-btn {
  0%, 42%    { opacity: 1; animation-timing-function: cubic-bezier(.65,0,.35,1); }
  45.5%, 56.8% { opacity: 0; animation-timing-function: cubic-bezier(.65,0,.35,1); }
  61.4%, 100% { opacity: 1; }
}
@keyframes wt-hand {
  0%, 34.1%  { opacity: 0; transform: translate(var(--sx), var(--sy)); animation-timing-function: cubic-bezier(.45,0,.2,1); }
  37.5%      { opacity: 1; }
  47.7%      { transform: translate(var(--dx), var(--dy)); animation-timing-function: cubic-bezier(.4,0,.6,1); }
  49.4%      { transform: translate(var(--dx), var(--dy)) scale(.9); animation-timing-function: cubic-bezier(.34,1.56,.64,1); }
  52.3%, 58% { transform: translate(var(--dx), var(--dy)); }
  58%        { animation-timing-function: cubic-bezier(.45,0,.2,1); }
  70.5%      { transform: none; animation-timing-function: cubic-bezier(.4,0,.6,1); }
  72.7%      { transform: scale(.9); animation-timing-function: cubic-bezier(.34,1.56,.64,1); }
  75.6%, 79.5% { opacity: 1; transform: none; }
  79.5%      { animation-timing-function: cubic-bezier(.55,0,.45,1); }
  93.2%, 100% { opacity: 0; transform: translate(3cqw, 4.5cqw); }
}
@keyframes wt-menu {
  0%, 51.7%  { opacity: 0; transform: translateY(-1cqw) scaleY(.95); animation-timing-function: cubic-bezier(.22,1,.36,1); }
  57.9%, 77.3% { opacity: 1; transform: none; }
  77.3%      { animation-timing-function: cubic-bezier(.65,0,.35,1); }
  83%, 100%  { opacity: 0; transform: translateY(-.6cqw) scaleY(.97); }
}
@keyframes wt-menu-hl {
  0%, 51.7%  { transform: translateY(-1cqw) scaleY(.95); animation-timing-function: cubic-bezier(.22,1,.36,1); }
  57.9%, 77.3% { transform: none; }
  77.3%      { animation-timing-function: cubic-bezier(.65,0,.35,1); }
  83%, 100%  { transform: translateY(-.6cqw) scaleY(.97); }
  0%, 64.8%  { opacity: 0; animation-timing-function: cubic-bezier(.65,0,.35,1); }
  68.2%, 77.3% { opacity: 1; animation-timing-function: cubic-bezier(.65,0,.35,1); }
  83%, 100%  { opacity: 0; }
}
@keyframes wt-ripple {
  0%          { opacity: .85; transform: translate(var(--dx), var(--dy)) scale(.35); animation-timing-function: cubic-bezier(.22,1,.36,1); }
  12.5%, 100% { opacity: 0;   transform: translate(var(--dx), var(--dy)) scale(1.3); }
}

/* ── Live widget: Credit score ── */
.live { position: absolute; aspect-ratio: 1; }
.cs {
  --u: calc(100cqw / 1336);           /* one Figma unit */
  position: absolute;
  inset: 0;
  container-type: inline-size;
  background: #fff;
  border-radius: 17%;
  color: #231f20;
  font-family: "Open Sans", system-ui, sans-serif;
  letter-spacing: 0;
}
.cs > * { position: absolute; }
.cs-gauge { inset: 0; width: 100%; height: 100%; overflow: visible; }
.cs-title, .cs-updated, .cs-num, .cs-pts { white-space: nowrap; }
.cs-title {
  left: calc(152 * var(--u)); top: calc(152 * var(--u));
  font-size: calc(113.7 * var(--u)); line-height: calc(151.6 * var(--u));
}
.cs-num {
  left: calc(464 * var(--u)); top: calc(540 * var(--u)); width: calc(390 * var(--u));
  text-align: center; font-weight: 700;
  font-size: calc(227.4 * var(--u)); line-height: calc(265.3 * var(--u));
}
.cs-updated {
  left: calc(265 * var(--u)); top: calc(796 * var(--u)); width: calc(790 * var(--u));
  text-align: center; color: #424242;
  font-size: calc(104.2 * var(--u)); line-height: calc(151.6 * var(--u));
}
.cs-chip {
  left: calc(152 * var(--u)); top: calc(1033 * var(--u));
  display: flex; align-items: center; gap: calc(37 * var(--u));
  transform-origin: 0 50%;
}
.cs-chip svg { width: calc(152 * var(--u)); height: calc(152 * var(--u)); flex: none; }
.cs-pts {
  position: static;
  color: #007a4b; font-weight: 600;
  font-size: calc(113.7 * var(--u)); line-height: calc(151.6 * var(--u));
}

/* the dial, score and chip are drawn by drawCredit() in script.js */

/* ── Live widget: Nightfall endpoint agent (units = the Figma window, 2030 wide) ── */
.live.ag-wrap { aspect-ratio: 2030 / 1584; }
.ag {
  position: absolute; inset: 0;
  container-type: inline-size;
  --u: calc(100cqw / 2030);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", "Open Sans", system-ui, sans-serif;
  white-space: nowrap;
}
.ag-v {
  position: absolute; left: calc(660 * var(--u));
  font-size: calc(49.94 * var(--u)); line-height: calc(71.34 * var(--u)); letter-spacing: -.012em;
  transition: opacity .3s cubic-bezier(.65,0,.35,1), color .25s ease;
}
.ag-v:nth-child(1) { top: calc(514 * var(--u)); }
.ag-v:nth-child(2) { top: calc(628 * var(--u)); }
.ag-v:nth-child(3) { top: calc(742 * var(--u)); letter-spacing: -.035em; }
.ag-v:nth-child(4) { top: calc(856 * var(--u)); }
.ag-v:nth-child(5) { top: calc(970 * var(--u)); }
.ag-v:nth-child(6) { top: calc(1084 * var(--u)); }
.ag-status { left: calc(720 * var(--u)); }
.ag-status.is-wait { color: rgba(255, 255, 255, .55); }
/* status dot (Figma: 48 ring at 50% + 24 core). Grey and breathing while connecting; green and glowing once connected */
.ag-dot {
  position: absolute; left: calc(660 * var(--u)); top: calc(526 * var(--u));
  width: calc(48 * var(--u)); height: calc(48 * var(--u));
  border-radius: 50%;
  background: rgba(148, 140, 176, .32);
  transition: background .35s cubic-bezier(.65,0,.35,1), box-shadow .5s cubic-bezier(.16,1,.3,1);
}
.ag-dot::before, .ag-dot::after { content: ""; position: absolute; border-radius: 50%; }
.ag-dot::after {
  inset: 25%;
  background: #8f88a8;
  transition: background .35s cubic-bezier(.65,0,.35,1);
  animation: ag-breathe 1.1s cubic-bezier(.65,0,.35,1) infinite alternate;
}
.ag-dot::before { inset: 0; background: rgba(34, 197, 94, .45); opacity: 0; }
.ag.is-on .ag-dot {
  background: rgba(34, 197, 94, .5);
  box-shadow: 0 0 calc(22 * var(--u)) calc(2 * var(--u)) rgba(34, 197, 94, .45);
  animation: ag-pop .45s cubic-bezier(.34,1.56,.64,1);
}
.ag.is-on .ag-dot::after { background: #22c55e; animation: none; }
.ag.is-on .ag-dot::before { animation: ag-ping 1.8s cubic-bezier(.16,1,.3,1) .2s infinite; }
@keyframes ag-breathe { from { opacity: .55; } to { opacity: 1; } }
@keyframes ag-pop     { 0% { transform: scale(.6); } 100% { transform: none; } }
@keyframes ag-ping    { 0% { opacity: .9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2.1); } }
.ag.is-fading .ag-v:not(.ag-status) { opacity: 0; }

/* ── Live widget: Process Street run status ──
   One 7s loop (1% = 70ms): On-Track 2/24 → Due Soon 7/24 → Overdue 19/24 → Completed 24/24 → reset.
   Units are the Figma component's own (335 × 104). */
.live.st-wrap { aspect-ratio: 335 / 104; }
.st {
  position: absolute;
  inset: 0;
  container-type: inline-size;
  --u: calc(100cqw / 335);            /* resolves against .st itself in its descendants */
  color: #2f2f31;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Open Sans", system-ui, sans-serif;
  letter-spacing: -.025em;            /* browsers set SF Pro at this size with Text spacing; this matches the Figma widths */
  white-space: nowrap;
}
.st::before {
  content: ""; position: absolute; inset: 0;
  background: #fff;
  border: calc(1 * var(--u)) solid #f0f0f0;
  border-radius: calc(12 * var(--u));
}
.st > * { position: absolute; font-size: calc(10 * var(--u)); line-height: calc(12 * var(--u)); }
.st-kicker { left: calc(15 * var(--u)); top: calc(15 * var(--u)); font-weight: 700; }
.st-title  { left: calc(15 * var(--u)); top: calc(31 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(16 * var(--u)); letter-spacing: -.03em; }
.st-people { right: calc(15 * var(--u)); top: calc(15 * var(--u)); display: flex; align-items: center; gap: calc(8 * var(--u)); }
.st-faces  { display: flex; }
.st-faces > * {
  width: calc(16 * var(--u)); height: calc(16 * var(--u)); flex: none;
  border-radius: 50%; box-shadow: 0 0 0 calc(.75 * var(--u)) #fff;
  margin-left: calc(-4 * var(--u));
}
.st-faces > :first-child { margin-left: 0; }
.st-faces img { display: block; object-fit: cover; }
.st-more {
  background: #e0e0e1; color: #5c5c5e; font-weight: 600; letter-spacing: 0;
  font-size: calc(8 * var(--u)); line-height: calc(16 * var(--u)); text-align: center;
}
.st-badge {
  position: relative; height: calc(16 * var(--u)); width: calc(51 * var(--u));
  border-radius: calc(3 * var(--u)); background: #e2effc;
  clip-path: inset(0 -30% 0 -30%);   /* labels roll vertically; never crop them sideways */
  font-weight: 600; text-align: center;
  animation: st-badge 7s infinite;
}
.st-badge > span { position: absolute; inset: 0; line-height: calc(16 * var(--u)); opacity: 0; }
.st-badge .s-on   { color: #104b7c; opacity: 1; animation: st-l-on 7s infinite; }
.st-badge .s-soon { color: #c2410c; animation: st-l-soon 7s infinite; }
.st-badge .s-over { color: #9f1239; animation: st-l-over 7s infinite; }
.st-badge .s-done { color: #166534; animation: st-l-done 7s infinite; }
.st-track, .st-fill {
  left: calc(16 * var(--u)); top: calc(58 * var(--u)); height: calc(4 * var(--u));
  border-radius: calc(2 * var(--u));
}
.st-track { width: calc(305 * var(--u)); background: #f7f7f8; }
.st-fill  { width: calc(29 * var(--u)); background: #2c98e3; animation: st-fill 7s infinite; }
.st-next  { left: calc(15 * var(--u)); top: calc(75 * var(--u)); display: flex; gap: .3em; }
.st-next b { font-weight: 700; }
.st-steps { display: grid; font-weight: 500; }
.st-steps > span { grid-area: 1 / 1; justify-self: start; opacity: 0; }
.st-steps .n1 { opacity: 1; animation: st-n1 7s infinite; }
.st-steps .n2 { animation: st-n2 7s infinite; }
.st-steps .n3 { animation: st-n3 7s infinite; }
.st-steps .n4 { position: relative; font-style: italic; animation: st-n4 7s infinite; }
.st-steps .n4::after {
  content: ""; position: absolute; left: 0; right: 0; top: 54%; height: calc(.8 * var(--u));
  background: currentColor; transform: scaleX(0); transform-origin: 0 50%;
  animation: st-strike 7s infinite;
}
.st-count { right: calc(15 * var(--u)); top: calc(75 * var(--u)); color: #5c5c5e; animation: st-count 7s infinite; }

/* each step: bar grows with a fast-out ease while its colour, badge and count change together */
@keyframes st-fill {
  0%        { width: calc(4 * var(--u)); opacity: 0; background: #2c98e3; animation-timing-function: cubic-bezier(.16,1,.3,1); }
  1.5%      { opacity: 1; }
  8%        { width: calc(29 * var(--u)); }
  17%       { width: calc(29 * var(--u)); background: #2c98e3; animation-timing-function: cubic-bezier(.16,1,.3,1); }
  20%       { background: #f97316; }
  26%       { width: calc(91.5 * var(--u)); }
  37%       { width: calc(91.5 * var(--u)); background: #f97316; animation-timing-function: cubic-bezier(.16,1,.3,1); }
  40%       { background: #f43f5e; }
  46%       { width: calc(241.5 * var(--u)); }
  57%       { width: calc(241.5 * var(--u)); background: #f43f5e; animation-timing-function: cubic-bezier(.16,1,.3,1); }
  60%       { background: #1cc159; }
  66%       { width: calc(305 * var(--u)); }
  90%       { width: calc(305 * var(--u)); opacity: 1; background: #1cc159; animation-timing-function: cubic-bezier(.7,0,.84,0); }
  96%       { width: calc(4 * var(--u)); opacity: 0; background: #1cc159; }
  100%      { width: calc(4 * var(--u)); opacity: 0; background: #2c98e3; }
}
@keyframes st-badge {
  0%, 17%   { width: calc(51 * var(--u)); background: #e2effc; transform: none; animation-timing-function: cubic-bezier(.65,0,.35,1); }
  18.5%     { transform: scale(1.08); }
  20%, 37%  { width: calc(53 * var(--u)); background: #ffedd5; transform: none; animation-timing-function: cubic-bezier(.65,0,.35,1); }
  38.5%     { transform: scale(1.08); }
  40%, 57%  { width: calc(48 * var(--u)); background: #ffe4e6; transform: none; animation-timing-function: cubic-bezier(.65,0,.35,1); }
  58.5%     { transform: scale(1.08); }
  60%, 92%  { width: calc(59 * var(--u)); background: #dcfce7; transform: none; animation-timing-function: cubic-bezier(.65,0,.35,1); }
  96%, 100% { width: calc(51 * var(--u)); background: #e2effc; }
}
@keyframes st-l-on   { 0%, 17% { opacity: 1; transform: none; } 19%, 94% { opacity: 0; transform: translateY(-70%); } 94.01% { transform: translateY(70%); } 97%, 100% { opacity: 1; transform: none; } }
@keyframes st-l-soon { 0%, 17% { opacity: 0; transform: translateY(70%); } 19.5%, 37% { opacity: 1; transform: none; } 39%, 100% { opacity: 0; transform: translateY(-70%); } }
@keyframes st-l-over { 0%, 37% { opacity: 0; transform: translateY(70%); } 39.5%, 57% { opacity: 1; transform: none; } 59%, 100% { opacity: 0; transform: translateY(-70%); } }
@keyframes st-l-done { 0%, 57% { opacity: 0; transform: translateY(70%); } 59.5%, 92% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(-70%); } }
@keyframes st-n1 { 0%, 17% { opacity: 1; transform: none; } 19%, 94% { opacity: 0; transform: translateY(-60%); } 94.01% { transform: translateY(60%); } 97%, 100% { opacity: 1; transform: none; } }
@keyframes st-n2 { 0%, 17% { opacity: 0; transform: translateY(60%); } 20%, 37% { opacity: 1; transform: none; } 39%, 100% { opacity: 0; transform: translateY(-60%); } }
@keyframes st-n3 { 0%, 37% { opacity: 0; transform: translateY(60%); } 40%, 57% { opacity: 1; transform: none; } 59%, 100% { opacity: 0; transform: translateY(-60%); } }
@keyframes st-n4 {
  0%, 57%   { opacity: 0; transform: translateY(60%); color: #2f2f31; }
  60%, 62%  { opacity: 1; transform: none; color: #2f2f31; }
  67%, 92%  { opacity: 1; transform: none; color: #9d9d9f; }
  94%, 100% { opacity: 0; transform: translateY(-60%); color: #9d9d9f; }
}
@keyframes st-strike { 0%, 62% { transform: scaleX(0); animation-timing-function: cubic-bezier(.65,0,.35,1); } 67%, 100% { transform: scaleX(1); } }
@keyframes st-count  { 0%, 92% { opacity: 1; } 94%, 97% { opacity: 0; } 99%, 100% { opacity: 1; } }

/* ─────────────────────────────────────────────
   Footer
   ───────────────────────────────────────────── */
.foot {
  max-width: calc(var(--measure) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 80px var(--gutter) 64px;
  color: var(--fg-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}

/* ─────────────────────────────────────────────
   Lightbox
   ───────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(6,6,6,.92);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  cursor: zoom-out;
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.lightbox[hidden] { display: none; }
.lightbox.open { opacity: 1; }
.lightbox.is-tall .lightbox-stage {
  width: min(100%, calc(86vh * 0.8));
  aspect-ratio: 4 / 5;
}
.lightbox-stage {
  position: relative;
  width: min(1400px, 100%, calc(86vh * 1.6));
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
  transition: transform .55s var(--ease);
  will-change: transform;
}

/* ─────────────────────────────────────────────
   Entrance (scroll-triggered, staggered)
   ───────────────────────────────────────────── */
.js .ri {
  opacity: 0;
  transform: translateY(10px);
  filter: blur(6px);
  transition:
    opacity .9s var(--ease) var(--d, 0ms),
    transform .9s var(--ease) var(--d, 0ms),
    filter .9s var(--ease) var(--d, 0ms);
}
.js .ri.in { opacity: 1; transform: none; filter: none; }

@media (max-width: 560px) {
  .rows li { grid-template-columns: 1fr; gap: 0; }
}
/* Phones: same carousel, portrait tiles. One blur layer at the edges (backdrop blur is costly there). */
.work.is-tall .edge-blur i:first-child { --b: 5px; --to: 100%; }
.work.is-tall .edge-blur i:nth-child(n+2) { display: none; }
.work.is-tall .ring {
  --card-w: min(72vw, 400px);
  height: calc(var(--card-w) * 1.25 + 110px);
}
.work.is-tall .card {
  aspect-ratio: 4 / 5;
  margin-top: calc(var(--card-w) * -0.625);
}

@media (prefers-reduced-motion: reduce) {
  .js .ri { opacity: 1; transform: none; filter: none; transition: none; }
  .layer { animation: none; }
  .live *, .inl * { animation: none !important; }
  .rows li > *, .roles li > *, .logo, .avatar { transition: none; }
}