/* Marvin, the paranoid android: gloomy teal-grey, sage accents, italic serif. */
body {
  --bg: linear-gradient(160deg, #1c2427, #0a0e10);
  --panel: #11181b;
  --line: #2a363b;
  --text: #d5dde0;
  --quote: #e9eef0;
  --muted: #6c7c82;
  --track: #1d272b;
  --stripe: #2a363b;
  --accent: #8fb3a8;
  --on-accent: #0a0e10;
  --ok: #8fb3a8;
  --warn: #c9a46a;
  --crit: #d9776a;
  --say-font: italic clamp(16px, 1.6vw, 19px) / 1.42 "Iowan Old Style", "Palatino Linotype", Georgia, serif;
}

/* Marvin's posture per mood: head droop, head sink, eyelid opening (0–1)
   and pace (animation slowness; sadder = slower). */
body { --droop: 5deg; --sink: 0px; --lid: 0.85; --pace: 1; }
.mood-unlimited { --droop: 0deg;   --lid: 1;    --pace: 0.8; }
.mood-thriving  { --droop: 2deg;   --lid: 0.95; --pace: 0.9; }
.mood-content   { --droop: 5deg;   --lid: 0.85; --pace: 1; }
.mood-anxious   { --droop: 9deg;   --sink: 4px;  --lid: 0.7;  --pace: 1.2; }
.mood-starving  { --droop: 14deg;  --sink: 8px;  --lid: 0.5;  --pace: 1.5; }
.mood-flatlined { --droop: 22deg;  --sink: 14px; --lid: 0.15; --pace: 2; }
.mood-asleep    { --droop: 12deg;  --sink: 6px;  --lid: 0.1;  --pace: 1.6; }
.mood-glitched  { --droop: -10deg; --lid: 1;    --pace: 0.7; }
.mood-booting   { --droop: 4deg;   --lid: 0.9;  --pace: 0.8; }

.marvin { display: block; width: 100%; overflow: visible; }
.marvin * { transform-box: view-box; }

/* Head: droops per mood, sighs and sways now and then. */
.marvin .head {
  transform-origin: 100px 160px;
  transform: translateY(var(--sink)) rotate(var(--droop));
  animation: sigh calc(8s * var(--pace)) ease-in-out infinite;
}

/* Breathing: the torso swells a little, the shadow follows. */
.marvin .torso {
  transform-origin: 100px 206px;
  animation: breathe calc(4s * var(--pace)) ease-in-out infinite;
}
.marvin .shadow {
  transform-origin: 100px 252px;
  animation: shadow calc(8s * var(--pace)) ease-in-out infinite;
}

/* Arms swing limply from the shoulders, slightly out of phase. */
.marvin .arm { animation: swing calc(5s * var(--pace)) ease-in-out infinite; }
.marvin .arm-left { transform-origin: 75px 170px; }
.marvin .arm-right { transform-origin: 125px 170px; animation-delay: calc(-2.1s * var(--pace)); }

/* Eyes: heavy lids, occasional blink and a weary glance aside. */
.marvin .gaze { animation: glance calc(11s * var(--pace)) ease-in-out infinite; }
.marvin .eyes {
  transform-box: fill-box;
  transform-origin: center;
  transform: scaleY(var(--lid));
  animation: blink 6s infinite;
}

/* Mood extras: hidden unless the mood calls for them. */
.marvin .cloud, .marvin .zzz, .marvin .spark { display: none; }

.mood-starving .marvin .cloud,
.mood-flatlined .marvin .cloud { display: inline; animation: hover 6s ease-in-out infinite; }
.marvin .drop { animation: rain 1.1s linear infinite; }
.marvin .drop:nth-child(2) { animation-delay: -0.4s; }
.marvin .drop:nth-child(3) { animation-delay: -0.75s; }

.mood-asleep .marvin .zzz { display: inline; }
.marvin .zzz text { opacity: 0; animation: snore 4.5s ease-out infinite; }
.marvin .zzz text:nth-child(2) { animation-delay: 1.5s; }
.marvin .zzz text:nth-child(3) { animation-delay: 3s; }

.mood-glitched .marvin .spark { display: inline; animation: spark 3s steps(1) infinite; }
.mood-glitched .marvin .head { animation: twitch 3s steps(1) infinite; }

.mood-flatlined .marvin { filter: grayscale(1) brightness(0.75); }
.mood-flatlined .marvin .cloud { filter: none; }

@keyframes sigh {
  0%, 60%, 100% { transform: translateY(var(--sink)) rotate(var(--droop)); }
  72% { transform: translateY(calc(var(--sink) + 5px)) rotate(calc(var(--droop) + 4deg)); }
  84% { transform: translateY(var(--sink)) rotate(calc(var(--droop) - 2deg)); }
}
@keyframes breathe { 50% { transform: scale(1.03, 1.04); } }
@keyframes shadow { 72% { transform: scaleX(1.06); } }
@keyframes swing {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
@keyframes glance {
  0%, 40%, 100% { transform: translateX(0); }
  46%, 58% { transform: translateX(-6px); }
  64%, 70% { transform: translateX(4px); }
}
@keyframes blink {
  0%, 93%, 100% { transform: scaleY(var(--lid)); }
  96% { transform: scaleY(0.05); }
}
@keyframes twitch {
  0%, 90%, 100% { transform: rotate(var(--droop)); }
  92% { transform: rotate(calc(var(--droop) + 8deg)); }
  95% { transform: rotate(calc(var(--droop) - 4deg)); }
}
@keyframes hover { 50% { transform: translate(4px, -3px); } }
@keyframes rain {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(26px); opacity: 0; }
}
@keyframes snore {
  0% { opacity: 0; transform: translate(0, 0); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(22px, -46px); }
}
@keyframes spark {
  0%, 88%, 100% { opacity: 0; }
  90%, 94% { opacity: 1; }
}