/* 06c — live visuals W02–W04 (Figma 959:2 / 959:62 / 950:197) + W01 variant B.
   Every visual is a fixed-size stage scaled to the card by js (--lv-s, from data-w). */
.lv-wrap { position: relative; width: 100%; height: 100%; overflow: hidden; --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.lv { position: absolute; left: 0; top: 0; transform: scale(var(--lv-s, .3)); transform-origin: 0 0; display: flex; align-items: center; justify-content: center; font-family: var(--font); color: var(--text-ink); }
.w02 .lv { width: 1262px; height: 788px; gap: 56px; }
.w03 .lv { width: 1746px; height: 1092px; gap: 72px; }
.w04 .lv { width: 1802px; height: 1126px; gap: 32px; }

/* shared bits */
.lv-line { display: block; height: 12px; border-radius: 6px; background: var(--surface-subtle); flex: none; }
.lv-hl { display: inline-block; border-radius: 6px; background: var(--brand-accent); color: var(--text-ink); white-space: nowrap; font-family: var(--mono); font-weight: 500; }
.lv-hl--mono19 { padding: 5px 12px; font-size: 19px; line-height: 23px; }
.lv-hl--mono26 { padding: 5px 12px; font-size: 26px; line-height: 32px; }
.lv-arrow { display: block; width: 64px; height: 64px; flex: none; color: #94a3b8; }
.lv-arrow svg { width: 100%; height: 100%; display: block; }
.lv-col { display: flex; flex-direction: column; align-items: center; gap: 28px; flex: none; }
.lv-head { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.lv-badge { width: 110px; height: 110px; border-radius: 33px; background: var(--surface-card); display: grid; place-items: center; color: var(--text-ink); }
.lv-badge svg { width: 61px; height: 61px; }
.lv-badge--accent { background: var(--brand-accent); }
.lv-label { font: 600 22px/27px var(--font); letter-spacing: 1.32px; color: var(--text-muted); white-space: nowrap; }
.lv-label--ink { color: var(--text-ink); }
.lv-ripple { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 3px solid rgba(100,112,122,.85); opacity: 0; pointer-events: none; animation: lv-ripple 10s ease-out infinite both; }
/* terminal (same as W01) */
.lv-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); }
.lv-term-head { display: flex; align-items: center; gap: 16px; padding: 16px 26px; background: rgba(255,255,255,.1); }
.lv-term-head svg { width: 29px; height: 29px; }
.lv-term-ip { font: 400 23px/28px var(--mono); color: var(--text-inverse); }
.lv-term-chip { padding: 5px 12px; border-radius: 8px; background: rgba(255,255,255,.18); font: 500 20px/24px var(--mono); color: var(--text-inverse); }
.lv-term-body { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 23px; padding: 28px 32px 26px; }
.lv-term-title { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.lv-term-code { font: 500 26px/32px var(--mono); color: var(--brand-accent); }
.lv-term-sys { font: 400 26px/32px var(--mono); color: var(--brand-accent); }
.lv-row { display: flex; align-items: center; gap: 18px; height: 36px; }
.lv-key { width: 370px; flex: none; font: 400 22px/26px var(--mono); color: var(--text-inverse-muted); }
.lv-val { position: relative; display: inline-block; overflow: hidden; white-space: nowrap; font: 500 29px/36px var(--mono); color: var(--brand-accent); }
.lv-val-text { display: inline-block; }
.lv-val::after { content: ""; position: absolute; right: 0; top: 4px; width: 14px; height: 28px; background: var(--brand-accent); opacity: 0; }
.lv-val-note { font: 400 22px/26px var(--mono); color: var(--text-inverse-muted); }

/* =========================== W02 · capacity =========================== */
.w02-deck { position: relative; width: 420px; height: 470px; flex: none; }
.w02-page {
  position: absolute; left: 0; top: 0; box-sizing: border-box; width: 280px; height: 330px; padding: 24px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  background: var(--surface-white); border: 2px solid var(--surface-subtle); border-radius: 12px;
  transform-origin: center;
}
.w02-page .lv-hl { opacity: 0; }
.w02-page--1 { transform: translate(-27.5px, 20px) rotate(9deg); }
.w02-page--2 { transform: translate(12.6px, 36.5px) rotate(4.5deg); }
.w02-page--3 { transform: translate(52px, 52px) rotate(0deg); }
.w02-page--4 { transform: translate(90.5px, 66.5px) rotate(-4.5deg); }
.w02-page--5 { transform: translate(128px, 80px) rotate(-9deg); box-shadow: 0 8px 24px rgba(8,41,28,.08); }
.w02-page--5 .lv-hl { opacity: 1; }
.w02-badge { position: absolute; left: 354px; top: 90px; width: 56px; height: 56px; border-radius: 28px; background: var(--brand-accent); display: grid; place-items: center; color: var(--text-ink); }
.w02-badge svg { width: 32px; height: 32px; }
.w02-arrow { width: 60px; height: 60px; }
.w02-count { box-sizing: border-box; width: 380px; height: 470px; padding: 44px 40px; border-radius: 28px; background: var(--brand-primary); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; flex: none; }
.w02-num { height: 150px; overflow: hidden; font: 600 150px/150px var(--font); letter-spacing: -6px; color: var(--brand-accent); }
.w02-strip { display: flex; flex-direction: column; align-items: center; }
.w02-strip span { display: block; height: 150px; line-height: 150px; }
.w02-complete { margin-top: -24px; font: 600 19px/24px var(--font); letter-spacing: 1.52px; color: var(--text-inverse); white-space: nowrap; }
.w02-rule { display: block; width: 180px; height: 2px; border-radius: 1px; background: rgba(255,255,255,.35); }
.w02-row { display: flex; align-items: center; gap: 18px; }
.w02-avatar { width: 84px; height: 84px; border-radius: 42px; background: var(--brand-secondary); display: grid; place-items: center; font: 500 30px/1 var(--font); color: var(--text-inverse); }
.w02-pill { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border-radius: 999px; background: var(--brand-accent); color: var(--text-ink); font: 500 24px/29px var(--font); letter-spacing: -0.24px; white-space: nowrap; }
.w02-pill svg { width: 24px; height: 24px; }

/* --- W02 · the conveyor (12s, seamless): every 2.4s the front page is checked and flies off, the deck
   moves up one slot and a fresh page slips in at the back — the deck looks identical at every tick.
   The count ticks 8 → 12, and the fifth tick rolls straight on to 8 again. --- */
.w02-page { animation: w02-cycle 12s cubic-bezier(.4, 0, .2, 1) infinite both; }
.w02-page .lv-hl { opacity: 0; animation: w02-hl 12s ease infinite both; }
.w02-page--5 .lv-hl { opacity: 0; }
.w02-page--5 { box-shadow: none; }
/* each page starts one slot further along the same cycle */
.w02-page--1, .w02-page--1 .lv-hl { animation-delay: 0s; }
.w02-page--2, .w02-page--2 .lv-hl { animation-delay: -2.4s; }
.w02-page--3, .w02-page--3 .lv-hl { animation-delay: -4.8s; }
.w02-page--4, .w02-page--4 .lv-hl { animation-delay: -7.2s; }
.w02-page--5, .w02-page--5 .lv-hl { animation-delay: -9.6s; }
/* slots: P1 (-27.5,20,9) → P2 (12.6,36.5,4.5) → P3 (52,52,0) → P4 (90.5,66.5,-4.5) → P5 (128,80,-9) → out */
@keyframes w02-cycle {
  0% { transform: translate(-27.5px,20px) rotate(9deg); opacity: 0; box-shadow: none; }
  4%, 15% { transform: translate(-27.5px,20px) rotate(9deg); opacity: 1; box-shadow: none; }
  20%, 35% { transform: translate(12.6px,36.5px) rotate(4.5deg); opacity: 1; box-shadow: none; }
  40%, 55% { transform: translate(52px,52px) rotate(0deg); opacity: 1; box-shadow: none; }
  60%, 75% { transform: translate(90.5px,66.5px) rotate(-4.5deg); opacity: 1; box-shadow: none; }
  80%, 95% { transform: translate(128px,80px) rotate(-9deg); opacity: 1; box-shadow: 0 8px 24px rgba(8,41,28,.08); }
  100% { transform: translate(60px,-440px) rotate(-16deg); opacity: 0; box-shadow: none; }
}
@keyframes w02-hl { 0%, 78% { opacity: 0; } 81%, 100% { opacity: 1; } }
/* the page in front is stacked above the rest: z follows the same cycle */
.w02-page--1 { z-index: 1; animation-name: w02-cycle, w02-z; animation-duration: 12s, 12s; animation-delay: 0s, 0s; }
.w02-page--2 { animation-name: w02-cycle, w02-z; animation-duration: 12s, 12s; animation-delay: -2.4s, -2.4s; }
.w02-page--3 { animation-name: w02-cycle, w02-z; animation-duration: 12s, 12s; animation-delay: -4.8s, -4.8s; }
.w02-page--4 { animation-name: w02-cycle, w02-z; animation-duration: 12s, 12s; animation-delay: -7.2s, -7.2s; }
.w02-page--5 { animation-name: w02-cycle, w02-z; animation-duration: 12s, 12s; animation-delay: -9.6s, -9.6s; }
@keyframes w02-z { 0%, 19.9% { z-index: 1; } 20%, 39.9% { z-index: 2; } 40%, 59.9% { z-index: 3; } 60%, 79.9% { z-index: 4; } 80%, 100% { z-index: 5; } }
.w02-badge { z-index: 6; animation: w02-badge 2.4s cubic-bezier(.34, 1.56, .64, 1) infinite both; }
/* per tick (2.4s): the check pops at .45s, sits on the page till 1.7s, and is gone a beat before the page lifts off (1.8s) */
@keyframes w02-badge { 0%, 19% { transform: scale(0); opacity: 0; } 26%, 71% { transform: scale(1); opacity: 1; } 75%, 100% { transform: scale(0); opacity: 0; } }
.w02-strip { animation: w02-count 12s cubic-bezier(.4, 0, .2, 1) infinite both; }
/* strip: 8 9 10 11 12 8 — the last entry equals the first, so the wrap is invisible */
@keyframes w02-count { 0%, 15% { transform: translateY(0); } 20%, 35% { transform: translateY(-150px); } 40%, 55% { transform: translateY(-300px); } 60%, 75% { transform: translateY(-450px); } 80%, 95% { transform: translateY(-600px); } 100% { transform: translateY(-750px); } }

/* =========================== W03 · focus =========================== */
.w03-grid { position: relative; display: grid; grid-template-columns: repeat(4, 140px); gap: 18px; flex: none; }
.w03-tile { position: relative; width: 140px; height: 140px; border-radius: 16px; background: var(--surface-card); display: grid; place-items: center; color: #94a3b8; }
.w03-tile svg { width: 56px; height: 56px; }
.w03-dot { position: absolute; right: 14px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--brand-accent); transform: scale(0); }
.w03-scan { position: absolute; z-index: 5; left: -10px; right: -10px; top: -6px; height: 6px; border-radius: 3px; background: var(--brand-accent); box-shadow: 0 0 18px 4px rgba(205,255,140,.55); opacity: 0; }
.w03-card {
  box-sizing: border-box; width: 560px; height: 830px; padding: 44px 36px; border-radius: 28px; flex: none;
  background: var(--surface-white); border: 4px solid var(--text-ink); box-shadow: 0 18px 44px rgba(8,41,28,.16);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
}
.w03-badge { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border-radius: 999px; background: var(--brand-accent); font: 600 24px/29px var(--font); letter-spacing: .96px; color: var(--text-ink); }
.w03-badge i { width: 14px; height: 14px; border-radius: 50%; background: var(--text-ink); }
.w03-file { font: 500 28px/34px var(--mono); letter-spacing: -0.28px; color: var(--text-ink); white-space: nowrap; }
.w03-page { box-sizing: border-box; width: 420px; height: 420px; padding: 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; background: var(--surface-white); border: 2px solid var(--surface-subtle); border-radius: 14px; box-shadow: 0 8px 24px rgba(8,41,28,.08); }
.w03-page .lv-line { border-radius: 7px; }
.w03-actions { display: flex; align-items: center; gap: 20px; }
.w03-avatar { width: 88px; height: 88px; border-radius: 44px; background: var(--brand-primary); display: grid; place-items: center; font: 500 32px/1 var(--font); color: var(--text-inverse); }
.w03-approve { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 16px 30px; border-radius: 14px; background: var(--brand-primary); color: var(--text-inverse); font: 500 26px/32px var(--font); letter-spacing: -0.26px; overflow: visible; }
.w03-approve svg { width: 28px; height: 28px; }
.w03-cursor { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; border-radius: 50%; background: var(--text-ink); box-shadow: 0 0 0 4px rgba(255,255,255,.9), 0 6px 16px rgba(8,41,28,.3); opacity: 0; pointer-events: none; z-index: 2; }
.w03-reject { display: inline-flex; align-items: center; padding: 16px 30px; border-radius: 14px; background: var(--surface-white); border: 3px solid var(--surface-subtle); color: var(--text-ink); font: 500 26px/32px var(--font); letter-spacing: -0.26px; }

/* the beam: light from the exception towards the review card (bright at the tile, fading out at the card) */
.w03-beam { position: absolute; left: 548px; top: 191px; width: 400px; height: 710px; pointer-events: none; z-index: 1; opacity: 0;
  /* dense where it leaves the tile, thin and scattered where it meets the card */
  background: linear-gradient(90deg, rgba(205,255,140,.85) 0%, rgba(205,255,140,.5) 22%, rgba(205,255,140,.22) 55%, rgba(205,255,140,.06) 100%);
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 35%, rgba(0,0,0,.55) 75%, rgba(0,0,0,.18) 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 35%, rgba(0,0,0,.55) 75%, rgba(0,0,0,.18) 100%);
  filter: blur(3px);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.w03-beam { z-index: 2; }
.w03-tile--10 { z-index: 3; }
.w03-card { position: relative; z-index: 4; }
/* --- W03 · the scanner (10s): a light passes over the grid and dims the routine work; the one exception lights up
   and its light reaches the review card; the card arrives, the person approves. --- */
.w03-scan, .w03-tile, .w03-beam, .w03-card, .w03-file, .w03-hl--1, .w03-hl--2, .w03-approve, .w03-cursor { animation-duration: 10s; animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: ease-in-out; }
.w03-scan { animation-name: w03-scan; animation-timing-function: linear; }
.w03-tile { animation-name: w03-dim; }
.w03-tile--10 { animation-name: w03-spot; z-index: 3; }
.w03-tile--1, .w03-tile--2, .w03-tile--3, .w03-tile--4 { animation-delay: 0s; }
.w03-tile--5, .w03-tile--6, .w03-tile--7, .w03-tile--8 { animation-delay: .5s; }
.w03-tile--9, .w03-tile--11, .w03-tile--12 { animation-delay: 1s; }
.w03-tile--13, .w03-tile--14, .w03-tile--15, .w03-tile--16 { animation-delay: 1.5s; }
.w03-tile--17, .w03-tile--18, .w03-tile--19, .w03-tile--20 { animation-delay: 2s; }
.w03-tile--10 { animation-delay: 0s; }
.w03-beam { animation-name: w03-beam; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
.w03-card { animation-name: w03-card; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
.w03-file { animation-name: w03-type; animation-timing-function: steps(18, end); overflow: hidden; display: inline-block; width: 18.2ch; }
.w03-hl--1 { animation-name: w03-slide; } .w03-hl--2 { animation-name: w03-slide; animation-delay: .35s; }
.w03-approve { animation-name: w03-approve; }
.w03-cursor { animation-name: w03-cursor; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
.w03 .lv-ripple { animation-delay: 6.8s; }
@keyframes w03-scan { 0%, 4% { opacity: 0; transform: translateY(0); } 6% { opacity: 1; } 28% { opacity: 1; transform: translateY(790px); } 31%, 100% { opacity: 0; transform: translateY(790px); } }
@keyframes w03-dim { 0%, 7% { opacity: 1; } 11%, 90% { opacity: .38; } 95%, 100% { opacity: 1; } }
@keyframes w03-spot { 0%, 19.5% { background: #f4f7f9; color: #94a3b8; box-shadow: 0 0 0 0 rgba(205,255,140,0); transform: scale(1); opacity: 1; } 23%, 84% { background: #fff; color: #082a1c; box-shadow: 0 0 0 5px #cdff8c, 0 16px 32px rgba(8,41,28,.16); transform: scale(1.06); opacity: 1; } 90% { background: #fff; color: #082a1c; box-shadow: 0 0 0 0 rgba(205,255,140,0); transform: scale(1); opacity: .38; } 95%, 100% { background: #f4f7f9; color: #94a3b8; opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(205,255,140,0); } }
@keyframes w03-beam { 0%, 28% { opacity: 0; transform: scaleX(0); } 33% { opacity: .8; } 40%, 84% { opacity: 1; transform: scaleX(1); } 90%, 100% { opacity: 0; transform: scaleX(1); } }
/* the card arrives from the right, and after the approval it lifts away — the beam fades on the same beat */
@keyframes w03-card { 0%, 30% { transform: translateX(48px); opacity: 0; } 38%, 84% { transform: translate(0, 0) scale(1); opacity: 1; } 90%, 100% { transform: translate(0, -44px) scale(.98); opacity: 0; } }
@keyframes w03-type { 0%, 38% { width: 0; } 46%, 100% { width: 18.2ch; } }
@keyframes w03-slide { 0%, 44% { transform: translateY(10px); opacity: 0; } 50%, 100% { transform: translateY(0); opacity: 1; } }
/* the cursor enters from below the card (56–65%), presses at 68% — the button and the ripple answer on that beat */
@keyframes w03-cursor { 0%, 56% { opacity: 0; transform: translate(170px, 470px); } 59% { opacity: 1; transform: translate(170px, 470px); } 65% { opacity: 1; transform: translate(-39px, 268px); } 67% { transform: translate(-39px, 268px) scale(.8); } 69%, 76% { opacity: 1; transform: translate(-39px, 268px) scale(1); } 80%, 100% { opacity: 0; transform: translate(-39px, 268px); } }
@keyframes w03-approve { 0%, 67% { background: #082a1c; color: #fff; transform: scale(1); } 68% { transform: scale(.95); } 70%, 90% { background: #cdff8c; color: #082a1c; transform: scale(1); } 94%, 100% { background: #082a1c; color: #fff; transform: scale(1); } }
@keyframes lv-ripple { 0% { opacity: 0; transform: scale(.4); } 2% { opacity: .9; } 8% { opacity: 0; transform: scale(3.4); } 100% { opacity: 0; transform: scale(3.4); } }

/* =========================== W04 · control =========================== */
.w04-term { width: 660px; }
.w04-progress { margin-top: auto; width: 100%; display: flex; align-items: center; gap: 18px; }
.w04-pause { width: 39px; height: 39px; color: var(--brand-accent); flex: none; }
.w04-pause svg { width: 39px; height: 39px; display: block; }
.w04-track { flex: 1 1 auto; height: 12px; border-radius: 99px; background: rgba(255,255,255,.2); overflow: hidden; position: relative; }
.w04-fill { display: block; height: 12px; border-radius: 99px; background: var(--brand-accent); width: 88%; }
.w04-gate { position: relative; box-sizing: border-box; width: 350px; height: 500px; border-radius: 28px; background: var(--surface-card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; flex: none; }
.w04-ring { width: 260px; height: 260px; border-radius: 50%; background: var(--brand-accent); display: grid; place-items: center; }
.w04-avatar { width: 200px; height: 200px; border-radius: 50%; background: var(--brand-primary); display: grid; place-items: center; font: 500 72px/1 var(--font); color: var(--text-inverse); }
.w04-buttons { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.w04-approve { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 20px 38px; border-radius: 16px; background: var(--brand-primary); color: var(--text-inverse); font: 500 30px/36px var(--font); letter-spacing: -0.3px; }
.w04-approve svg { width: 32px; height: 32px; }
.w04-reject { display: inline-flex; align-items: center; padding: 20px 38px; border-radius: 16px; background: var(--surface-white); border: 3px solid var(--surface-subtle); color: var(--text-ink); font: 500 30px/36px var(--font); letter-spacing: -0.3px; }
.w04-cursor { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; border-radius: 50%; background: var(--text-ink); box-shadow: 0 0 0 4px rgba(255,255,255,.9), 0 6px 16px rgba(8,41,28,.3); opacity: 0; pointer-events: none; }
.w04-done { box-sizing: border-box; width: 360px; height: 500px; border-radius: 28px; background: var(--surface-card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; flex: none; }
.w04-complete { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px; background: var(--brand-accent); font: 600 26px/32px var(--font); letter-spacing: 1.04px; color: var(--text-ink); }
.w04-complete i { width: 14px; height: 14px; border-radius: 50%; background: var(--text-ink); }
.w04-ref { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.w04-ref-label { font: 500 20px/24px var(--font); letter-spacing: 1.2px; color: var(--text-muted); }
.w04-ref-num { font: 500 46px/56px var(--mono); letter-spacing: -0.46px; color: var(--text-ink); white-space: nowrap; display: inline-flex; }
.w04-odo { display: inline-block; height: 56px; overflow: hidden; vertical-align: top; }
.w04-odo-strip { display: flex; flex-direction: column; transform: translateY(-1624px); } /* 29 × 56 → rests on "29" */
.w04-odo-strip span { display: block; height: 56px; line-height: 56px; }

/* --- W04 · three steps, one at a time (10s). The active step's icon sits on the accent; the arrows carry the
   thread between steps. PREPARED: the values are typed in and the bar runs to the gate. YOUR EMPLOYEE: the ring
   spins while it waits, a cursor clicks Approve. SUBMITTED: complete, and the host reference rolls in. --- */
.w04 .lv-badge { animation: none; }
.w04 .lv-col:nth-child(1) .lv-badge { animation: w04-step-1 10s ease infinite both; }
.w04 .lv-col:nth-child(3) .lv-badge { animation: w04-step-2 10s ease infinite both; }
.w04 .lv-col:nth-child(5) .lv-badge { animation: w04-step-3 10s ease infinite both; }
.w04 .lv-col:nth-child(3) .lv-label { animation: w04-label 10s ease infinite both; }
.w04 .lv-arrow svg path { stroke-dasharray: 8 10; }
@keyframes w04-step-1 { 0%, 34% { background: #cdff8c; } 38%, 100% { background: #f4f7f9; } }
@keyframes w04-step-2 { 0%, 34% { background: #f4f7f9; } 38%, 64% { background: #cdff8c; } 68%, 100% { background: #f4f7f9; } }
@keyframes w04-step-3 { 0%, 64% { background: #f4f7f9; } 68%, 96% { background: #cdff8c; } 100% { background: #f4f7f9; } }
@keyframes w04-label { 0%, 100% { color: #64707a; } }
.w04 .lv-label--ink { color: var(--text-muted); }
.w04 .lv-val, .w04 .lv-val::after, .w04-note, .w04-fill, .w04-pause, .w04-arrow--1 svg path, .w04-arrow--2 svg path, .w04-cursor, .w04-approve, .w04-complete, .w04-ref, .w04-odo-strip { animation-duration: 10s; animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: ease-in-out; }
.w04 .w04-val--1 { animation-name: w04-type-1; animation-timing-function: steps(11, end); }
.w04 .w04-val--2 { animation-name: w04-type-2; animation-timing-function: steps(3, end); }
.w04 .w04-val--3 { animation-name: w04-type-3; animation-timing-function: steps(1, end); }
.w04 .w04-val--1::after { animation-name: w04-cursor-1; animation-timing-function: steps(2, start); }
.w04 .w04-val--2::after { animation-name: w04-cursor-2; animation-timing-function: steps(2, start); }
.w04 .w04-val--3::after { animation-name: w04-cursor-3; animation-timing-function: steps(2, start); }
.w04-note { animation-name: w04-note; }
.w04-fill { animation-name: w04-fill; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
.w04-pause { animation-name: w04-pause; animation-timing-function: steps(2, start); }
.w04-arrow--1 svg path { animation-name: w04-thread-1; animation-timing-function: linear; }
.w04-arrow--2 svg path { animation-name: w04-thread-2; animation-timing-function: linear; }
.w04-ring { position: relative; background: none; }
.w04-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--brand-accent); animation: w04-spin 10s linear infinite both; }
.w04-avatar { position: relative; z-index: 1; }
.w04-cursor { animation-name: w04-cursor; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
.w04-approve { animation-name: w04-approve; }
.w04 .lv-ripple { animation-delay: 5.3s; }
.w04-complete { animation-name: w04-pop; animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
.w04-ref { animation-name: w04-fade; }
.w04-odo-strip { animation-name: w04-odo; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
/* step 1: 0–34% — the three values are typed one after another (3–11%, 12–15%, 16–17.5%), then the bar runs to the gate */
@keyframes w04-type-1 { 0%, 3% { width: 0; } 12%, 94% { width: 11.1ch; } 97%, 100% { width: 0; } }
@keyframes w04-type-2 { 0%, 13% { width: 0; } 16.6%, 94% { width: 3.1ch; } 97%, 100% { width: 0; } }
@keyframes w04-type-3 { 0%, 17.6% { width: 0; } 19.4%, 94% { width: 1.1ch; } 97%, 100% { width: 0; } }
@keyframes w04-cursor-1 { 0%, 2% { opacity: 0; } 3%, 12% { opacity: 1; } 13%, 100% { opacity: 0; } }
@keyframes w04-cursor-2 { 0%, 12% { opacity: 0; } 13%, 16.6% { opacity: 1; } 17.6%, 100% { opacity: 0; } }
@keyframes w04-cursor-3 { 0%, 17% { opacity: 0; } 17.6%, 20% { opacity: 1; } 21%, 100% { opacity: 0; } }
@keyframes w04-note { 0%, 20% { opacity: 0; } 22%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes w04-fill { 0%, 23% { width: 0; } 34%, 56% { width: 88%; } 62%, 94% { width: 100%; } 97%, 100% { width: 0; } }
@keyframes w04-pause { 0%, 30% { opacity: 1; } 31%, 55% { opacity: .35; } 56%, 100% { opacity: 1; } }
/* the thread runs on arrow 1 during step 2, on arrow 2 during step 3 */
@keyframes w04-thread-1 { 0%, 33% { stroke: #94a3b8; stroke-dashoffset: 0; } 34% { stroke: #082a1c; } 63% { stroke: #082a1c; stroke-dashoffset: -260px; } 64%, 100% { stroke: #94a3b8; stroke-dashoffset: -260px; } }
@keyframes w04-thread-2 { 0%, 63% { stroke: #94a3b8; stroke-dashoffset: 0; } 64% { stroke: #082a1c; } 95% { stroke: #082a1c; stroke-dashoffset: -280px; } 96%, 100% { stroke: #94a3b8; stroke-dashoffset: -280px; } }
/* step 2: 34–64% */
@keyframes w04-spin { 0%, 35% { transform: rotate(0deg); background: conic-gradient(from 0deg, #cdff8c 0 360deg, #cdff8c 360deg); } 36% { background: conic-gradient(from 0deg, #cdff8c 0 300deg, rgba(205,255,140,.25) 300deg 360deg); } 52% { transform: rotate(720deg); background: conic-gradient(from 0deg, #cdff8c 0 300deg, rgba(205,255,140,.25) 300deg 360deg); } 53%, 100% { transform: rotate(720deg); background: conic-gradient(from 0deg, #cdff8c 0 360deg, #cdff8c 360deg); } }
@keyframes w04-cursor { 0%, 42% { opacity: 0; transform: translate(140px, 220px); } 45% { opacity: 1; transform: translate(140px, 220px); } 51% { opacity: 1; transform: translate(14px, 92px); } 53% { transform: translate(14px, 92px) scale(.8); } 55%, 60% { opacity: 1; transform: translate(14px, 92px) scale(1); } 64%, 100% { opacity: 0; transform: translate(14px, 92px); } }
@keyframes w04-approve { 0%, 52% { background: #082a1c; color: #fff; transform: scale(1); } 53% { transform: scale(.95); } 55%, 64% { background: #cdff8c; color: #082a1c; transform: scale(1); } 68%, 100% { background: #082a1c; color: #fff; transform: scale(1); } }
/* step 3: 64–96% */
@keyframes w04-pop { 0%, 66% { transform: scale(.6); opacity: 0; } 71%, 94% { transform: scale(1); opacity: 1; } 97%, 100% { transform: scale(.6); opacity: 0; } }
@keyframes w04-fade { 0%, 69% { opacity: 0; transform: translateY(10px); } 74%, 94% { opacity: 1; transform: translateY(0); } 97%, 100% { opacity: 0; } }
@keyframes w04-odo { 0%, 70% { transform: translateY(0); } 82%, 100% { transform: translateY(-1624px); } }

/* motion off: the finished frames */
@media (prefers-reduced-motion: reduce) {
  .lv-wrap *, .lv-wrap *::before, .lv-wrap *::after { animation: none !important; }
  .w02-page .lv-hl { opacity: 0; } .w02-page--5 .lv-hl { opacity: 1; } .w02-page--5 { z-index: 5; } .w02-strip { transform: translateY(-600px); }
  .w03-scan { opacity: 0; } .w03-beam { opacity: 1; } .w03-card { opacity: 1; transform: none; } .w03-cursor { opacity: 0; } .w03-hl--1, .w03-hl--2 { opacity: 1; transform: none; }
  .w04 .lv-val { width: auto; } .w04 .lv-val::after { opacity: 0; } .w04-note { opacity: 1; } .w04-fill { width: 88%; } .w04-cursor { opacity: 0; } .w04-complete, .w04-ref { opacity: 1; transform: none; }
  .w04 .lv-col:nth-child(3) .lv-badge { background: var(--brand-accent); }
}