/* Generated by scripts/site-mascots.mjs from src/index.css: do not edit by hand. */
/* Mascot (components/mascot/Mascot.tsx). Two nested groups so transforms do not fight:
   .mascot__pose carries the mood (sway, droop, shake, glance), .mascot__body breathes and hops.
   Horns, arms, tongue, tear and the z's have their own small moves. All keyed on data-mood. */
.mascot__pose,
.mascot__body {
  transform-origin: 512px 880px;
  transform-box: view-box;
}
.mascot__body {
  animation:
    mascot-hop 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    mascot-breathe 3.2s ease-in-out 0.55s infinite;
}
.mascot__mouth {
  opacity: 0;
  transition: opacity 0.18s ease;
}
.mascot__mouth[data-on] {
  opacity: 1;
}
.mascot__mouth--chew-a,
.mascot__mouth--chew-b {
  transition: none;
  animation: mascot-chew 0.9s steps(1) infinite;
}
.mascot__mouth--chew-b {
  animation-delay: -0.45s;
}
.mascot__horn,
.mascot__arm,
.mascot__tongue,
.mascot__tear,
.mascot__z {
  transform-box: view-box;
}
.mascot__horn--l {
  transform-origin: 360px 262px;
}
.mascot__horn--r {
  transform-origin: 664px 262px;
}
.mascot__arm--l {
  transform-origin: 262px 600px;
}
.mascot__arm--r {
  transform-origin: 762px 600px;
}
.mascot__tongue {
  transform-origin: 512px 640px;
}
/* normal: every so often a glance to one side, and the horns twitch */
.mascot[data-mood="normal"] .mascot__pose {
  animation: mascot-glance 9s ease-in-out infinite;
}
.mascot[data-mood="normal"] .mascot__horn--r {
  animation: mascot-twitch 9s ease-in-out 4.5s infinite;
}
/* happy: arms up and waving, the tongue wags */
.mascot[data-mood="happy"] .mascot__arm--l {
  animation: mascot-wave-l 0.7s ease-in-out infinite;
}
.mascot[data-mood="happy"] .mascot__arm--r {
  animation: mascot-wave-r 0.7s ease-in-out 0.1s infinite;
}
.mascot[data-mood="happy"] .mascot__tongue {
  animation: mascot-tongue 0.45s ease-in-out infinite;
}
.mascot[data-mood="happy"] .mascot__horn {
  animation: mascot-perk 0.7s ease-in-out infinite;
}
/* working: sways with the effort, arms rub together */
.mascot[data-mood="working"] .mascot__pose {
  animation: mascot-sway 1.8s ease-in-out infinite;
}
.mascot[data-mood="working"] .mascot__arm--l {
  animation: mascot-rub-l 0.9s ease-in-out infinite;
}
.mascot[data-mood="working"] .mascot__arm--r {
  animation: mascot-rub-r 0.9s ease-in-out infinite;
}
/* sad: droops, horns down, a tear rolls */
.mascot[data-mood="sad"] .mascot__pose {
  animation: mascot-droop 0.6s ease-out forwards;
}
.mascot[data-mood="sad"] .mascot__horn {
  animation: mascot-horns-down 0.6s ease-out forwards;
}
.mascot[data-mood="sad"] .mascot__tear {
  animation: mascot-tear 1.6s ease-in infinite;
}
/* surprised: a quick shake, horns straight up */
.mascot[data-mood="surprised"] .mascot__pose {
  animation: mascot-shake 0.5s ease-in-out;
}
.mascot[data-mood="surprised"] .mascot__horn {
  animation: mascot-perk 0.5s ease-out forwards;
}
/* sleepy: slow breathing, horns down, z's drift up */
.mascot[data-mood="sleepy"] .mascot__body {
  animation: mascot-breathe 5.2s ease-in-out infinite;
}
.mascot[data-mood="sleepy"] .mascot__pose {
  animation: mascot-nod 5.2s ease-in-out infinite;
}
.mascot[data-mood="sleepy"] .mascot__horn {
  animation: mascot-horns-down 0.8s ease-out forwards;
}
.mascot__z {
  opacity: 0;
  animation: mascot-zzz 2.4s ease-out infinite;
}
.mascot__z:nth-child(2) {
  animation-delay: 0.8s;
}
.mascot__z:nth-child(3) {
  animation-delay: 1.6s;
}
/* hungry (notch drop): the mouth stretches wide, leaning in with arms up, trembling for it */
.mascot[data-mood="hungry"] .mascot__mouth[data-on] {
  transform-box: view-box;
  transform-origin: 512px 400px;
  animation: mascot-gape 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.mascot[data-mood="hungry"] .mascot__pose {
  animation: mascot-crave 0.32s ease-in-out infinite;
}
.mascot[data-mood="hungry"] .mascot__arm--l {
  animation: mascot-wave-l 0.35s ease-in-out infinite;
}
.mascot[data-mood="hungry"] .mascot__arm--r {
  animation: mascot-wave-r 0.35s ease-in-out 0.05s infinite;
}
.mascot[data-mood="hungry"] .mascot__tongue {
  animation: mascot-tongue 0.3s ease-in-out infinite;
}
.mascot[data-mood="hungry"] .mascot__horn {
  animation: mascot-perk 0.35s ease-in-out infinite;
}
/* eating: chomp chomp, a gulp bulges the body */
.mascot[data-mood="eating"] .mascot__mouth--chew-a,
.mascot[data-mood="eating"] .mascot__mouth--chew-b {
  animation-duration: 0.3s;
}
.mascot[data-mood="eating"] .mascot__mouth--chew-b {
  animation-delay: -0.15s;
}
.mascot[data-mood="eating"] .mascot__pose {
  animation: mascot-gulp 0.6s ease-in-out infinite;
}
.mascot[data-mood="eating"] .mascot__arm--l {
  animation: mascot-rub-l 0.3s ease-in-out infinite;
}
.mascot[data-mood="eating"] .mascot__arm--r {
  animation: mascot-rub-r 0.3s ease-in-out infinite;
}
@keyframes mascot-gape {
  from {
    transform: none;
  }
  to {
    transform: scale(1.12, 1.4);
  }
}
@keyframes mascot-crave {
  0%,
  100% {
    transform: rotate(-1.5deg) translateY(-6px) scale(1.03, 1.05);
  }
  50% {
    transform: rotate(1.5deg) translateY(-12px) scale(1.04, 1.06);
  }
}
@keyframes mascot-gulp {
  0%,
  100% {
    transform: scale(1, 1);
  }
  30% {
    transform: scale(1.08, 0.92);
  }
  60% {
    transform: scale(0.96, 1.05) translateY(-8px);
  }
}
/* a hover anywhere: a little wiggle (buttons that wrap the mascot pass it down) */
.mascot:hover .mascot__pose,
button:hover > .mascot .mascot__pose {
  animation: mascot-wiggle 0.6s ease-in-out;
}
@keyframes mascot-breathe {
  0%,
  100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.015, 0.985);
  }
}
@keyframes mascot-hop {
  0% {
    transform: scale(1.06, 0.92);
  }
  40% {
    transform: translateY(-28px) scale(0.97, 1.04);
  }
  100% {
    transform: none;
  }
}
@keyframes mascot-chew {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}
@keyframes mascot-glance {
  0%,
  30%,
  52%,
  100% {
    transform: rotate(0deg);
  }
  36% {
    transform: rotate(3.5deg) translateX(10px);
  }
  46% {
    transform: rotate(-3deg) translateX(-8px);
  }
}
@keyframes mascot-twitch {
  0%,
  90%,
  100% {
    transform: rotate(0deg);
  }
  93% {
    transform: rotate(-12deg);
  }
  96% {
    transform: rotate(8deg);
  }
}
@keyframes mascot-sway {
  0%,
  100% {
    transform: rotate(-2.5deg);
  }
  50% {
    transform: rotate(2.5deg);
  }
}
@keyframes mascot-rub-l {
  0%,
  100% {
    transform: rotate(0deg) translateX(0);
  }
  50% {
    transform: rotate(-10deg) translateX(14px);
  }
}
@keyframes mascot-rub-r {
  0%,
  100% {
    transform: rotate(0deg) translateX(0);
  }
  50% {
    transform: rotate(10deg) translateX(-14px);
  }
}
@keyframes mascot-wave-l {
  0%,
  100% {
    transform: rotate(-35deg);
  }
  50% {
    transform: rotate(-55deg);
  }
}
@keyframes mascot-wave-r {
  0%,
  100% {
    transform: rotate(35deg);
  }
  50% {
    transform: rotate(55deg);
  }
}
@keyframes mascot-tongue {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.12) translateY(-6px);
  }
}
@keyframes mascot-perk {
  0%,
  100% {
    transform: translateY(0) scaleY(1);
  }
  50% {
    transform: translateY(-16px) scaleY(1.08);
  }
}
@keyframes mascot-horns-down {
  to {
    transform: translateY(14px) scaleY(0.9);
  }
}
@keyframes mascot-droop {
  to {
    transform: translateY(18px) scale(1.03, 0.95);
  }
}
@keyframes mascot-tear {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    transform: translateY(190px);
    opacity: 0;
  }
}
@keyframes mascot-shake {
  0%,
  100% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-5deg) translateX(-12px);
  }
  40% {
    transform: rotate(5deg) translateX(12px);
  }
  60% {
    transform: rotate(-3deg) translateX(-6px);
  }
  80% {
    transform: rotate(3deg) translateX(6px);
  }
}
@keyframes mascot-nod {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(4deg) translateY(10px);
  }
}
@keyframes mascot-zzz {
  0% {
    opacity: 0;
    transform: translate(0, 20px) scale(0.8);
  }
  25% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate(30px, -90px) scale(1.15);
  }
}
@keyframes mascot-wiggle {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-4deg);
  }
  75% {
    transform: rotate(4deg);
  }
}

/* Site extras: the z's only while sleepy (the inline hero carries them for every mood). */
.mascot:not([data-mood="sleepy"]) .mascot__zzz { display: none; }
@media (prefers-reduced-motion: reduce) {
  .mascot *, .mascot { animation: none !important; transition: none !important; }
}