/* =============================================================================
   The laptop walkthrough — js/wa-walkthrough.js draws it, this styles it.

   One line-drawn laptop whose screen acts out the five things that happen after
   someone gets Tangle: 1 download from the account page · 2 install · 3 load the
   plugin in a DAW (locked behind its activation panel) · 4 paste the serial and
   it unlocks · 5 the same module unlocked inside the Tangle rack.

   Used by checkout-success.html (all five, looping beside its step list) and
   getting-started.html (one scene beside each step). The stage's data-step
   picks which screen shows (.wt-g groups) and starts that step's animations.

   Every element's BASE style is its finished frame and each animation supplies
   only where it starts (`from`), so .wt-idle (not started yet), reduced motion
   and a stalled script all leave a complete still picture.
   ========================================================================== */

.wt-stage { display: block; width: 100%; height: auto; }

/* laptop, windows, type */
.wt-lid    { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.wt-glass  { fill: var(--bg); }
.wt-base   { fill: var(--surface2); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.wt-notch  { fill: var(--hairline2); }
.wt-win    { fill: var(--surface); stroke: var(--ink); stroke-width: 1.4; }
.wt-winbar { fill: var(--surface2); }
.wt-wdot   { fill: var(--hairline2); }
.wt-row    { fill: var(--bg); stroke: var(--hairline2); }
.wt-btn    { fill: var(--oxblood); }
.wt-btn.ink { fill: var(--ink); }
.wt-ghost  { fill: none; stroke: var(--ink); stroke-width: .8; }
.wt-track  { fill: none; stroke: var(--ink); stroke-width: 1; }
.wt-fill   { fill: var(--oxblood); }
.wt-pkg    { fill: var(--surface2); stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
.wt-cursor { fill: var(--ink); stroke: var(--bg); stroke-width: 1; transform: translate(352px, 125px); }
.wt-box    { fill: var(--bg); stroke: var(--ink); stroke-width: 1; }
.wt-tick   { fill: none; stroke: var(--oxblood); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.wt-okc    { fill: var(--olive); }
.wt-okm    { fill: none; stroke: var(--bg); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wt-head   { fill: var(--surface2); stroke: var(--hairline2); }
.wt-slot   { fill: var(--bg); stroke: var(--ink); stroke-width: .8; }
.wt-slotfill { fill: var(--oxblood); }
.wt-clip   { fill: color-mix(in srgb, var(--oxblood) 7%, var(--bg)); stroke: var(--hairline2); }
.wt-wave   { stroke: var(--oxblood); stroke-width: 1.3; opacity: .65; }
.wt-wave.alt { stroke: var(--olive); }
.wt-transport { fill: var(--surface2); stroke: var(--hairline2); }
.wt-play   { fill: var(--olive); }
.wt-panelbg { fill: var(--surface2); stroke: var(--hairline2); }
.wt-lock   { fill: none; stroke: var(--ink); stroke-width: 2; }
.wt-lockbody { fill: var(--ink); }
.wt-field  { fill: var(--bg); stroke: var(--ink); stroke-width: .8; }
.wt-chip   { fill: var(--surface2); stroke: var(--oxblood); stroke-width: .8; }
.wt-under  { stroke: var(--inkMuted); stroke-width: .5; }
.wt-toast  { fill: var(--bg); stroke: var(--ink); stroke-width: 1.2; }
.wt-mailbadge { fill: var(--oxblood); }
.wt-rail   { fill: var(--hairline2); }
.wt-seat   { fill: none; stroke: var(--inkFaint); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.wt-rcable { fill: none; stroke: var(--oxblood); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; }
.wt-rplug  { fill: var(--oxblood); stroke: var(--surface); stroke-width: 1.2; }
.wt-tag    { fill: var(--olive); }
.wt-t-h { font: 700 13px 'Inter Tight', 'Inter Tight Fallback', system-ui, sans-serif; fill: var(--ink); letter-spacing: -.02em; }
.wt-t-r { font: 600 9.5px 'Inter Tight', 'Inter Tight Fallback', system-ui, sans-serif; fill: var(--ink); }
.wt-t-s { font: 500 7px 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, monospace; fill: var(--inkMuted); letter-spacing: .04em; }
.wt-t-w { font: 500 7px 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, monospace; fill: var(--inkMuted); }
.wt-t-b { font: 600 7.5px 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, monospace; fill: var(--bg); letter-spacing: .06em; }
.wt-t-g { font: 600 6px 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, monospace; fill: var(--ink); letter-spacing: .03em; }
.wt-t-serial { font: 700 6.3px 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, monospace; fill: var(--ink); letter-spacing: .03em; }

/* the Weaver Audio Manager (steps 6-9) */
.wt-rule   { stroke: var(--hairline2); stroke-width: 1; }
.wt-sel    { fill: var(--oxblood); }
.wt-badge  { fill: var(--oxblood); }
.wt-card   { fill: var(--surface); stroke: var(--hairline2); }
.wt-barbg  { fill: var(--surface2); stroke: var(--ink); stroke-width: .8; }
.wt-skel   { fill: var(--hairline2); }
.wt-ptchip { fill: none; stroke: var(--hairline2); stroke-width: .8; }
.wt-pton   { fill: var(--oxblood); }
.wt-t-c  { font: 600 7.5px 'Inter Tight', 'Inter Tight Fallback', system-ui, sans-serif; fill: var(--ink); }
.wt-t-l  { font: 600 5.6px 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, monospace; fill: var(--oxblood); letter-spacing: .08em; }
.wt-t-m  { font: 500 6.4px 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, monospace; fill: var(--inkMuted); }
.wt-t-p  { font: 600 5px 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, monospace; fill: var(--inkMuted); letter-spacing: .03em; }
.wt-t-p.on { fill: var(--bg); }
.wt-t-ok { font: 600 7px 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, monospace; fill: var(--olive); letter-spacing: .04em; }
.wt-t-warn { font: 600 7px 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, monospace; fill: var(--oxblood); letter-spacing: .04em; }
.wt-t-bs { font: 600 5.6px 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, monospace; fill: var(--bg); letter-spacing: .03em; }
/* Final frame: signed in, installed, up to date. Before -> after pairs swap
   by animation only, so a still picture is always the finished one. */
.wt-was, .s6-out, .s6-web, .s7-dlg, .s9-badge, .s6-cur, .s7-cur { opacity: 0; }
.s6-cur { transform: translate(236px, 161px); }
.s7-cur { transform: translate(343px, 183px); }
.s9-cur { transform: translate(403px, 224px); }

/* which screen shows: .wt-g groups fade in for their step(s) */
.wt-g { opacity: 0; transition: opacity .35s ease; }
.wt-stage[data-step="1"] .g1, .wt-stage[data-step="2"] .g2,
.wt-stage[data-step="3"] .g34, .wt-stage[data-step="4"] .g34,
.wt-stage[data-step="4"] .g4, .wt-stage[data-step="5"] .g5,
.wt-stage[data-step="6"] .g6, .wt-stage[data-step="7"] .g7,
.wt-stage[data-step="8"] .g8, .wt-stage[data-step="9"] .g9 { opacity: 1; }
.wt-stage[data-step="3"] .wt-face { opacity: .35; }
.wt-stage[data-step="4"] .wt-panel { opacity: 0; }
.s1-pkg, .s2-done, .s3-plug, .s4-badge, .wt-press, .wt-rplug, .s5-tag,
.s6-web, .s6-wok, .s6-toast, .s7-pt, .s7-dlg, .s8-plug, .s8-tag, .s9-badge { transform-box: fill-box; transform-origin: center; }
.wt-fill { transform-box: fill-box; transform-origin: 0 50%; }

/* each step's moves */
.wt-stage[data-step="1"] .s1-cursor { animation: wt-cur .8s cubic-bezier(.4, 0, .2, 1) .2s both; }
.wt-stage[data-step="1"] .s1-press  { animation: wt-press .3s ease 1.05s; }
.wt-stage[data-step="1"] .s1-fill   { animation: wt-fillx 1.3s cubic-bezier(.3, .6, .4, 1) 1.2s both; }
.wt-stage[data-step="1"] .s1-pkg    { animation: wt-pop .35s cubic-bezier(.3, 1.6, .5, 1) 2.55s both; }
.wt-stage[data-step="2"] .s2-t1 { animation: wt-draw .25s ease .3s both; }
.wt-stage[data-step="2"] .s2-t2 { animation: wt-draw .25s ease .45s both; }
.wt-stage[data-step="2"] .s2-t3 { animation: wt-draw .25s ease .6s both; }
.wt-stage[data-step="2"] .s2-t4 { animation: wt-draw .25s ease .75s both; }
.wt-stage[data-step="2"] .s2-press { animation: wt-press .3s ease 1.05s; }
.wt-stage[data-step="2"] .s2-fill  { animation: wt-fillx 1.2s cubic-bezier(.3, .6, .4, 1) 1.25s both; }
.wt-stage[data-step="2"] .s2-done  { animation: wt-pop .35s cubic-bezier(.3, 1.6, .5, 1) 2.5s both; }
.wt-stage[data-step="3"] .s3-slot  { animation: wt-fade .3s ease .45s both; }
.wt-stage[data-step="3"] .s3-plug  { animation: wt-pop .4s cubic-bezier(.3, 1.4, .5, 1) .85s both; }
.wt-stage[data-step="4"] .s4-toast { animation: wt-slide .45s cubic-bezier(.2, .8, .3, 1) .2s both; }
.wt-stage[data-step="4"] .s4-chip  { animation: wt-fly .6s cubic-bezier(.5, 0, .3, 1) .85s both; }
.wt-stage[data-step="4"] .s4-press { animation: wt-press .3s ease 1.5s; }
.wt-stage[data-step="4"] .wt-panel { animation: wt-gone .35s ease 1.85s both; }
.wt-stage[data-step="4"] .wt-face  { animation: wt-undim .45s ease 1.9s both; }
.wt-stage[data-step="4"] .s4-badge { animation: wt-pop .4s cubic-bezier(.3, 1.6, .5, 1) 2.1s both; }
.wt-stage[data-step="5"] .s5-seat { animation: wt-seat 1s ease both; }
.wt-stage[data-step="5"] .s5-drop { animation: wt-drop .65s cubic-bezier(.3, 1.25, .5, 1) .35s both; }
.wt-stage[data-step="5"] .s5-p1a  { animation: wt-pop .25s ease-out 1s both; }
.wt-stage[data-step="5"] .s5-c1   { animation: wt-draw .5s ease 1.1s both; }
.wt-stage[data-step="5"] .s5-p1b  { animation: wt-pop .25s ease-out 1.55s both; }
.wt-stage[data-step="5"] .s5-p2a  { animation: wt-pop .25s ease-out 1.4s both; }
.wt-stage[data-step="5"] .s5-c2   { animation: wt-draw .5s ease 1.5s both; }
.wt-stage[data-step="5"] .s5-p2b  { animation: wt-pop .25s ease-out 1.95s both; }
.wt-stage[data-step="5"] .s5-tag  { animation: wt-pop .4s cubic-bezier(.3, 1.6, .5, 1) 2.2s both; }
/* 6 · sign in: the button, the account page in the browser, signed in */
.wt-stage[data-step="6"] .s6-cur    { animation: wt-cur6 2s cubic-bezier(.4, 0, .2, 1) .2s both; }
.wt-stage[data-step="6"] .s6-press  { animation: wt-press .3s ease .95s; }
.wt-stage[data-step="6"] .s6-web    { animation: wt-blink 2.3s ease 1.1s both; }
.wt-stage[data-step="6"] .s6-wpress { animation: wt-press .3s ease 2s; }
.wt-stage[data-step="6"] .s6-wok    { animation: wt-pop .35s cubic-bezier(.3, 1.6, .5, 1) 2.25s both; }
.wt-stage[data-step="6"] .s6-out    { animation: wt-gone .3s ease 3.3s both; }
.wt-stage[data-step="6"] .s6-in     { animation: wt-fade .3s ease 3.4s both; }
.wt-stage[data-step="6"] .s6-toast  { animation: wt-pop .4s cubic-bezier(.3, 1.4, .5, 1) 3.6s both; }
/* 7 · tick, pro tools on, apply, the agreement, installed */
.wt-stage[data-step="7"] .s7-t1     { animation: wt-draw .25s ease .3s both; }
.wt-stage[data-step="7"] .s7-t2     { animation: wt-draw .25s ease .5s both; }
.wt-stage[data-step="7"] .s7-pt     { animation: wt-pop .3s cubic-bezier(.3, 1.6, .5, 1) .75s both; }
.wt-stage[data-step="7"] .s7-bar    { animation: wt-rise .35s cubic-bezier(.2, .8, .3, 1) 1s both; }
.wt-stage[data-step="7"] .s7-cur    { animation: wt-cur7 2.4s cubic-bezier(.4, 0, .2, 1) .2s both; }
.wt-stage[data-step="7"] .s7-press  { animation: wt-press .3s ease 1.2s; }
.wt-stage[data-step="7"] .s7-dlg    { animation: wt-blink 1.6s ease 1.45s both; }
.wt-stage[data-step="7"] .s7-accept { animation: wt-press .3s ease 2.4s; }
.wt-stage[data-step="7"] .s7-fill   { animation: wt-fillx 1s cubic-bezier(.3, .6, .4, 1) 3.05s both; }
.wt-stage[data-step="7"] .wt-was    { animation: wt-gone .3s ease 4.05s both; }
.wt-stage[data-step="7"] .wt-now    { animation: wt-fade .3s ease 4.15s both; }
/* 8 · the plugin opens already activated */
.wt-stage[data-step="8"] .s3-slot   { animation: wt-fade .3s ease .45s both; }
.wt-stage[data-step="8"] .s8-plug   { animation: wt-pop .4s cubic-bezier(.3, 1.4, .5, 1) .85s both; }
.wt-stage[data-step="8"] .s8-tag    { animation: wt-pop .4s cubic-bezier(.3, 1.6, .5, 1) 1.45s both; }
/* 9 · an update: tick, apply, up to date */
.wt-stage[data-step="9"] .s9-t      { animation: wt-draw .25s ease .35s both; }
.wt-stage[data-step="9"] .s9-bar    { animation: wt-rise .35s cubic-bezier(.2, .8, .3, 1) .6s both; }
.wt-stage[data-step="9"] .s9-cur    { animation: wt-cur9 1s cubic-bezier(.4, 0, .2, 1) .2s both; }
.wt-stage[data-step="9"] .s9-press  { animation: wt-press .3s ease 1.3s; }
.wt-stage[data-step="9"] .s9-fill   { animation: wt-fillx 1s cubic-bezier(.3, .6, .4, 1) 1.55s both; }
.wt-stage[data-step="9"] .wt-was    { animation: wt-gone .3s ease 2.6s both; }
.wt-stage[data-step="9"] .wt-now    { animation: wt-fade .3s ease 2.7s both; }
.wt-stage[data-step="9"] .s9-badge  { animation: wt-gone .3s ease 2.7s both; }
/* The sign-in and install cursors leave once their last click is done, so the
   finished frame shows the Manager and not a pointer resting on a card. */
@keyframes wt-cur6  { 0% { opacity: 1; transform: translate(430px, 232px); } 30%, 55% { opacity: 1; transform: translate(403px, 64px); }
                      85% { opacity: 1; transform: translate(236px, 161px); } 100% { opacity: 0; transform: translate(236px, 161px); } }
@keyframes wt-cur7  { 0% { opacity: 1; transform: translate(430px, 250px); } 35%, 60% { opacity: 1; transform: translate(403px, 224px); }
                      85% { opacity: 1; transform: translate(343px, 183px); } 100% { opacity: 0; transform: translate(343px, 183px); } }
@keyframes wt-cur9  { from { transform: translate(430px, 250px); } }
@keyframes wt-blink { 0% { opacity: 0; transform: scale(.94); } 12% { opacity: 1; transform: none; } 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes wt-rise  { from { opacity: 0; transform: translateY(14px); } }
@keyframes wt-seat  { 0%, 60% { opacity: 1; } }
@keyframes wt-drop  { from { opacity: 0; transform: translateY(-110px); } }
@keyframes wt-cur   { from { transform: translate(430px, 232px); } }
@keyframes wt-press { 50% { transform: scale(.93); } }
@keyframes wt-fillx { from { transform: scaleX(0); } }
@keyframes wt-pop   { from { opacity: 0; transform: scale(.6); } }
@keyframes wt-draw  { from { stroke-dashoffset: 1; } }
@keyframes wt-fade  { from { opacity: 0; } }
@keyframes wt-gone  { from { opacity: 1; } }
@keyframes wt-undim { from { opacity: .35; } }
@keyframes wt-slide { from { opacity: 0; transform: translateX(-150px); } }
@keyframes wt-fly   { from { transform: translate(-238px, 74px); } }
.wt-idle, .wt-idle * { animation: none !important; }

/* one-scene mounts (getting-started) carry a replay button under the laptop */
.wt-replay {
  display: block; margin: 6px auto 0; padding: 4px 10px; background: none; border: 0; cursor: pointer;
  font: 600 10px 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, monospace; letter-spacing: 1px; text-transform: lowercase;
  color: var(--inkDim);
}
.wt-replay:hover { color: var(--oxblood); }

@media (prefers-reduced-motion: reduce) {
  .wt-stage, .wt-stage * { animation: none !important; transition: none !important; }
  .wt-replay { display: none; }
}