/* 06b — W01 story, live (Figma 950:2). A 1802×1126 stage, scaled to the card's visual by js (--w01-s).
   Loop (7.2s): the document's values light up → a packet crosses to legacy bridge → Moving / Typing /
   Checking → a packet crosses to the AS/400 screen → the values are typed in → checks land → hold → reset. */
.bento .bento-visual--live { background: var(--surface-white); }
.w01-wrap { position: relative; width: 100%; height: 100%; overflow: hidden; }
.w01 {
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  position: absolute; left: 0; top: 0;
  width: 1802px; height: 1126px;
  transform: scale(var(--lv-s, .3));
  transform-origin: 0 0;
  display: flex; align-items: center; justify-content: center; gap: 32px;
  font-family: var(--font);
  color: var(--text-ink);
}
.w01-col { display: flex; flex-direction: column; align-items: center; gap: 28px; flex: none; }
.w01-head { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.w01-badge { width: 110px; height: 110px; border-radius: 33px; background: var(--surface-card); display: grid; place-items: center; color: var(--text-ink); }
.w01-badge svg { width: 61px; height: 61px; }
.w01-badge--accent { background: var(--surface-card); }
/* the active step carries the accent: document while it is read, legacy bridge while it works, AS/400 while it is filled */
.w01-col--doc .w01-badge { animation: w01-step-1 9s ease infinite both; }
.w01-col--lb .w01-badge { animation: w01-step-2 9s ease infinite both; }
.w01-col--term .w01-badge { animation: w01-step-3 9s ease infinite both; }
@keyframes w01-step-1 { 0%, 15% { background: #cdff8c; } 18%, 100% { background: #f4f7f9; } }
@keyframes w01-step-2 { 0%, 15% { background: #f4f7f9; } 18%, 48% { background: #cdff8c; } 51%, 100% { background: #f4f7f9; } }
@keyframes w01-step-3 { 0%, 48% { background: #f4f7f9; } 51%, 93% { background: #cdff8c; } 97%, 100% { background: #f4f7f9; } }
.w01-label--ink { color: var(--text-muted); }
.w01-label { font: 600 22px/27px var(--font); letter-spacing: 1.32px; color: var(--text-muted); white-space: nowrap; }
.w01-label--ink { color: var(--text-ink); }

/* document */
.w01-page {
  box-sizing: border-box; width: 360px; height: 500px; padding: 34px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
  background: var(--surface-white); border: 2px solid var(--surface-subtle); border-radius: 14px;
  box-shadow: 0 8px 24px rgba(8, 41, 28, .08);
}
.w01-line { display: block; height: 16px; border-radius: 8px; background: var(--surface-subtle); }
.w01-hl {
  display: inline-block; padding: 6px 14px; border-radius: 8px; background: var(--brand-accent);
  font: 500 30px/36px var(--mono); color: var(--text-ink); white-space: nowrap;
  transform-origin: left center;
}

/* arrows + the travelling packet */
.w01-arrow { position: relative; width: 64px; height: 64px; flex: none; align-self: center; margin-top: 200px; }
.w01-arrow svg { width: 64px; height: 64px; display: block; }
.w01-packet {
  position: absolute; left: 4px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%;
  background: var(--brand-accent); box-shadow: 0 0 0 6px rgba(205, 255, 140, .35), 0 0 18px 4px rgba(205, 255, 140, .6);
  opacity: 0;
}

/* legacy bridge */
.w01-lb {
  box-sizing: border-box; width: 300px; height: 500px; border-radius: 28px; background: var(--brand-primary);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
}
.w01-lb-mark { font: 600 120px/1 var(--font); letter-spacing: -3.6px; color: var(--text-inverse); }
.w01-pills { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.w01-pill {
  display: inline-block; padding: 11px 22px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); color: var(--text-inverse);
  font: 500 22px/27px var(--font); letter-spacing: -0.22px; white-space: nowrap;
}

/* AS/400 screen */
.w01-term {
  box-sizing: border-box; width: 700px; height: 500px; border-radius: 18px; background: var(--brand-primary);
  display: flex; flex-direction: column; overflow: hidden; font-family: var(--mono);
}
.w01-term-head { display: flex; align-items: center; gap: 16px; padding: 16px 26px; background: rgba(255, 255, 255, .1); }
.w01-term-head svg { width: 29px; height: 29px; }
.w01-term-ip { font: 400 23px/28px var(--mono); color: var(--text-inverse); }
.w01-term-chip { padding: 5px 12px; border-radius: 8px; background: rgba(255, 255, 255, .18); font: 500 20px/24px var(--mono); color: var(--text-inverse); }
.w01-term-body { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 23px; padding: 28px 32px 26px; }
.w01-term-title { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.w01-term-code { font: 500 26px/32px var(--mono); color: var(--brand-accent); }
.w01-term-sys { font: 400 26px/32px var(--mono); color: var(--brand-accent); }
.w01-row { display: flex; align-items: center; gap: 18px; height: 36px; }
.w01-key { width: 370px; flex: none; font: 400 22px/26px var(--mono); color: var(--text-inverse-muted); }
.w01-val { position: relative; display: inline-block; overflow: hidden; white-space: nowrap; font: 500 29px/36px var(--mono); color: var(--brand-accent); }
.w01-val-text { display: inline-block; }
.w01-val::after { /* the typing cursor */
  content: ""; position: absolute; right: 0; top: 4px; width: 14px; height: 28px; background: var(--brand-accent); opacity: 0;
}
.w01-val-note { font: 400 22px/26px var(--mono); color: var(--text-inverse-muted); }
.w01-check { width: 31px; height: 31px; flex: none; display: inline-block; transform: scale(0); opacity: 0; transform-origin: center; }
.w01-check svg { width: 31px; height: 31px; display: block; }
.w01-term-exit { margin-top: auto; font: 400 22px/26px var(--mono); color: var(--text-inverse-muted); }

/* ---------- the loop (9s) ----------
   1. the scanner reads the document (0–1.4s)  2. legacy bridge works through its checklist while the
   first arrow carries the thread (1.4–4.4s)  3. only then the AS/400 screen types the values and the
   checks land, the second arrow carrying the thread meanwhile (4.4–7.8s)  4. hold, reset. */
.w01-scan { position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 2px; background: var(--brand-accent); box-shadow: 0 0 16px 4px rgba(205,255,140,.6); opacity: 0; pointer-events: none; }
.w01-page { position: relative; overflow: hidden; }
.w01-packet { display: none; }
.w01-arrow svg path { stroke-dasharray: 8 10; }
.w01-pill { padding-left: 18px; }
.w01-pill::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background: rgba(255,255,255,.35); vertical-align: 2px; }
.w01-scan, .w01-hl, .w01-arrow--1 svg path, .w01-arrow--2 svg path, .w01-pill, .w01-pill::before, .w01-val, .w01-val::after, .w01-val-note, .w01-check {
  animation-duration: 9s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-fill-mode: both;
}
.w01-scan { animation-name: w01-scan; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
.w01-hl--1 { animation-name: w01-flash-1; }
.w01-hl--2 { animation-name: w01-flash-2; }
.w01-arrow--1 svg path { animation-name: w01-thread-1; animation-timing-function: linear; }
.w01-arrow--2 svg path { animation-name: w01-thread-2; animation-timing-function: linear; }
.w01-pill--1 { animation-name: w01-pill-1; } .w01-pill--1::before { animation-name: w01-dot-1; }
.w01-pill--2 { animation-name: w01-pill-2; } .w01-pill--2::before { animation-name: w01-dot-2; }
.w01-pill--3 { animation-name: w01-pill-3; } .w01-pill--3::before { animation-name: w01-dot-3; }
.w01-val--1 { animation-name: w01-type-1; animation-timing-function: steps(11, end); }
.w01-val--2 { animation-name: w01-type-2; animation-timing-function: steps(3, end); }
.w01-val--3 { animation-name: w01-type-3; animation-timing-function: steps(1, end); }
.w01-val--1::after { animation-name: w01-cursor-1; animation-timing-function: steps(2, start); }
.w01-val--2::after { animation-name: w01-cursor-2; animation-timing-function: steps(2, start); }
.w01-val--3::after { animation-name: w01-cursor-3; animation-timing-function: steps(2, start); }
.w01-val-note { animation-name: w01-note; }
.w01-check--1 { animation-name: w01-check-1; animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
.w01-check--2 { animation-name: w01-check-2; animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
.w01-check--3 { animation-name: w01-check-3; animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }

/* 9s = 100%; 1% = 90ms */
@keyframes w01-scan { 0%, 2% { opacity: 0; transform: translateY(0); } 4% { opacity: 1; } 14% { opacity: 1; transform: translateY(496px); } 16%, 100% { opacity: 0; transform: translateY(496px); } }
@keyframes w01-flash-1 { 0%, 6% { background: #cdff8c; box-shadow: 0 0 0 0 rgba(205,255,140,0); } 8% { background: #e6ffc2; box-shadow: 0 0 0 10px rgba(205,255,140,.5); } 12%, 100% { background: #cdff8c; box-shadow: 0 0 0 0 rgba(205,255,140,0); } }
@keyframes w01-flash-2 { 0%, 10% { background: #cdff8c; box-shadow: 0 0 0 0 rgba(205,255,140,0); } 12% { background: #e6ffc2; box-shadow: 0 0 0 10px rgba(205,255,140,.5); } 16%, 100% { background: #cdff8c; box-shadow: 0 0 0 0 rgba(205,255,140,0); } }
/* the thread runs on arrow 1 for the whole legacy bridge scene, then on arrow 2 for the whole AS/400 scene */
@keyframes w01-thread-1 { 0%, 15% { stroke: #94a3b8; stroke-dashoffset: 0; } 16% { stroke: #082a1c; } 49% { stroke: #082a1c; stroke-dashoffset: -270px; } 50%, 100% { stroke: #94a3b8; stroke-dashoffset: -270px; } }
@keyframes w01-thread-2 { 0%, 49% { stroke: #94a3b8; stroke-dashoffset: 0; } 50% { stroke: #082a1c; } 86% { stroke: #082a1c; stroke-dashoffset: -290px; } 87%, 100% { stroke: #94a3b8; stroke-dashoffset: -290px; } }
@keyframes w01-pill-1 { 0%, 17% { color: #fff; } 20%, 93% { color: #cdff8c; } 97%, 100% { color: #fff; } }
@keyframes w01-pill-2 { 0%, 29% { color: #fff; } 32%, 93% { color: #cdff8c; } 97%, 100% { color: #fff; } }
@keyframes w01-pill-3 { 0%, 41% { color: #fff; } 44%, 93% { color: #cdff8c; } 97%, 100% { color: #fff; } }
@keyframes w01-dot-1 { 0%, 17% { background: rgba(255,255,255,.35); box-shadow: none; } 20%, 93% { background: #cdff8c; box-shadow: 0 0 0 4px rgba(205,255,140,.25); } 97%, 100% { background: rgba(255,255,255,.35); box-shadow: none; } }
@keyframes w01-dot-2 { 0%, 29% { background: rgba(255,255,255,.35); box-shadow: none; } 32%, 93% { background: #cdff8c; box-shadow: 0 0 0 4px rgba(205,255,140,.25); } 97%, 100% { background: rgba(255,255,255,.35); box-shadow: none; } }
@keyframes w01-dot-3 { 0%, 41% { background: rgba(255,255,255,.35); box-shadow: none; } 44%, 93% { background: #cdff8c; box-shadow: 0 0 0 4px rgba(205,255,140,.25); } 97%, 100% { background: rgba(255,255,255,.35); box-shadow: none; } }
/* the AS/400 screen starts only after the checklist is complete (49%) */
@keyframes w01-type-1 { 0%, 51% { width: 0; } 61%, 93% { width: 11.1ch; } 97%, 100% { width: 0; } }
@keyframes w01-type-2 { 0%, 62% { width: 0; } 66%, 93% { width: 3.1ch; } 97%, 100% { width: 0; } }
@keyframes w01-type-3 { 0%, 67% { width: 0; } 69%, 93% { width: 1.1ch; } 97%, 100% { width: 0; } }
@keyframes w01-cursor-1 { 0%, 50% { opacity: 0; } 51%, 61% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes w01-cursor-2 { 0%, 61% { opacity: 0; } 62%, 66% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes w01-cursor-3 { 0%, 66% { opacity: 0; } 67%, 70% { opacity: 1; } 71%, 100% { opacity: 0; } }
@keyframes w01-note { 0%, 69% { opacity: 0; } 71%, 93% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes w01-check-1 { 0%, 73% { transform: scale(0); opacity: 0; } 77%, 93% { transform: scale(1); opacity: 1; } 97%, 100% { transform: scale(0); opacity: 0; } }
@keyframes w01-check-2 { 0%, 76% { transform: scale(0); opacity: 0; } 80%, 93% { transform: scale(1); opacity: 1; } 97%, 100% { transform: scale(0); opacity: 0; } }
@keyframes w01-check-3 { 0%, 79% { transform: scale(0); opacity: 0; } 83%, 93% { transform: scale(1); opacity: 1; } 97%, 100% { transform: scale(0); opacity: 0; } }

/* motion off: the finished frame, as in the design */
@media (prefers-reduced-motion: reduce) {
  .w01 *, .w01 *::before, .w01 *::after { animation: none !important; }
  .w01-pill { color: var(--brand-accent); }
  .w01-val { width: auto; }
  .w01-val-note { opacity: 1; }
  .w01-check { transform: none; opacity: 1; }
}