/* Spec 123 R1 + R2: home intro (once per visit) and the Relay feature beat. */

/* ── R1 · intro ─────────────────────────────────────────────── */
#intro{display:none}
.intro-on #intro{display:flex;position:fixed;inset:0;z-index:1000;align-items:center;justify-content:center;overflow:hidden;
  background:radial-gradient(ellipse 70% 60% at 50% 46%,#1B2A3D 0%,#14130E 68%);color:#F4F0E6;
  animation:introOut .4s var(--ease) 3.8s forwards}
.intro-skip #intro{animation:introOut .25s ease forwards}
@keyframes introOut{to{opacity:0;visibility:hidden}}
.intro__stage{position:relative;width:min(92vw,560px);height:min(92vw,560px);display:grid;place-items:center}
.intro__ring{position:absolute;inset:0;animation:ringIn 3.8s var(--ease) both}
.intro__ring i{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:#2A3A50;
  transform:rotate(calc(var(--n)*30deg)) translateY(calc(min(92vw,560px)*-.44));
  animation:dotOn .3s ease calc(.12s + var(--n)*.17s) forwards}
@keyframes dotOn{to{background:#7FB2E6;box-shadow:0 0 14px 3px rgba(127,178,230,.55)}}
@keyframes ringIn{0%{opacity:0;transform:scale(.9) rotate(-8deg)}12%{opacity:1;transform:none}78%{opacity:1;transform:none}100%{opacity:0;transform:scale(.18) rotate(18deg)}}
.intro__card{position:absolute;width:min(78vw,340px);padding:16px 18px;border:1px solid rgba(255,255,255,.14);border-radius:12px;
  background:rgba(28,26,20,.92);box-shadow:0 18px 60px rgba(0,0,0,.45);font-family:var(--ui);font-size:13px;line-height:1.45;
  opacity:0;--x:0%;--y:0%;animation:glimpse .56s var(--ease) var(--d) both}
/* Spec 132 R1: one card at a time. Each glimpse is .56 s and cards start .58 s apart, so a card is fully
   out before the next is in; they alternate around the ring instead of stacking on one spot. */
.intro__card:nth-of-type(1){--x:-7%;--y:-16%}
.intro__card:nth-of-type(2){--x:9%;--y:12%}
.intro__card:nth-of-type(3){--x:-9%;--y:9%}
.intro__card:nth-of-type(4){--x:7%;--y:-12%}
@media (max-width:599px){.intro__card{--x:0%!important;--y:0%!important}}
@keyframes glimpse{0%{opacity:0;transform:translate(var(--x),var(--y)) translateY(14px) scale(.95);filter:blur(4px)}
  24%{opacity:1;transform:translate(var(--x),var(--y));filter:none}
  78%{opacity:1;transform:translate(var(--x),var(--y));filter:none}
  100%{opacity:0;transform:translate(var(--x),var(--y)) translateY(-10px) scale(.97);filter:blur(3px)}}
.intro__card h4{margin:0 0 10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#A88A50;font-weight:500}
.intro__card p{margin:0;color:#C9C3B4}
.intro__card b{color:#F4F0E6;font-weight:600}
.intro__flow{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.intro__flow span{padding:5px 8px;border:1px solid rgba(255,255,255,.16);border-radius:6px;opacity:.35;animation:lit .2s ease forwards}
.intro__flow span:nth-child(1){animation-delay:calc(var(--d) + .12s)}
.intro__flow span:nth-child(3){animation-delay:calc(var(--d) + .24s)}
.intro__flow span:nth-child(5){animation-delay:calc(var(--d) + .36s)}
.intro__flow em{font-style:normal;color:var(--muted,#6B6459)}
@keyframes lit{to{opacity:1;border-color:#7FB2E6;color:#F4F0E6}}
.intro__cite{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:11px;color:#7FB2E6}
.intro__bars{display:grid;gap:6px}
.intro__bars div{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:8px;font-size:12px}
.intro__bars s{display:block;height:6px;border-radius:3px;background:#7FB2E6;transform-origin:left;transform:scaleX(0);
  animation:grow .3s var(--ease) calc(var(--d) + .12s) forwards}
.intro__bars div:nth-child(2) s{animation-delay:calc(var(--d) + .2s)}
.intro__bars div:nth-child(3) s{animation-delay:calc(var(--d) + .28s)}
@keyframes grow{to{transform:scaleX(var(--w))}}
.intro__sum{font-family:var(--mono);font-size:12.5px;color:#F4F0E6}
.intro__track{height:8px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden;margin:8px 0 6px}
.intro__track s{display:block;height:100%;background:#7FB2E6;transform-origin:left;transform:scaleX(.15);animation:fill .38s var(--ease) calc(var(--d) + .1s) forwards}
@keyframes fill{to{transform:scaleX(1)}}
.intro__mark{position:absolute;text-align:center;opacity:0;animation:markIn .35s var(--ease) 2.85s forwards}
.intro__mark p{margin:0;font-family:var(--display);font-size:clamp(30px,6vw,48px);letter-spacing:-.01em;color:#F4F0E6}
.intro__mark p span{color:#7FB2E6}
.intro__mark small{display:block;margin-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#A88A50}
@keyframes markIn{0%{opacity:0;transform:scale(.94);filter:blur(6px)}100%{opacity:1;transform:none;filter:none}}
.intro__skipbtn{position:absolute;right:max(16px,3vw);bottom:max(16px,3vh);padding:8px 14px;border:1px solid rgba(255,255,255,.28);
  border-radius:999px;background:transparent;color:#F4F0E6;font:500 12px var(--ui);letter-spacing:.04em;cursor:pointer}
.intro__skipbtn:hover,.intro__skipbtn:focus-visible{border-color:#F4F0E6;outline:none}

/* ── R2 · Relay feature beat ───────────────────────────────── */
.relay-feature{display:grid;gap:clamp(28px,4vw,64px);align-items:center}
@media (min-width:960px){.relay-feature{grid-template-columns:1fr 1fr}}
.relay-feature__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.relay-feature__note{margin:14px 0 0;font-family:var(--mono);font-size:12px;color:var(--muted)}
.relay-run{margin:0;padding:clamp(16px,2.4vw,26px);border:1px solid var(--rule);border-radius:14px;background:var(--paper);
  box-shadow:0 24px 60px -30px rgba(22,21,15,.35)}
.relay-run__head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;font:600 14px var(--ui);color:var(--ink)}
.relay-run__head b{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px;
  color:var(--thread);background:var(--thread-soft)}
.relay-run__steps{list-style:none;margin:0;padding:0;position:relative}
.relay-run__steps li{position:relative;display:grid;grid-template-columns:22px 1fr;gap:12px;padding:0 0 14px}
.relay-run__steps li:last-child{padding-bottom:0}
.relay-run__steps li:not(:last-child)::after{content:"";position:absolute;left:10px;top:22px;bottom:2px;width:2px;background:var(--rule)}
.relay-run__steps i{width:22px;height:22px;border-radius:50%;border:2px solid var(--thread);background:var(--thread);position:relative;z-index:1}
.relay-run__steps i::after{content:"";position:absolute;left:6px;top:3px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.relay-run__steps b{display:block;font:600 14px var(--ui);color:var(--ink)}
.relay-run__steps span{display:block;font-size:13.5px;color:var(--ink-2);line-height:1.45}
.relay-run__bubble{margin-top:4px;padding:8px 11px;border-radius:10px 10px 10px 2px;background:#E3EFE6;color:#1F3B2A !important;max-width:30ch}
.relay-run__foot{margin:16px 0 0;font:500 11px var(--mono);color:var(--muted);letter-spacing:.04em}
/* Animated only when the script has taken over; without it every step shows done. */
/* pending steps dim by colour, not opacity: faded text fell to 2.4:1 (K-27, WCAG AA); the muted token keeps 5:1 */
.relay-run.is-animated li b,.relay-run.is-animated li span{color:var(--muted);transition:color .4s var(--ease)}
.relay-run.is-animated li i{background:transparent;transition:background .3s ease}
.relay-run.is-animated li i::after{opacity:0;transition:opacity .2s ease}
.relay-run.is-animated li.is-on b{color:var(--ink)}
.relay-run.is-animated li.is-on span{color:var(--ink-2)}
.relay-run.is-animated li.is-on i{background:var(--thread)}
.relay-run.is-animated li.is-on i::after{opacity:1}
.relay-run.is-animated li.is-current i{box-shadow:0 0 0 6px var(--thread-soft)}
.relay-feature .lede{margin-top:18px}
@media (min-width:900px){
  .intro__card{width:420px;padding:20px 22px;font-size:14.5px}
  .intro__card h4{font-size:11px}
  .intro__bars div{grid-template-columns:110px 1fr;font-size:13.5px}
  .intro__sum{font-size:14px}
}