/* ==========================================================
   avatar — pixel man at a desk
   ========================================================== */

.avatar {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  margin: 0.5rem 0 0;
  line-height: 0;
  /* hover sparkles: dark pixels by day, bright ones at night.
     The halo is the opposite tone so they read on any background. */
  --spark-core: #111827;
  --spark-halo: rgba(248, 250, 252, 0.95);
  /* red by day, white wine at night */
  --wine-top: #b91c1c;
  --wine-body: #7f1d1d;
  --wine-deep: #651616;
  --wine-bubble: #e8a3a3;
  --wine-bubble-hi: #f6cfcf;
  --atom-orbit: #22d3ee;
  --atom-orbit-glow: #0284c7;
  --atom-core: #ffffff;
  --atom-core-glow: #67e8f9;
  --atom-electron: #e0f7ff;
  --atom-pad: rgba(8, 14, 26, 0.35);
}

html[data-theme="dark"] .avatar {
  --spark-core: #fff7cc;
  --spark-halo: rgba(8, 14, 26, 0.95);
  --wine-top: #f6f2e2;
  --wine-body: #e2dcc6;
  --wine-deep: #c9c2a8;
  --wine-bubble: #fffdf3;
  --wine-bubble-hi: #ffffff;
  --atom-orbit: #67e8f9;
  --atom-orbit-glow: #22d3ee;
  --atom-core: #ffffff;
  --atom-core-glow: #a5f3fc;
  --atom-electron: #ffffff;
  --atom-pad: rgba(2, 8, 20, 0.45);
}

.avatar__stage {
  position: relative;
  width: min(100%, 22rem);
  margin: 0 auto;
  aspect-ratio: 384 / 448;
}

.avatar__svg {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ---------- glasses lenses + dashboard FX clipped into them ---------- */

.avatar__lens-fx {
  opacity: 0.85;
  filter: blur(0.6px);
}

.avatar__fx-scene {
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}

.avatar__fx-scene.is-active {
  opacity: 1;
}

.avatar__fx-scene.is-active .avatar__fx-scan {
  animation: avatar-fx-scan 2.6s steps(8, end) infinite;
}

.avatar__fx-scene.is-active .avatar__fx-gantt {
  animation: avatar-fx-slide 2.4s ease-in-out infinite alternate;
}

.avatar__fx-scene.is-active .avatar__fx-bar {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: avatar-fx-bar 1.5s var(--ease) both;
}

.avatar__fx-scene.is-active .avatar__fx-bar--2 { animation-delay: 0.12s; }
.avatar__fx-scene.is-active .avatar__fx-bar--3 { animation-delay: 0.24s; }
.avatar__fx-scene.is-active .avatar__fx-bar--4 { animation-delay: 0.36s; }

.avatar__fx-scene.is-active .avatar__fx-curve {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  animation: avatar-fx-draw 2s var(--ease) forwards;
}

.avatar__fx-scene.is-active .avatar__fx-card {
  animation: avatar-fx-bob 1.8s ease-in-out infinite alternate;
}

.avatar__pupil {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.15s steps(2, end);
}

/* ---------- clickable props: transparent hit pad, sparkles on hover ---------- */

.avatar__hit-group {
  cursor: pointer;
}

.avatar__hit {
  fill: transparent;
  pointer-events: all;
}

.avatar__spark {
  fill: var(--spark-core);
  filter: drop-shadow(0 0 1.5px var(--spark-halo)) drop-shadow(0 0 1.5px var(--spark-halo));
  pointer-events: none;
  opacity: 0;
}

.avatar__hit-group:hover .avatar__spark,
.avatar__hit-group:focus-visible .avatar__spark {
  animation: avatar-spark 1.2s steps(3, end) infinite;
}

/* a click answers with a short burst of the same sparkles */
.avatar__hit-group.is-hit-flash .avatar__spark {
  animation: avatar-spark 0.4s steps(3, end) 3;
}

/* ---------- glasses travel between the face and the window sill ----------
   The folded pair on the sill starts out parked over the face at 2.4×, so
   one transition carries it down to the sill and back again. */

.avatar__glasses {
  opacity: 1;
  transition: opacity 0.2s linear 0.42s;
}

.avatar.is-glasses-off .avatar__glasses {
  opacity: 0;
  transition: opacity 0.16s linear;
}

/* the FX cycle is also cleared in avatar.js, this just kills the running frames */
.avatar.is-glasses-off .avatar__fx-scene,
.avatar.is-glasses-off .avatar__fx-scene.is-active {
  opacity: 0;
}

.avatar.is-glasses-off .avatar__fx-scene * {
  animation: none !important;
}

.avatar__eyes-bare {
  opacity: 0;
  transition: opacity 0.3s linear;
}

.avatar.is-glasses-off .avatar__eyes-bare {
  opacity: 1;
  transition-delay: 0.22s;
}

.avatar__glasses-off {
  transform-box: view-box;
  transform-origin: 83px 231px;
  transform: translate(109px, -67px) scale(2.4);
  opacity: 0;
  transition: transform 0.6s var(--ease), opacity 0.2s linear 0.4s;
}

.avatar.is-glasses-off .avatar__glasses-off {
  transform: translate(0, 0) scale(1);
  opacity: 1;
  transition: transform 0.6s var(--ease), opacity 0.22s linear 0.04s;
}

/* only the pair you can actually see is clickable */
.avatar__glasses-off .avatar__hit { pointer-events: none; }
.avatar.is-glasses-off .avatar__glasses-off .avatar__hit { pointer-events: all; }
.avatar.is-glasses-off .avatar__hit-group--face .avatar__hit { pointer-events: none; }

/* ---------- sea: crest rows drift, the surf washes up the sand ---------- */

.avatar__wave--r1 { animation: avatar-wave-right 9s linear infinite; }
.avatar__wave--l1 { animation: avatar-wave-left 12s linear infinite; }
.avatar__wave--r2 { animation: avatar-wave-right 15s linear infinite; }
.avatar__wave--l2 { animation: avatar-wave-left 19s linear infinite; }
.avatar__wave--r3 { animation: avatar-wave-right 24s linear infinite; }

.avatar__sea-waves {
  animation: avatar-sea-bob 4.6s ease-in-out infinite alternate;
}

.avatar__surf {
  animation: avatar-surf 5.4s ease-in-out infinite;
  opacity: 0;
}

.avatar__surf--night { animation-duration: 6.2s; }

.avatar__moonrow { animation: avatar-moonrow 3.6s ease-in-out infinite alternate; }
.avatar__moonrow--2 { animation-duration: 4.4s; animation-delay: -0.6s; }
.avatar__moonrow--3 { animation-duration: 3.1s; animation-delay: -1.2s; }
.avatar__moonrow--4 { animation-duration: 5s; animation-delay: -0.4s; }
.avatar__moonrow--5 { animation-duration: 4s; animation-delay: -1.8s; }
.avatar__moonrow--6 { animation-duration: 5.6s; animation-delay: -1s; }

/* ---------- window behind the avatar: sea by day, moonlit sea by night ---------- */

.avatar__window-day,
.avatar__window-night {
  transition: opacity 0.4s linear;
  pointer-events: none;
}

.avatar__window-day { opacity: 1; }
.avatar__window-night { opacity: 0; }

html[data-theme="dark"] .avatar__window-day { opacity: 0; }
html[data-theme="dark"] .avatar__window-night { opacity: 1; }

/* celestial body: only the visible pane's sun/moon receives clicks */
html:not([data-theme="dark"]) .avatar__window-day [data-lab-hit="sun"],
html[data-theme="dark"] .avatar__window-night [data-lab-hit="moon"] {
  pointer-events: all;
  cursor: pointer;
}

.avatar__star {
  animation: avatar-star 3.4s steps(2, end) infinite;
}

.avatar__star--2 { animation-duration: 2.6s; animation-delay: 0.7s; }
.avatar__star--3 { animation-duration: 4.1s; animation-delay: 1.4s; }

/* ---------- head / shoulders ---------- */

.avatar__head {
  transform-box: view-box;
  transform-origin: 192px 262px;
}

.avatar__body {
  transform-box: view-box;
  transform-origin: 192px 380px;
}

.avatar.is-nodding .avatar__head {
  animation: avatar-nod 0.9s steps(4, end);
}

/* sigh: shoulders + upper torso rise, head tips back a hair */
.avatar.is-sighing .avatar__body {
  animation: avatar-sigh 1.2s steps(3, end);
}

.avatar.is-sighing .avatar__head {
  animation: avatar-sigh-head 1.2s steps(3, end);
}

.avatar.is-sighing .avatar__pupil {
  filter: drop-shadow(0 0 5px #64ffda);
}

/* ---------- think: right hand to chin, typing pauses ---------- */

.avatar.is-thinking .avatar__fingers--r {
  animation: avatar-think-typehide 2.6s steps(1, end) both;
}

.avatar.is-thinking .avatar__arm--r {
  animation: avatar-think-shoulder-r 2.6s ease-in-out both;
}

.avatar.is-thinking .avatar__arm--r .avatar__elbow {
  animation: avatar-think-elbow-r 2.6s ease-in-out both;
}

.avatar.is-thinking .avatar__arm--r .avatar__hand {
  animation: avatar-think-hand-r 2.6s ease-in-out both;
}

.avatar.is-thinking .avatar__head {
  animation: avatar-think-head 2.6s ease-in-out both;
}

.avatar.is-thinking .avatar__body {
  animation: avatar-think-body 2.6s ease-in-out both;
}

/* ---------- tired: stretch / yawn ---------- */

.avatar.is-tired .avatar__fingers {
  animation: avatar-tired-typehide 2.6s steps(1, end) both;
}

.avatar.is-tired .avatar__arm--l {
  animation: avatar-tired-shoulder-l 2.6s ease-in-out both;
}

.avatar.is-tired .avatar__arm--r {
  animation: avatar-tired-shoulder-r 2.6s ease-in-out both;
}

.avatar.is-tired .avatar__arm--l .avatar__elbow {
  animation: avatar-tired-elbow-l 2.6s ease-in-out both;
}

.avatar.is-tired .avatar__arm--r .avatar__elbow {
  animation: avatar-tired-elbow-r 2.6s ease-in-out both;
}

.avatar.is-tired .avatar__arm--l .avatar__hand {
  animation: avatar-tired-hand-l 2.6s ease-in-out both;
}

.avatar.is-tired .avatar__arm--r .avatar__hand {
  animation: avatar-tired-hand-r 2.6s ease-in-out both;
}

.avatar.is-tired .avatar__body {
  animation: avatar-tired-body 2.6s ease-in-out both;
}

.avatar.is-tired .avatar__head {
  animation: avatar-tired-head 2.6s ease-in-out both;
}

.avatar.is-tired .avatar__lids {
  animation: avatar-tired-lids 2.6s steps(2, end) both;
}

/* ---------- lang switch: blink + slight head turn ---------- */

.avatar.is-lang-turn .avatar__head {
  animation: avatar-lang-head 0.85s ease-in-out both;
}

.avatar.is-lang-turn .avatar__lids {
  animation: avatar-lang-lids 0.85s steps(2, end) both;
}

.avatar__lids {
  opacity: 0;
  pointer-events: none;
}

/* ---------- lamp flicker (dblclick; does not change theme) ---------- */

.avatar.is-lamp-flicker .avatar__lamp {
  animation: avatar-lamp-flicker 0.9s steps(1, end) both;
}

.avatar.is-lamp-flicker .avatar__glow {
  animation: avatar-lamp-flicker-glow 0.9s steps(1, end) both;
}

/* ---------- desk lamp (LEFT) ---------- */

.avatar__lamp-rays,
.avatar__lamp-led-on {
  opacity: 0;
  transition: opacity 0.35s linear;
}

.avatar__lamp-led-off {
  opacity: 1;
  transition: opacity 0.35s linear;
}

html[data-theme="dark"] .avatar__lamp-rays {
  opacity: 0.38;
}

html[data-theme="dark"] .avatar__lamp-led-on {
  opacity: 1;
}

html[data-theme="dark"] .avatar__lamp-led-off {
  opacity: 0;
}

/* ---------- arms: shoulder → elbow → hand (always connected) ---------- */

.avatar__arm--l,
.avatar__arm--r,
.avatar__elbow,
.avatar__hand {
  transform-box: view-box;
}

.avatar__arm--l { transform-origin: 86px 292px; }
.avatar__arm--r { transform-origin: 298px 292px; }

.avatar__arm--l .avatar__elbow { transform-origin: 88px 406px; }
.avatar__arm--r .avatar__elbow { transform-origin: 296px 406px; }

.avatar__arm--l .avatar__hand { transform-origin: 148px 411px; }
.avatar__arm--r .avatar__hand { transform-origin: 236px 411px; }

/* typing: every finger is driven individually from avatar.js, so the
   pattern itself changes (random singles, bursts, L→R / R→L sweeps).
   The finger groups sit inside the hand, so the parent rotations never
   fight the per-finger transforms. */
.avatar__fingers {
  transform-box: fill-box;
  transform-origin: top center;
}

.avatar__finger {
  transform-box: fill-box;
  transform-origin: top center;
  transform: translateY(-5px);
  transition: transform 80ms steps(2, end);
}

.avatar__finger.is-down {
  transform: translateY(1px);
}

.avatar__key {
  transform-box: fill-box;
  transform-origin: center;
  transition: fill 90ms linear, transform 90ms steps(2, end);
}

.avatar__key.is-hit {
  fill: #c3d2ec;
  transform: translateY(2px);
}

/* ---------- sip: LEFT arm reaches the mug, lifts it past the monitor ---------- */

.avatar__mug {
  transform-box: view-box;
  transform-origin: 63px 389px;
}

.avatar.is-sipping .avatar__arm--l {
  animation: avatar-sip-shoulder-l 4.2s linear both;
}

.avatar.is-sipping .avatar__arm--l .avatar__elbow {
  animation: avatar-sip-elbow-l 4.2s linear both;
}

.avatar.is-sipping .avatar__arm--l .avatar__hand {
  animation: avatar-sip-hand-l 4.2s linear both;
}

.avatar.is-sipping .avatar__mug {
  animation: avatar-sip-mug 4.2s linear both;
}

.avatar.is-sipping .avatar__head {
  animation: avatar-sip-head 4.2s ease-in-out both;
}

.avatar.is-sipping .avatar__fingers--l {
  animation: avatar-sip-typehide 4.2s steps(1, end) both;
}

.avatar__grip2 {
  opacity: 0;
}

.avatar.is-sipping .avatar__grip2 {
  animation: avatar-sip-grip2 4.2s steps(1, end) both;
}

/* ---------- victory (V1): forearms swing up beside the monitor ---------- */

.avatar.is-cheering .avatar__fingers {
  animation: none;
}

.avatar.is-cheering .avatar__arm--l {
  animation: avatar-cheer-shoulder-l 1.8s ease-in-out both;
}

.avatar.is-cheering .avatar__arm--r {
  animation: avatar-cheer-shoulder-r 1.8s ease-in-out both;
}

.avatar.is-cheering .avatar__arm--l .avatar__elbow {
  animation: avatar-cheer-elbow-l 1.8s ease-in-out both;
}

.avatar.is-cheering .avatar__arm--r .avatar__elbow {
  animation: avatar-cheer-elbow-r 1.8s ease-in-out both;
}

.avatar.is-cheering .avatar__body {
  animation: avatar-cheer-body 1.8s ease-in-out both;
}

.avatar.is-cheering .avatar__head {
  animation: avatar-cheer-head 1.8s ease-in-out both;
}

.avatar__cheer-fx {
  opacity: 0;
}

.avatar.is-cheering .avatar__cheer-fx {
  animation: avatar-cheer-spark 1.8s steps(4, end) both;
}

/* ---------- victory overlays: salute at night, confetti + blowers by day
   ---------- is-cheer-fx outlives is-cheering so nothing snaps mid-flight */

.avatar__fireworks,
.avatar__cheer-day {
  opacity: 0;
  pointer-events: none;
}

html[data-theme="dark"] .avatar.is-cheer-fx .avatar__fireworks,
html:not([data-theme="dark"]) .avatar.is-cheer-fx .avatar__cheer-day {
  opacity: 1;
}

.avatar__fw-trail {
  transform-box: fill-box;
  transform-origin: bottom center;
  opacity: 0;
}

.avatar__fw-burst {
  transform-box: view-box;
  opacity: 0;
}

.avatar__fw--1 .avatar__fw-burst { transform-origin: 112px 56px; }
.avatar__fw--2 .avatar__fw-burst { transform-origin: 214px 52px; }
.avatar__fw--3 .avatar__fw-burst { transform-origin: 268px 78px; }

html[data-theme="dark"] .avatar.is-cheer-fx .avatar__fw-trail {
  animation: avatar-fw-trail 1.5s steps(7, end) both;
}

html[data-theme="dark"] .avatar.is-cheer-fx .avatar__fw-burst {
  animation: avatar-fw-burst 1.5s steps(7, end) both;
}

html[data-theme="dark"] .avatar.is-cheer-fx .avatar__fw--2 .avatar__fw-trail,
html[data-theme="dark"] .avatar.is-cheer-fx .avatar__fw--2 .avatar__fw-burst {
  animation-delay: 0.45s;
}

html[data-theme="dark"] .avatar.is-cheer-fx .avatar__fw--3 .avatar__fw-trail,
html[data-theme="dark"] .avatar.is-cheer-fx .avatar__fw--3 .avatar__fw-burst {
  animation-delay: 0.9s;
}

.avatar__confetti-bit {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}

html:not([data-theme="dark"]) .avatar.is-cheer-fx .avatar__confetti-bit {
  animation-name: avatar-confetti-a;
  animation-timing-function: linear;
  animation-fill-mode: both;
}

html:not([data-theme="dark"]) .avatar.is-cheer-fx .avatar__confetti-bit--b {
  animation-name: avatar-confetti-b;
}

.avatar__horn {
  transform-box: view-box;
  opacity: 0;
}

.avatar__horn-tube {
  transform-box: view-box;
}

.avatar__horn--l .avatar__horn-tube { transform-origin: 12px 205px; }
.avatar__horn--r .avatar__horn-tube { transform-origin: 372px 205px; }

html:not([data-theme="dark"]) .avatar.is-cheer-fx .avatar__horn--l {
  animation: avatar-horn-in-l 2.6s ease-out both;
}

html:not([data-theme="dark"]) .avatar.is-cheer-fx .avatar__horn--r {
  animation: avatar-horn-in-r 2.6s ease-out both;
}

html:not([data-theme="dark"]) .avatar.is-cheer-fx .avatar__horn-tube {
  animation: avatar-horn 2.6s ease-in-out both;
}

html:not([data-theme="dark"]) .avatar.is-cheer-fx .avatar__horn--r .avatar__horn-tube {
  animation-delay: 0.16s;
}

/* ---------- depth: a copy of the monitor face drawn over the shoulders and
   arms, so nothing behind the screen ever bleeds through it ---------- */

.avatar__monitor-cover {
  opacity: 1;
}

/* ---------- sticky note ---------- */

.avatar__sticky {
  transform-box: view-box;
  transform-origin: 236px 292px;
  cursor: pointer;
  pointer-events: all;
}

.avatar__sticky-curl {
  opacity: 0;
  pointer-events: none;
}

.avatar.is-note-flying .avatar__sticky {
  animation: avatar-sticky-fly 1.6s cubic-bezier(0.3, 0, 0.7, 1) both;
}

.avatar.is-note-flying .avatar__sticky-curl {
  animation: avatar-sticky-curl 1.6s steps(2, end) both;
}

.avatar.is-note-gone .avatar__sticky,
.avatar.is-note-gone .avatar__sticky-curl {
  opacity: 0;
  pointer-events: none;
}

.avatar__glow {
  opacity: 0.55;
  animation: avatar-glow 1.8s steps(3, end) infinite;
}

/* ---------- neon atom on the monitor screen ---------- */

.avatar__screens {
  pointer-events: none;
}

.avatar__screen {
  opacity: 0;
  pointer-events: none;
}

.avatar__screen.is-active {
  opacity: 1;
}

.avatar__atom {
  pointer-events: none;
  /* Override root SVG crispEdges — thin ellipse strokes otherwise vanish when scaled down */
  shape-rendering: geometricPrecision;
}

.avatar__atom-pad {
  fill: var(--atom-pad, #0b1220);
}

.avatar__atom-orbit {
  fill: none;
  stroke: var(--atom-orbit, #67e8f9);
}

.avatar__atom-orbit-glow {
  fill: none;
  stroke: var(--atom-orbit-glow, #22d3ee);
  opacity: 0.45;
}

.avatar__atom-electron {
  fill: var(--atom-electron, #ffffff);
}

.avatar__atom-spark {
  fill: var(--atom-orbit, #67e8f9);
}

.avatar__atom-core-glow {
  fill: var(--atom-core-glow, #a5f3fc);
  opacity: 0.55;
  animation: avatar-atom-pulse 1.4s steps(2, end) infinite;
}

.avatar__atom-core {
  fill: var(--atom-core, #ffffff);
  animation: avatar-atom-pulse 1.4s steps(2, end) infinite;
}

.avatar__atom-core-hot {
  fill: #ecfeff;
}

@keyframes avatar-atom-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.65;
  }
}

/* ---------- coffee steam: rises to the top of the monitor, thinning out ---------- */

.avatar__steam-group {
  transition: opacity 0.15s linear;
}

.avatar__steam {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: bottom center;
}

.avatar__steam--1 { animation: avatar-steam 3.2s steps(20, end) infinite; }
.avatar__steam--2 { animation: avatar-steam 3.2s steps(20, end) infinite -0.8s; }
.avatar__steam--3 { animation: avatar-steam 3.2s steps(20, end) infinite -1.6s; }
.avatar__steam--4 { animation: avatar-steam 3.2s steps(20, end) infinite -2.4s; }

/* steam is killed the instant the sip starts and stays gone for the whole cup */
.avatar.is-sipping .avatar__steam-group {
  opacity: 0;
}

.avatar.is-sipping .avatar__steam {
  animation: none;
  opacity: 0;
}

/* ---------- coffee ↔ wine ---------- */

.avatar__cup {
  transition: opacity 0.3s linear;
}

.avatar__cup--wine { opacity: 0; }

.avatar.is-wine .avatar__cup--coffee { opacity: 0; }
.avatar.is-wine .avatar__cup--wine { opacity: 1; }

/* steam belongs to the coffee only */
.avatar.is-wine .avatar__steam-group {
  opacity: 0;
}

.avatar.is-wine .avatar__steam {
  animation: none;
  opacity: 0;
}

.avatar__wine-body { fill: var(--wine-body); }
.avatar__wine-top { fill: var(--wine-top); }
.avatar__wine-deep { fill: var(--wine-deep); }

.avatar__bubble,
.avatar__fizz {
  transform-box: fill-box;
  fill: var(--wine-bubble);
  opacity: 0;
}

.avatar__bubble--hi,
.avatar__fizz--hi {
  fill: var(--wine-bubble-hi);
}

.avatar.is-wine .avatar__bubble--1 { animation: avatar-bubble-a 2.6s linear infinite; }
.avatar.is-wine .avatar__bubble--2 { animation: avatar-bubble-b 3.4s linear infinite -0.9s; }
.avatar.is-wine .avatar__bubble--3 { animation: avatar-bubble-a 3s linear infinite -1.8s; }
.avatar.is-wine .avatar__bubble--4 { animation: avatar-bubble-b 2.2s linear infinite -0.4s; }
.avatar.is-wine .avatar__bubble--5 { animation: avatar-bubble-b 3.8s linear infinite -2.4s; }
.avatar.is-wine .avatar__bubble--6 { animation: avatar-bubble-a 3.2s linear infinite -1.3s; }

/* fizz escaping the rim; the travel matches avatar-steam so the plume
   tops out at the same height as the coffee steam */
.avatar__fizz-group {
  opacity: 0;
  transition: opacity 0.2s linear;
}

.avatar.is-wine .avatar__fizz-group { opacity: 1; }

.avatar.is-wine .avatar__fizz--1 { animation: avatar-fizz-a 3.4s linear infinite; }
.avatar.is-wine .avatar__fizz--2 { animation: avatar-fizz-b 3.4s linear infinite -0.55s; }
.avatar.is-wine .avatar__fizz--3 { animation: avatar-fizz-a 3.4s linear infinite -1.1s; }
.avatar.is-wine .avatar__fizz--4 { animation: avatar-fizz-b 3.4s linear infinite -1.7s; }
.avatar.is-wine .avatar__fizz--5 { animation: avatar-fizz-a 3.4s linear infinite -2.25s; }
.avatar.is-wine .avatar__fizz--6 { animation: avatar-fizz-b 3.4s linear infinite -2.85s; }

.avatar.is-sipping .avatar__fizz-group { opacity: 0; }

.avatar.is-sipping .avatar__fizz {
  animation: none;
  opacity: 0;
}

/* ---------- keyframes ---------- */

@keyframes avatar-sigh {
  0% { transform: translateY(0); }
  30% { transform: translateY(-8px); }
  55% { transform: translateY(-10px); }
  80% { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

@keyframes avatar-sigh-head {
  0% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-4px) rotate(-3deg); }
  60% { transform: translateY(-4px) rotate(-4deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

@keyframes avatar-nod {
  0%, 100% { transform: rotate(0deg); }
  35% { transform: translateY(4px) rotate(7deg); }
  70% { transform: rotate(-2deg); }
}

@keyframes avatar-star {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.35; }
}

/* D2 sip — right arm.
   0–23%   hand lifts off the keys, swings up behind the monitor, comes
           down onto the mug handle on the right of the desk
   23–31%  two-finger grip closes
   31–44%  elbow folds, mug travels up past the monitor to the lips
   44–62%  drink
   62–82%  mug back on the desk, grip opens
   82–100% hand returns to the keyboard
   Angles are solved from the real joint pivots (shoulder 298,292 /
   elbow 296,406 / wrist 236,411), so the chain never separates. */
@keyframes avatar-sip-shoulder-l {
  0% { transform: rotate(0deg); }
  6% { transform: rotate(4deg); }
  12% { transform: rotate(0deg); }
  18% { transform: rotate(-6deg); }
  23% { transform: rotate(-12.5deg); }
  33% { transform: rotate(-12.5deg); }
  37% { transform: rotate(-64.2deg); }
  41% { transform: rotate(-93.3deg); }
  61% { transform: rotate(-93.3deg); }
  65% { transform: rotate(-64.2deg); }
  69% { transform: rotate(-12.5deg); }
  79% { transform: rotate(-12.5deg); }
  88% { transform: rotate(-4deg); }
  100% { transform: rotate(0deg); }
}

@keyframes avatar-sip-elbow-l {
  0% { transform: rotate(0deg); }
  6% { transform: rotate(-22deg); }
  12% { transform: rotate(-70deg); }
  18% { transform: rotate(-124deg); }
  23% { transform: rotate(-159deg); }
  33% { transform: rotate(-159deg); }
  37% { transform: rotate(-103.4deg); }
  41% { transform: rotate(-45.3deg); }
  61% { transform: rotate(-45.3deg); }
  65% { transform: rotate(-103.4deg); }
  69% { transform: rotate(-159deg); }
  79% { transform: rotate(-159deg); }
  88% { transform: rotate(-60deg); }
  100% { transform: rotate(0deg); }
}

/* wrist counter-rotation keeps the hand the right way up while the
   forearm swings through 160° */
@keyframes avatar-sip-hand-l {
  0% { transform: rotate(0deg); }
  6% { transform: rotate(20deg); }
  12% { transform: rotate(68deg); }
  18% { transform: rotate(120deg); }
  23% { transform: rotate(156.4deg); }
  33% { transform: rotate(156.4deg); }
  37% { transform: rotate(185.6deg); }
  41% { transform: rotate(173.6deg); }
  61% { transform: rotate(173.6deg); }
  65% { transform: rotate(185.6deg); }
  69% { transform: rotate(156.4deg); }
  79% { transform: rotate(156.4deg); }
  88% { transform: rotate(58deg); }
  100% { transform: rotate(0deg); }
}

@keyframes avatar-sip-mug {
  0%, 33% { transform: translate(0, 0) rotate(0deg); }
  37% { transform: translate(76.5px, -62.1px) rotate(33deg); }
  41%, 61% { transform: translate(100.8px, -142.1px) rotate(50deg); }
  65% { transform: translate(76.5px, -62.1px) rotate(33deg); }
  69%, 100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes avatar-sip-head {
  0%, 34% { transform: translate(0, 0) rotate(0deg); }
  41%, 61% { transform: translate(-7px, -2px) rotate(-7deg); }
  69%, 100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes avatar-sip-grip2 {
  0%, 19% { opacity: 0; }
  21%, 78% { opacity: 1; }
  81%, 100% { opacity: 0; }
}

@keyframes avatar-sip-typehide {
  0%, 5% { opacity: 1; }
  8%, 88% { opacity: 0; }
  95%, 100% { opacity: 1; }
}

/* V1 cheer: forearms punch up on the outside of the monitor, elbows stay
   planted on the desk, shoulders keep both arms attached */
@keyframes avatar-cheer-shoulder-l {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(3deg); }
  45%, 65% { transform: rotate(5deg); }
  82% { transform: rotate(3deg); }
}

@keyframes avatar-cheer-shoulder-r {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-3deg); }
  45%, 65% { transform: rotate(-5deg); }
  82% { transform: rotate(-3deg); }
}

@keyframes avatar-cheer-elbow-l {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-62deg); }
  45%, 65% { transform: rotate(-105deg); }
  82% { transform: rotate(-62deg); }
}

@keyframes avatar-cheer-elbow-r {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(62deg); }
  45%, 65% { transform: rotate(105deg); }
  82% { transform: rotate(62deg); }
}

@keyframes avatar-cheer-body {
  0%, 100% { transform: translateY(0); }
  30%, 76% { transform: translateY(-10px); }
}

@keyframes avatar-cheer-head {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-6px) rotate(3deg); }
  60% { transform: translateY(-6px) rotate(-3deg); }
  80% { transform: translateY(-4px) rotate(2deg); }
}

@keyframes avatar-cheer-spark {
  0% { opacity: 0; transform: translateY(8px); }
  30%, 70% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-14px); }
}

/* think: right arm folds across so the hand rests on the chin */
@keyframes avatar-think-shoulder-r {
  0%, 100% { transform: rotate(0deg); }
  16% { transform: rotate(48deg); }
  28%, 70% { transform: rotate(105deg); }
  84% { transform: rotate(42deg); }
}

@keyframes avatar-think-elbow-r {
  0%, 100% { transform: rotate(0deg); }
  16% { transform: rotate(-12deg); }
  28%, 70% { transform: rotate(-25deg); }
  84% { transform: rotate(-10deg); }
}

@keyframes avatar-think-hand-r {
  0%, 100% { transform: rotate(0deg); }
  16% { transform: rotate(-90deg); }
  28%, 70% { transform: rotate(-190deg); }
  84% { transform: rotate(-80deg); }
}

@keyframes avatar-think-head {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  22%, 68% { transform: translate(3px, 3px) rotate(7deg); }
  84% { transform: translate(1px, 1px) rotate(2deg); }
}

@keyframes avatar-think-body {
  0%, 100% { transform: translateY(0); }
  28%, 70% { transform: translateY(-3px); }
}

@keyframes avatar-think-typehide {
  0%, 8% { opacity: 1; }
  12%, 86% { opacity: 0; }
  92%, 100% { opacity: 1; }
}

/* tired: arms lift + stretch out, head tips back, lids close (yawn) */
@keyframes avatar-tired-shoulder-l {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  20% { transform: translateY(-12px) rotate(8deg); }
  40%, 62% { transform: translateY(-28px) rotate(16deg); }
  80% { transform: translateY(-10px) rotate(6deg); }
}

@keyframes avatar-tired-shoulder-r {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  20% { transform: translateY(-12px) rotate(-8deg); }
  40%, 62% { transform: translateY(-28px) rotate(-16deg); }
  80% { transform: translateY(-10px) rotate(-6deg); }
}

@keyframes avatar-tired-elbow-l {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-70deg); }
  40%, 62% { transform: rotate(-150deg); }
  80% { transform: rotate(-60deg); }
}

@keyframes avatar-tired-elbow-r {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(70deg); }
  40%, 62% { transform: rotate(150deg); }
  80% { transform: rotate(60deg); }
}

@keyframes avatar-tired-hand-l {
  0%, 100% { transform: rotate(0deg); }
  40%, 62% { transform: rotate(28deg); }
  80% { transform: rotate(10deg); }
}

@keyframes avatar-tired-hand-r {
  0%, 100% { transform: rotate(0deg); }
  40%, 62% { transform: rotate(-28deg); }
  80% { transform: rotate(-10deg); }
}

@keyframes avatar-tired-body {
  0%, 100% { transform: translateY(0); }
  30%, 58% { transform: translateY(-16px); }
  78% { transform: translateY(-5px); }
}

@keyframes avatar-tired-head {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-8px) rotate(-8deg); }
  45%, 60% { transform: translateY(-16px) rotate(-14deg); }
  78% { transform: translateY(-4px) rotate(-4deg); }
}

@keyframes avatar-tired-lids {
  0%, 18% { opacity: 0; }
  28%, 64% { opacity: 1; }
  78%, 100% { opacity: 0; }
}

@keyframes avatar-tired-typehide {
  0%, 8% { opacity: 1; }
  12%, 86% { opacity: 0; }
  92%, 100% { opacity: 1; }
}

@keyframes avatar-lang-head {
  0%, 100% { transform: rotate(0deg); }
  28% { transform: rotate(-9deg); }
  55% { transform: rotate(6deg); }
  78% { transform: rotate(-2deg); }
}

@keyframes avatar-lang-lids {
  0%, 18% { opacity: 0; }
  28%, 42% { opacity: 1; }
  52%, 62% { opacity: 0; }
  70%, 80% { opacity: 1; }
  90%, 100% { opacity: 0; }
}

@keyframes avatar-lamp-flicker {
  0%, 100% { filter: brightness(1); }
  8% { filter: brightness(1.45); }
  18% { filter: brightness(0.25); }
  28% { filter: brightness(1.35); }
  40% { filter: brightness(0.3); }
  52% { filter: brightness(1.25); }
  66% { filter: brightness(0.2); }
  78% { filter: brightness(1.15); }
}

@keyframes avatar-lamp-flicker-glow {
  0%, 100% { opacity: 0.55; }
  8% { opacity: 0.95; }
  18% { opacity: 0.2; }
  28% { opacity: 0.9; }
  40% { opacity: 0.25; }
  52% { opacity: 0.85; }
  66% { opacity: 0.15; }
  78% { opacity: 0.7; }
}

/* peel-off + fly-away: the note lifts on its tape, tears loose, spins away */
@keyframes avatar-sticky-fly {
  0% { transform: rotate(0deg) translate(0, 0); opacity: 1; }
  14% { transform: rotate(-5deg) translate(0, -3px); opacity: 1; }
  26% { transform: rotate(9deg) translate(6px, -8px); opacity: 1; }
  40% { transform: rotate(-4deg) translate(14px, -26px); opacity: 1; }
  64% { transform: rotate(-22deg) translate(96px, -150px); opacity: 0.9; }
  100% { transform: rotate(-52deg) translate(300px, -420px); opacity: 0; }
}

@keyframes avatar-sticky-curl {
  0% { opacity: 0; }
  12%, 24% { opacity: 1; }
  32%, 100% { opacity: 0; }
}

/* steam: long travel up to the top edge of the monitor, narrowing and
   fading out so the loop is seamless */
@keyframes avatar-steam {
  0% { transform: translateY(4px) scale(1, 1); opacity: 0; }
  10% { transform: translateY(-8px) scale(1, 1); opacity: 0.8; }
  40% { transform: translateY(-46px) scale(0.82, 0.92); opacity: 0.62; }
  70% { transform: translateY(-82px) scale(0.58, 0.78); opacity: 0.38; }
  92% { transform: translateY(-106px) scale(0.36, 0.64); opacity: 0.12; }
  100% { transform: translateY(-116px) scale(0.3, 0.6); opacity: 0; }
}

@keyframes avatar-glow {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.7; }
}

@keyframes avatar-fx-scan {
  0% { transform: translateY(0); }
  100% { transform: translateY(16px); }
}

@keyframes avatar-fx-slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(2px); }
}

@keyframes avatar-fx-bar {
  0% { transform: scaleY(0.1); }
  100% { transform: scaleY(1); }
}

@keyframes avatar-fx-draw {
  0% { stroke-dashoffset: 26; }
  100% { stroke-dashoffset: 0; }
}

@keyframes avatar-fx-bob {
  0% { transform: translateY(0); }
  100% { transform: translateY(3px); }
}

@keyframes avatar-spark {
  0%, 100% { opacity: 0; }
  34% { opacity: 1; }
  67% { opacity: 0.55; }
}

/* the crest rows are 400 wide with a 64-unit tile, so one tile of travel loops seamlessly */
@keyframes avatar-wave-right {
  from { transform: translateX(0); }
  to { transform: translateX(64px); }
}

@keyframes avatar-wave-left {
  from { transform: translateX(0); }
  to { transform: translateX(-64px); }
}

@keyframes avatar-sea-bob {
  from { transform: translateY(0); }
  to { transform: translateY(2px); }
}

@keyframes avatar-surf {
  0% { transform: translateY(5px); opacity: 0; }
  22% { transform: translateY(-2px); opacity: 0.85; }
  46% { transform: translateY(-4px); opacity: 0.7; }
  78% { transform: translateY(2px); opacity: 0.25; }
  100% { transform: translateY(5px); opacity: 0; }
}

@keyframes avatar-moonrow {
  from { transform: translateX(-3px); }
  to { transform: translateX(3px); }
}

@keyframes avatar-bubble-a {
  0% { transform: translate(0, 0); opacity: 0; }
  14% { opacity: 0.9; }
  82% { opacity: 0.6; }
  100% { transform: translate(-3px, -22px); opacity: 0; }
}

@keyframes avatar-fw-trail {
  0% { transform: translateY(54px) scaleY(0.3); opacity: 0; }
  8% { opacity: 1; }
  24% { transform: translateY(8px) scaleY(1); opacity: 1; }
  30%, 100% { transform: translateY(0) scaleY(0.3); opacity: 0; }
}

@keyframes avatar-fw-burst {
  0%, 26% { transform: scale(0.1); opacity: 0; }
  32% { transform: scale(0.45); opacity: 1; }
  58% { transform: scale(1); opacity: 1; }
  80% { transform: scale(1.14); opacity: 0.7; }
  100% { transform: scale(1.3); opacity: 0; }
}

@keyframes avatar-confetti-a {
  0% { transform: translate(0, -30px) rotate(0deg); opacity: 0; }
  8% { opacity: 1; }
  82% { opacity: 1; }
  100% { transform: translate(-26px, 480px) rotate(320deg); opacity: 0; }
}

@keyframes avatar-confetti-b {
  0% { transform: translate(0, -30px) rotate(0deg); opacity: 0; }
  8% { opacity: 1; }
  82% { opacity: 1; }
  100% { transform: translate(30px, 480px) rotate(-280deg); opacity: 0; }
}

@keyframes avatar-horn-in-l {
  0% { transform: translateX(-18px); opacity: 0; }
  10%, 86% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(-18px); opacity: 0; }
}

@keyframes avatar-horn-in-r {
  0% { transform: translateX(18px); opacity: 0; }
  10%, 86% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(18px); opacity: 0; }
}

/* the paper tube unrolls, snaps back, unrolls again */
@keyframes avatar-horn {
  0%, 8% { transform: scaleX(0.04); }
  22% { transform: scaleX(1); }
  38% { transform: scaleX(0.1); }
  54% { transform: scaleX(1); }
  70% { transform: scaleX(0.12); }
  84% { transform: scaleX(0.92); }
  100% { transform: scaleX(0.04); }
}

@keyframes avatar-bubble-b {
  0% { transform: translate(0, 0); opacity: 0; }
  18% { opacity: 0.85; }
  80% { opacity: 0.55; }
  100% { transform: translate(4px, -24px); opacity: 0; }
}

/* -148 from y≈346 tops out at y≈198, the same ceiling the steam reaches */
@keyframes avatar-fizz-a {
  0% { transform: translate(0, 6px); opacity: 0; }
  12% { opacity: 0.9; }
  45% { transform: translate(-3px, -58px); opacity: 0.7; }
  75% { transform: translate(2px, -108px); opacity: 0.4; }
  100% { transform: translate(-2px, -148px); opacity: 0; }
}

@keyframes avatar-fizz-b {
  0% { transform: translate(0, 6px); opacity: 0; }
  14% { opacity: 0.85; }
  45% { transform: translate(4px, -60px); opacity: 0.65; }
  75% { transform: translate(-3px, -110px); opacity: 0.35; }
  100% { transform: translate(3px, -148px); opacity: 0; }
}

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

/* sidebar placement on the live CV page */
.aside .avatar {
  margin-top: auto;
  margin-bottom: 0;
  width: 100%;
  max-width: min(100%, 16rem);
}

.aside .avatar__stage {
  width: 100%;
}

@media (max-width: 980px) {
  .aside .avatar {
    display: none;
  }
}