/* The capybara: moods and idle animations. Mood classes sit on .capy:
   .mood-idle (default) / .mood-sleepy / .mood-happy ; .hop plays the happy bounce. */
.capy { position: relative; display: block; }
.capy-svg { display: block; width: 100%; height: auto; overflow: visible; }
.capy-svg * { transform-box: fill-box; }

/* eyes: only one set shows at a time */
.capy .eyes { display: none; }
.capy.mood-idle .eyes-open,
.capy.mood-happy .eyes-happy,
.capy.mood-sleepy .eyes-sleepy { display: inline; }
.capy .zzz { display: none; }
.capy.mood-sleepy .zzz { display: inline; }

/* breathing */
.capy-all { transform-box: view-box; transform-origin: 120px 204px; animation: breathe 4.2s ease-in-out infinite; }
.mood-sleepy .capy-all { animation-duration: 6.5s; }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, 1.028); } }

/* blinking */
.eyes-open { transform-origin: center; animation: blink 5.2s infinite; }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }

/* ear wiggles, a bit apart from each other */
.ear { transform-origin: 50% 85%; animation: wiggle 7s ease-in-out infinite; }
.ear-r { animation-delay: 1.6s; animation-duration: 8.3s; }
@keyframes wiggle { 0%, 84%, 100% { transform: rotate(0); } 88% { transform: rotate(-13deg); } 92% { transform: rotate(9deg); } 96% { transform: rotate(-4deg); } }

/* head: gentle sway, droopy when sleepy */
.head-anim { transform-origin: 120px 146px; transform-box: view-box; animation: nod 6s ease-in-out infinite; }
@keyframes nod { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(1.4deg); } }
.mood-sleepy .head-anim { transform: translateY(4px) rotate(2.5deg); animation: none; }

/* accessories */
.sway { animation: sway 3.6s ease-in-out infinite; }
.sway2 { animation: sway 4.4s ease-in-out infinite reverse; transform-origin: center; }
@keyframes sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
.bob { animation: bob 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-1.5px) rotate(2deg); } }
.sparkle { transform-origin: center; animation: twinkle 2.4s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { transform: scale(.4) rotate(0); opacity: .35; } 50% { transform: scale(1.1) rotate(25deg); opacity: 1; } }

/* z z Z drifting up while sleeping */
.zzz text { animation: zfloat 3.6s ease-in-out infinite; opacity: 0; transform-box: fill-box; }
.zzz .z2 { animation-delay: 1.1s; } .zzz .z3 { animation-delay: 2.2s; }
@keyframes zfloat { 0% { opacity: 0; transform: translate(-6px, 8px) scale(.7); } 25% { opacity: 1; } 80% { opacity: .9; } 100% { opacity: 0; transform: translate(6px, -10px) scale(1.1); } }

/* happy bounce: squash, jump, land */
.capy.hop .capy-all { animation: hop .95s cubic-bezier(.3, .7, .4, 1) 1; }
@keyframes hop {
  0%   { transform: scale(1, 1) translateY(0); }
  14%  { transform: scale(1.09, .88) translateY(0); }
  38%  { transform: scale(.94, 1.08) translateY(-30px); }
  62%  { transform: scale(1.04, .95) translateY(0); }
  76%  { transform: scale(.98, 1.03) translateY(-9px); }
  100% { transform: scale(1, 1) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .capy *, .capy-all { animation: none !important; }
  .capy.mood-sleepy .zzz text { opacity: 1; }
}