/* Bytey the mascot: animation for the inline SVG figure from js/bytey.js */
.bytey-fig { display: block; overflow: visible; }
.bytey-wrap > .bytey-fig { width: 100%; height: auto; }
.bytey-fig .figure { animation: by-bob 3.2s ease-in-out infinite; transform-origin: 60px 126px; }
.bytey-fig .shadow { transform-origin: 60px 128px; animation: by-shadow 3.2s ease-in-out infinite; }
.bytey-fig .face .eye { transform-box: fill-box; transform-origin: center; animation: by-blink 5.2s infinite; }
.bytey-fig .antenna { transform-origin: 60px 24px; animation: by-wobble 2.6s ease-in-out infinite; }
.bytey-fig .bulb { animation: by-glow 1.6s ease-in-out infinite; }
.bytey-fig .pulse { animation: by-beat 1.4s ease-in-out infinite; }
.bytey-fig .spark path { transform-box: fill-box; transform-origin: center; animation: by-twinkle 1s ease-in-out infinite; }
.bytey-fig .spark path:nth-child(2n) { animation-delay: .35s; }
.bytey-fig .zzz { animation: by-zzz 2.4s ease-in-out infinite; }
.bytey-fig .drop { animation: by-drop 1.6s ease-in infinite; }
.bytey-fig .breath { transform-box: fill-box; transform-origin: center; animation: by-breath 2.8s ease-in-out infinite; }
.bytey-fig.pose-sleep .figure, .bytey-fig.pose-sleep .antenna { animation-duration: 6s; }
.bytey-fig.pose-worry .figure { animation: by-shiver .5s linear infinite; }

/* one-off reaction when the pose changes */
.bytey-fig.react .figure { animation: by-hop .6s cubic-bezier(.3, 1.6, .5, 1) 1, by-bob 3.2s ease-in-out .6s infinite; }
.bytey-fig.react.pose-cheer .figure { animation: by-jump .8s cubic-bezier(.3, 1.4, .5, 1) 1, by-bob 3.2s ease-in-out .8s infinite; }
.bytey-fig.react.pose-worry .figure { animation: by-shake .5s linear 1, by-shiver .5s linear .5s infinite; }
.bytey-fig.react.pose-oops .figure { animation: by-tilt .6s ease-out 1, by-bob 3.2s ease-in-out .6s infinite; }

@keyframes by-bob { 50% { transform: translateY(-3px); } }
@keyframes by-shadow { 50% { transform: scaleX(.92); opacity: .75; } }
@keyframes by-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.12); } }
@keyframes by-wobble { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes by-glow { 50% { opacity: .55; } }
@keyframes by-beat { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes by-twinkle { 50% { transform: scale(.55) rotate(25deg); opacity: .6; } }
@keyframes by-zzz { 0% { transform: translateY(6px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(-8px); opacity: 0; } }
@keyframes by-drop { 0% { transform: translateY(-3px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }
@keyframes by-breath { 50% { transform: scale(1.35); } }
@keyframes by-shiver { 25% { transform: translateX(-.8px); } 75% { transform: translateX(.8px); } }
@keyframes by-hop { 0% { transform: translateY(0) scale(1.08, .9); } 50% { transform: translateY(-9px) scale(.96, 1.06); } 100% { transform: none; } }
@keyframes by-jump { 0% { transform: scale(1.12, .84); } 35% { transform: translateY(-18px) scale(.94, 1.1); } 65% { transform: translateY(-4px); } 100% { transform: none; } }
@keyframes by-shake { 20% { transform: translateX(-6px) rotate(-3deg); } 40% { transform: translateX(6px) rotate(3deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes by-tilt { 30% { transform: rotate(-9deg); } 60% { transform: rotate(5deg); } 100% { transform: none; } }

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