/* escbash animation — Aurora brand tokens (apps/web globals.css / Hero.tsx) */
:root {
  --bg: #0a0e14;
  --term-bg: #0a0d10;
  --text: #f2f6f5;
  --muted: #8b9691;
  --accent: #4ade80;
  --teal: #2dd4bf;
  --body: #bfe6cd;
  --prompt: #5fdd9a;
  --ok: #34d399;
  --out: #7e978a;
  --border: rgba(255,255,255,0.10);
  --mono: "JetBrains Mono", Menlo, ui-monospace, monospace;
  --sans: Inter, -apple-system, "Segoe UI", sans-serif;
}

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

html, body {
  height: 100%;
  background: var(--bg);
  display: grid;
  place-items: center;
  font-family: var(--sans);
  overflow: hidden;
}

/* ---------- stage scaffolding ---------- */

/* fill the container (iframe/viewport) — the iframe/#stage-fit aspect-ratio
   (1280/560) fixes the height, so no letterbox and no shrink */
#escbash-anim { position: relative; width: 100vw; max-width: 100%; }

#stage-fit {
  position: relative;
  width: 100%;
  /* shorter than 16:9 — crop the empty upper room, bottom-anchor the scene */
  aspect-ratio: 1280 / 560;
  overflow: hidden;
  border-radius: 16px;
}

#stage {
  position: absolute;
  width: 1280px;
  height: 720px;
  transform-origin: 0 0;         /* fit scale set by JS */
  background:
    radial-gradient(circle at 10% -5%, rgba(16,185,129,0.14), transparent 40%),
    radial-gradient(circle at 35% 0%, rgba(45,212,191,0.07), transparent 45%),
    radial-gradient(circle at 90% -10%, rgba(99,102,241,0.08), transparent 40%),
    var(--bg);
}

/* camera moves this inner wrapper */
#world {
  position: absolute; inset: 0;
  transform-origin: 0 0;
  will-change: transform;
}

/* ---------- set ---------- */

.floor {
  position: absolute; left: 0; right: 0; top: 620px; height: 100px;
  background: linear-gradient(180deg, #0d1219, #0a0e14);
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* origin for the plant group: shift the whole plant to the right of the desk
   so it stays in frame under the tighter zoom */
.plant { position: absolute; left: 940px; top: 0; }
.plant .pot {
  position: absolute; left: 130px; top: 560px; width: 64px; height: 62px;
  background: #1a222e; border-radius: 8px 8px 14px 14px;
}
.plant .leaf {
  position: absolute; width: 26px; height: 92px; border-radius: 50% 50% 4px 4px;
  background: #14532d; transform-origin: bottom center;
}
.plant .l1 { left: 149px; top: 472px; }
.plant .l2 { left: 128px; top: 486px; transform: rotate(-16deg); background: #166534; }
.plant .l3 { left: 170px; top: 488px; transform: rotate(15deg); background: #166534; }

.chair-seat { position: absolute; left: 536px; top: 560px; width: 88px; height: 13px; border-radius: 7px; background: #1a222e; }
.chair-back { position: absolute; left: 528px; top: 452px; width: 14px; height: 112px; border-radius: 7px; background: #1a222e; }
.chair-leg  { position: absolute; top: 572px; width: 10px; height: 48px; border-radius: 5px; background: #151d28; }
.cl1 { left: 546px; } .cl2 { left: 604px; }

.desk-top { position: absolute; left: 630px; top: 512px; width: 430px; height: 15px; border-radius: 8px; background: #1e2836; }
.desk-leg { position: absolute; top: 526px; width: 14px; height: 94px; border-radius: 7px; background: #151d28; }
.dl1 { left: 648px; } .dl2 { left: 1030px; }

.keyboard { position: absolute; left: 652px; top: 502px; width: 116px; height: 10px; border-radius: 5px; background: #26303e; }
.mug { position: absolute; left: 990px; top: 490px; width: 20px; height: 22px; border-radius: 3px 3px 6px 6px; background: #2dd4bf; opacity: .85; }
.mug-handle { position: absolute; right: -8px; top: 4px; width: 10px; height: 12px; border: 3px solid #2dd4bf; border-left: none; border-radius: 0 6px 6px 0; }
.mug-steam {
  position: absolute; left: 6px; top: -12px; width: 3px; height: 9px; border-radius: 2px;
  background: rgba(242,246,245,.35); animation: steam 2.6s ease-in-out infinite;
}
@keyframes steam {
  0%, 100% { transform: translateY(0) scaleY(.7); opacity: .0; }
  40% { transform: translateY(-5px) scaleY(1); opacity: .5; }
  80% { transform: translateY(-10px) scaleY(.8); opacity: 0; }
}

/* ---------- monitor + screen ---------- */

.monitor-frame {
  position: absolute; left: 700px; top: 300px; width: 300px; height: 196px;
  background: #10151d; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
.monitor-stand { position: absolute; left: 836px; top: 496px; width: 28px; height: 12px; background: #151d28; }
.monitor-base  { position: absolute; left: 790px; top: 506px; width: 120px; height: 8px; border-radius: 4px; background: #151d28; }

#screen {
  position: absolute; left: 708px; top: 308px; width: 284px; height: 180px;
  border-radius: 7px; background: var(--term-bg); overflow: hidden;
}
.scr { position: absolute; inset: 0; opacity: 0; }

.idle-glyph {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700; font-size: 26px; color: var(--accent);
  opacity: .16; animation: idlepulse 3s ease-in-out infinite;
}
@keyframes idlepulse { 0%,100% { opacity: .10; } 50% { opacity: .22; } }

.scr-search { font-family: var(--mono); padding: 10px 12px; }
.search-bar {
  height: 20px; line-height: 20px; padding: 0 9px; margin-bottom: 8px;
  border: 1px solid rgba(255,255,255,0.12); border-radius: 999px;
  color: var(--muted); font-size: 8.5px; background: rgba(255,255,255,0.03);
}
.search-clip { height: 88px; overflow: hidden; }
.search-results { transition: none; }
.sr {
  height: 20px; line-height: 18px; margin-bottom: 4px; padding: 0 8px;
  border: 1px solid rgba(255,255,255,0.07); border-radius: 5px;
  color: #5a6570; font-size: 8px; background: rgba(255,255,255,0.02);
  white-space: nowrap; overflow: hidden;
}
.sr-escbash {
  position: absolute; left: 12px; right: 12px; bottom: 12px; height: 24px;
  display: flex; align-items: center; padding: 0 9px;
  border: 1.5px solid var(--accent); border-radius: 6px;
  background: rgba(74,222,128,0.10); color: var(--accent);
  font-size: 8px; font-weight: 600;
  box-shadow: 0 0 18px rgba(74,222,128,0.25);
  opacity: 0;
}
.sr-escbash .kc { font-weight: 700; }
.sr-escbash .open-hint {
  margin-left: auto; padding: 2px 7px; border-radius: 999px; font-size: 7.5px;
  background: rgba(74,222,128,0.16); border: 1px solid rgba(74,222,128,0.5);
  animation: hintpulse 1.1s ease-in-out infinite;
}
@keyframes hintpulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.search-ripple {
  position: absolute; inset: -5px;
  border: 2px solid var(--accent); border-radius: 8px; opacity: 0; pointer-events: none;
}

/* the escbash lab page (mini replica) */
.scr-lab { display: flex; font-family: var(--mono); }
.lab-side {
  width: 62px; padding: 6px 5px; border-right: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column; gap: 5px;
}
.lab-logo { font-size: 4.6px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.lab-logo .esc {
  display: inline-block; padding: 1px 2.5px; border-radius: 2.5px;
  background: #10151d; border: .7px solid var(--accent); color: var(--accent); font-weight: 700;
}
.lab-ring-wrap { position: relative; width: 30px; height: 30px; align-self: center; }
.lab-ring { width: 30px; height: 30px; }
#ring-pct {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 6.5px; font-weight: 700; color: var(--text);
}
.lab-stats { display: flex; gap: 3px; justify-content: center; }
.lab-stats span {
  padding: 1.5px 3px; border-radius: 3px; font-size: 4.2px; color: var(--muted);
  background: rgba(255,255,255,0.04); border: .6px solid rgba(255,255,255,0.08);
}
.lab-items { display: flex; flex-direction: column; gap: 3.5px; margin-top: 2px; }
.li { display: flex; align-items: center; gap: 3px; font-size: 4.6px; color: var(--muted); white-space: nowrap; }
.li-dot {
  flex: none; width: 6px; height: 6px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  display: grid; place-items: center; font-size: 4.5px; color: #06251b;
}
.li.done { color: var(--body); }
.li.done .li-dot { background: var(--accent); border-color: var(--accent); }
.li.done .li-dot::after { content: "✓"; }
.li-k { color: #5a6570; font-size: 3.8px; text-transform: uppercase; letter-spacing: .04em; }

.lab-main {
  flex: 1; padding: 7px 8px; border-right: 1px solid rgba(255,255,255,0.06);
  position: relative;
}
.lab-lesson { font-size: 4.2px; color: #5a6570; text-transform: uppercase; letter-spacing: .06em; }
.lab-title { font-family: var(--sans); font-size: 7px; font-weight: 700; color: var(--text); margin: 3px 0 4px; line-height: 1.25; }
.lab-badge {
  display: inline-block; padding: 1px 4px; border-radius: 3px; font-size: 4.2px;
  color: var(--accent); background: rgba(74,222,128,0.12); border: .7px solid rgba(74,222,128,0.4);
  margin-bottom: 5px;
}
.sk { height: 3.5px; border-radius: 2px; background: rgba(255,255,255,0.07); margin-bottom: 3.5px; }
.sk-code { height: 16px; width: 96%; background: rgba(255,255,255,0.04); border: .7px solid rgba(255,255,255,0.07); }
.lab-next {
  position: absolute; right: 7px; bottom: 6px; padding: 2px 6px; border-radius: 4px;
  background: var(--accent); color: #06251b; font-size: 4.8px; font-weight: 700;
}

/* the terminal panel is the hero of the lab act (camera fills the frame with the
 * screen at 2.5x) — wide panel + sizes tuned to read ~14-16px at hero width */
.lab-term { width: 130px; position: relative; display: flex; flex-direction: column; }
.lt-tabs {
  display: flex; align-items: center; gap: 6px; height: 14px; padding: 0 6px;
  border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 5.4px; color: var(--muted);
}
.lt-tab.on { color: var(--text); font-weight: 700; box-shadow: inset 0 -1.5px 0 var(--accent); padding: 2px 0; }
.lt-validate {
  margin-left: auto; padding: 1px 5px; border-radius: 999px;
  border: .8px solid rgba(74,222,128,0.5); color: var(--accent); font-size: 5.2px;
  opacity: 0;
}
.lt-validate.pulse { animation: hintpulse .9s ease-in-out infinite; }
.lt-empty {
  position: absolute; inset: 14px 0 0 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px; padding: 0 10px; text-align: center;
}
.lt-glyph { font-size: 13px; font-weight: 700; color: var(--muted); opacity: .7; }
.lt-hint { font-size: 5.4px; color: var(--muted); line-height: 1.5; }
.lt-start {
  position: relative; margin-top: 2px; padding: 3px 9px; border-radius: 5px;
  background: var(--accent); color: #06251b; font-size: 6.4px; font-weight: 700;
  animation: hintpulse 1.1s ease-in-out infinite;
}
.lt-ripple {
  position: absolute; inset: -4px; border: 1.2px solid var(--accent); border-radius: 7px;
  opacity: 0; pointer-events: none;
}
#term-lines { padding: 6px 6px; font-size: 6.4px; line-height: 1.55; }
.tl { white-space: pre; color: var(--body); }
.tl .p { color: var(--prompt); font-weight: 600; }
.tl.out { color: var(--out); }
.tl.ok { color: var(--ok); }
.tl .run { color: var(--ok); }
.tl .ready { color: var(--accent); font-weight: 700; }
.tl.status { color: var(--accent); font-weight: 700; }
.tl.chip {
  display: block; width: fit-content; margin: 2px 0 0; padding: 1.5px 7px; border-radius: 999px;
  background: rgba(52,211,153,0.12); border: 1px solid rgba(52,211,153,0.35);
  color: var(--ok); font-size: 8px; transform-origin: left center;
}
.tl-cursor { color: var(--body); animation: curblink .8s steps(1) infinite; }
@keyframes curblink { 50% { opacity: 0; } }

/* ---------- character rig ---------- */

#char { position: absolute; left: 0; top: 0; }
#char .limb { stroke-width: 19; stroke-linecap: round; fill: none; }

/* joints pivot around absolute viewBox points (geometry is drawn in place;
 * CSS rotations would override attribute transforms, so none are used) */
#char .arm, #char .arm > g, #char .leg, #char #head, #char #torso {
  transform-box: view-box;
  transition: transform .45s cubic-bezier(.3,1.4,.4,1);
}
#arm-L { transform-origin: 80px 172px; }
#forearm-L { transform-origin: 80px 218px; }
#arm-R { transform-origin: 144px 172px; }
#forearm-R { transform-origin: 144px 218px; }
#leg-L { transform-origin: 99px 240px; }
#leg-R { transform-origin: 122px 240px; }
#char #head { transform-origin: 111px 118px; }
#char #torso { transform-origin: 110px 250px; }
#char #legs-sit, #char #legs-stand { transition: opacity .18s linear; }
#char #legs-sit { opacity: 0; }
#char #mouth-open { opacity: 0; }
#char #char-inner { transform-box: fill-box; transform-origin: center bottom; }

/* eyes blink — always on */
#eyes { transform-box: fill-box; transform-origin: center; animation: blink 3.6s infinite; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96.5% { transform: scaleY(.06); } }

/* --- poses --- */

/* walk */
#char.pose-walk #leg-L { animation: legswing .55s ease-in-out infinite; }
#char.pose-walk #leg-R { animation: legswing .55s ease-in-out infinite; animation-delay: -.275s; }
#char.pose-walk #arm-L { animation: armswing .55s ease-in-out infinite; animation-delay: -.275s; }
#char.pose-walk #arm-R { animation: armswing .55s ease-in-out infinite; }
#char.pose-walk #char-inner { animation: walkbob .275s ease-in-out infinite; }
@keyframes legswing { 0%,100% { transform: rotate(24deg); } 50% { transform: rotate(-24deg); } }
@keyframes armswing { 0%,100% { transform: rotate(14deg); } 50% { transform: rotate(-14deg); } }
@keyframes walkbob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* seated base */
#char.pose-sit #legs-stand, #char.pose-type #legs-stand, #char.pose-reach #legs-stand,
#char.pose-scratch #legs-stand, #char.pose-fistpump #legs-stand { opacity: 0; }
#char.pose-sit #legs-sit, #char.pose-type #legs-sit, #char.pose-reach #legs-sit,
#char.pose-scratch #legs-sit, #char.pose-fistpump #legs-sit { opacity: 1; }

#char.pose-sit #torso, #char.pose-type #torso, #char.pose-reach #torso,
#char.pose-scratch #torso, #char.pose-fistpump #torso { transform: rotate(4deg); }

#char.pose-sit #arm-L, #char.pose-sit #arm-R { transform: rotate(-38deg); }
#char.pose-sit #forearm-L, #char.pose-sit #forearm-R { transform: rotate(-30deg); }

/* typing */
#char.pose-type #arm-L, #char.pose-type #arm-R { transform: rotate(-46deg); }
#char.pose-type #forearm-L { transform: rotate(-38deg); animation: typetap .25s ease-in-out infinite; }
#char.pose-type #forearm-R { transform: rotate(-38deg); animation: typetap .25s ease-in-out infinite; animation-delay: -.125s; }
#char.pose-type #head { animation: headnod 1.3s ease-in-out infinite; }
@keyframes typetap { 0%,100% { transform: rotate(-38deg); } 50% { transform: rotate(-46deg); } }
@keyframes headnod { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(2.5deg); } }

/* single decisive key press (start / submit) */
#char.pose-reach #arm-R { transform: rotate(-64deg); }
#char.pose-reach #forearm-R { transform: rotate(-26deg); animation: presstap .5s ease-in-out 1 both; }
#char.pose-reach #arm-L { transform: rotate(-34deg); }
#char.pose-reach #forearm-L { transform: rotate(-30deg); }
#char.pose-reach #torso { transform: rotate(7deg); }
@keyframes presstap { 0% { transform: rotate(-26deg); } 45% { transform: rotate(-54deg); } 100% { transform: rotate(-30deg); } }

/* head scratch (thinking) */
#char.pose-scratch #arm-R { transform: rotate(-150deg); }
#char.pose-scratch #forearm-R { transform: rotate(-64deg); animation: scratch .4s ease-in-out infinite; }
#char.pose-scratch #arm-L { transform: rotate(-40deg); }
#char.pose-scratch #forearm-L { transform: rotate(-32deg); }
#char.pose-scratch #head { transform: rotate(-5deg); }
@keyframes scratch { 0%,100% { transform: rotate(-64deg); } 50% { transform: rotate(-52deg); } }

/* seated fist pump */
#char.pose-fistpump #arm-R { transform: rotate(-138deg); }
#char.pose-fistpump #forearm-R { transform: rotate(-24deg); animation: pump .38s ease-in-out infinite; }
#char.pose-fistpump #arm-L { transform: rotate(-40deg); }
#char.pose-fistpump #forearm-L { transform: rotate(-30deg); }
#char.pose-fistpump #head { transform: rotate(-4deg); }
@keyframes pump { 0%,100% { transform: rotate(-24deg); } 50% { transform: rotate(-48deg); } }

/* standing celebration */
#char.pose-celebrate #arm-L { transform: rotate(-196deg); }
#char.pose-celebrate #arm-R { transform: rotate(-140deg); }
#char.pose-celebrate #forearm-L { transform: rotate(6deg); animation: wave .5s ease-in-out infinite; }
#char.pose-celebrate #forearm-R { transform: rotate(-6deg); animation: wave .5s ease-in-out infinite; animation-delay: -.25s; }
#char.pose-celebrate #head { transform: rotate(-3deg); }
#char.pose-celebrate #char-inner { animation: hop .5s ease-in-out infinite; }
#char.pose-celebrate #mouth-smile { opacity: 0; }
#char.pose-celebrate #mouth-open { opacity: 1; }
@keyframes wave { 0%,100% { transform: rotate(-10deg); } 50% { transform: rotate(12deg); } }
@keyframes hop { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-14px); } }

/* ---------- skill pills (the climb) ---------- */
#skill-pills .pill {
  position: absolute; padding: 6px 15px; border-radius: 999px;
  font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--ok);
  background: rgba(52,211,153,0.10); border: 1.5px solid rgba(52,211,153,0.45);
  box-shadow: 0 0 22px rgba(52,211,153,0.18);
  opacity: 0; transform-origin: center;
}
/* flattened arc so the peak (kubernetes) clears the cropped top edge (~237) yet
   stays above the monitor (~300) — all five badges visible in the tight frame */
#skill-pills .pill:nth-child(1) { left: 615px; top: 286px; }
#skill-pills .pill:nth-child(2) { left: 688px; top: 262px; }
#skill-pills .pill:nth-child(3) { left: 772px; top: 252px; }
#skill-pills .pill:nth-child(4) { left: 880px; top: 258px; }
#skill-pills .pill:nth-child(5) { left: 975px; top: 278px; }

/* ---------- offer card (the promotion) ---------- */
#offer-card {
  position: absolute; left: 690px; top: 275px; width: 320px;
  padding: 14px 18px; border-radius: 14px;
  text-align: center;
  background: #10151d; border: 1.5px solid rgba(74,222,128,0.55);
  box-shadow: 0 0 50px rgba(74,222,128,0.28), 0 22px 60px rgba(0,0,0,0.5);
  opacity: 0;
}
#offer-card .offer-title {
  font-family: var(--sans); font-weight: 800; font-size: 17px; color: var(--text);
}
#offer-card .offer-sub {
  margin-top: 5px; font-family: var(--mono); font-size: 10px; color: var(--accent);
}

/* ---------- confetti ---------- */
#confetti { position: absolute; left: 0; top: 0; pointer-events: none; }
#confetti rect { opacity: 0; }

/* ---------- outro ---------- */
#outro {
  /* cover only the visible (cropped) frame so the logo centers within it */
  position: absolute; top: 237px; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 22px; opacity: 0;
  background:
    radial-gradient(circle at 10% -5%, rgba(16,185,129,0.14), transparent 40%),
    radial-gradient(circle at 35% 0%, rgba(45,212,191,0.07), transparent 45%),
    radial-gradient(circle at 90% -10%, rgba(99,102,241,0.08), transparent 40%),
    var(--bg);
}
#outro img {
  /* transparent wordmark — no badge box; a soft emerald glow, centered by #outro flex */
  width: 460px; max-width: 62%;
  filter: drop-shadow(0 0 60px rgba(74, 222, 128, 0.22));
}
#outro .tagline { color: var(--muted); font-size: 19px; letter-spacing: .04em; font-family: var(--mono); }

/* ---------- sound toggle ---------- */
#sound-toggle {
  position: absolute; right: 14px; bottom: 14px; width: 36px; height: 36px;
  display: grid; place-items: center; border-radius: 999px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border);
  color: var(--muted); cursor: pointer; transition: color .2s, border-color .2s;
}
#sound-toggle[hidden] { display: none; }
#sound-toggle:hover { color: var(--text); }
#sound-toggle.on { color: var(--accent); border-color: rgba(74,222,128,0.5); }
#sound-toggle .spk-on { display: none; }
#sound-toggle.on .spk-on { display: block; }
#sound-toggle.on .spk-off { display: none; }

/* ---------- reduced motion ---------- */
.reduced *, .reduced *::before, .reduced *::after {
  animation: none !important;
  transition: none !important;
}

/* ---------- character variants (?char=keycap|robot|penguin|blob|human) ---------- */

.cv { display: none; }
body.char-human #cv-human { display: inline; }
body.char-keycap #cv-keycap { display: inline; }
body.char-robot #cv-robot { display: inline; }
body.char-penguin #cv-penguin { display: inline; }
body.char-blob #cv-blob { display: inline; }

/* shared rig: single-segment limbs, front-facing bodies */
.arm-single-L, .arm-single-R, .leg-vL, .leg-vR, .body-v, #rb-head, .pg-foot {
  transform-box: view-box;
  transition: transform .45s cubic-bezier(.3,1.4,.4,1);
}
#kb-arm-L { transform-origin: 42px 170px; }
#kb-arm-R { transform-origin: 178px 170px; }
#kb-leg-L { transform-origin: 88px 224px; }
#kb-leg-R { transform-origin: 132px 224px; }
#kb-body  { transform-origin: 110px 224px; }
#rb-arm-L { transform-origin: 58px 152px; }
#rb-arm-R { transform-origin: 162px 152px; }
#rb-leg-L { transform-origin: 88px 240px; }
#rb-leg-R { transform-origin: 132px 240px; }
#rb-head  { transform-origin: 110px 124px; }
#rb-torso { transform-origin: 110px 240px; }
#pg-flip-L { transform-origin: 48px 176px; }
#pg-flip-R { transform-origin: 172px 176px; }
#pg-body  { transform-origin: 110px 292px; }
#pg-foot-L { transform-origin: 92px 313px; }
#pg-foot-R { transform-origin: 128px 313px; }
#bl-arm-L { transform-origin: 46px 204px; }
#bl-arm-R { transform-origin: 174px 204px; }
#bl-body  { transform-origin: 110px 276px; }

.eyes-v { transform-box: fill-box; transform-origin: center; animation: blink 3.6s infinite; }
.mouth-open-v { opacity: 0; }
.legs-sit-v { opacity: 0; }
.legs-sit-v, .legs-stand-v { transition: opacity .18s linear; }

/* seated */
#char.pose-sit .legs-stand-v, #char.pose-type .legs-stand-v, #char.pose-reach .legs-stand-v,
#char.pose-scratch .legs-stand-v, #char.pose-fistpump .legs-stand-v { opacity: 0; }
#char.pose-sit .legs-sit-v, #char.pose-type .legs-sit-v, #char.pose-reach .legs-sit-v,
#char.pose-scratch .legs-sit-v, #char.pose-fistpump .legs-sit-v { opacity: 1; }

#char.pose-sit .arm-single-L { transform: rotate(24deg); }
#char.pose-sit .arm-single-R { transform: rotate(-24deg); }

/* walk */
#char.pose-walk .leg-vL { animation: legswing .55s ease-in-out infinite; }
#char.pose-walk .leg-vR { animation: legswing .55s ease-in-out infinite; animation-delay: -.275s; }
#char.pose-walk .arm-single-L { animation: armswing .55s ease-in-out infinite; animation-delay: -.275s; }
#char.pose-walk .arm-single-R { animation: armswing .55s ease-in-out infinite; }

/* typing: both limbs angled toward the desk (screen right) */
#char.pose-type .arm-single-L { animation: tapL .25s ease-in-out infinite; }
#char.pose-type .arm-single-R { animation: tapR .25s ease-in-out infinite; animation-delay: -.125s; }
#char.pose-type .body-v, #char.pose-type #rb-head { animation: headnod 1.3s ease-in-out infinite; }
@keyframes tapL { 0%,100% { transform: rotate(82deg); } 50% { transform: rotate(70deg); } }
@keyframes tapR { 0%,100% { transform: rotate(-42deg); } 50% { transform: rotate(-56deg); } }

/* single decisive key press */
#char.pose-reach .arm-single-L { transform: rotate(30deg); }
#char.pose-reach .arm-single-R { animation: pressS .5s ease-in-out 1 both; }
#char.pose-reach .body-v, #char.pose-reach #rb-head { transform: rotate(3deg); }
@keyframes pressS { 0% { transform: rotate(-30deg); } 45% { transform: rotate(-72deg); } 100% { transform: rotate(-48deg); } }

/* head scratch (thinking) */
#char.pose-scratch .arm-single-L { transform: rotate(20deg); }
#char.pose-scratch .arm-single-R { animation: scratchS .4s ease-in-out infinite; }
#char.pose-scratch .body-v, #char.pose-scratch #rb-head { transform: rotate(-4deg); }
@keyframes scratchS { 0%,100% { transform: rotate(-148deg); } 50% { transform: rotate(-134deg); } }

/* fist pump */
#char.pose-fistpump .arm-single-L { transform: rotate(24deg); }
#char.pose-fistpump .arm-single-R { animation: pumpS .38s ease-in-out infinite; }
@keyframes pumpS { 0%,100% { transform: rotate(-112deg); } 50% { transform: rotate(-88deg); } }

/* celebration */
#char.pose-celebrate .arm-single-L { animation: waveSL .5s ease-in-out infinite; }
#char.pose-celebrate .arm-single-R { animation: waveSR .5s ease-in-out infinite; animation-delay: -.25s; }
#char.pose-celebrate .mouth-smile-v { opacity: 0; }
#char.pose-celebrate .mouth-open-v { opacity: 1; }
@keyframes waveSL { 0%,100% { transform: rotate(100deg); } 50% { transform: rotate(122deg); } }
@keyframes waveSR { 0%,100% { transform: rotate(-100deg); } 50% { transform: rotate(-122deg); } }

/* penguin: waddle instead of leg swing */
body.char-penguin #char.pose-walk #pg-body { animation: waddle .55s ease-in-out infinite; }
body.char-penguin #char.pose-walk .pg-foot { animation: stepv .55s ease-in-out infinite; }
body.char-penguin #char.pose-walk #pg-foot-R { animation-delay: -.275s; }
@keyframes waddle { 0%,100% { transform: rotate(4deg); } 50% { transform: rotate(-4deg); } }
@keyframes stepv { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* blob: always hovering */
#bl-body { animation: hoverbob 2.4s ease-in-out infinite; }
body.char-blob #char.pose-walk #bl-body { animation: hoverbob .9s ease-in-out infinite; }
@keyframes hoverbob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* robot: antenna glow */
.rb-bulb { animation: bulbpulse 2.2s ease-in-out infinite; }
#char.pose-celebrate .rb-bulb { animation: bulbpulse .5s ease-in-out infinite; }
@keyframes bulbpulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* chips sized for the lab terminal panel */
.lab-term .tl.chip { font-size: 6px; padding: 1.5px 5px; margin-top: 2px; }