.beelab-svg {
  width: 100%;
  max-width: var(--beelab-svg-width, 220px);
  margin: 0 auto;
  display: block;
}

.beelab-svg svg {
  display: block;
  width: 100%;
  height: auto;
}

.beelab-svg .gear {
  transform-box: fill-box;
  transform-origin: center;
}

.beelab-svg .gear.is-spinning[data-rotate="cw"] {
  animation: beelab-rotate-cw 5s linear infinite;
}

.beelab-svg .gear.is-spinning[data-rotate="ccw"] {
  animation: beelab-rotate-ccw 5s linear infinite;
}

@keyframes beelab-rotate-cw {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes beelab-rotate-ccw {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

.beelab-svg .svg-light.is-active {
  animation: beelab-flicker 3s infinite, beelab-pulse 4s ease-in-out infinite;
}

@keyframes beelab-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes beelab-pulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}


/* =========================
   BeeBot animation
   ========================= */

.beelab-svg .svg-beebot .beebot-shadow {
  transform-box: fill-box;
  transform-origin: center;
}

.beelab-svg .svg-beebot .beebot-core {
  transform-box: fill-box;
  transform-origin: center;
}

.beelab-svg .svg-beebot .beebot-wing-motion--right {
  transform-box: view-box;
  transform-origin: 204px 172px;
}

.beelab-svg .svg-beebot .beebot-wing-motion--left {
  transform-box: view-box;
  transform-origin: 74px 188px;
}

.beelab-svg .svg-beebot .beebot-antenna-motion--left {
  transform-box: view-box;
  transform-origin: 146px 68px;
}

.beelab-svg .svg-beebot .beebot-antenna-motion--right {
  transform-box: view-box;
  transform-origin: 182px 63px;
}

.beelab-svg .svg-beebot .beebot-arm-motion--left {
  transform-box: view-box;
  transform-origin: 95px 190px;
}

.beelab-svg .svg-beebot .beebot-arm-motion--right {
  transform-box: view-box;
  transform-origin: 225px 168px;
}

.beelab-svg .svg-beebot .beebot-eye-blink,
.beelab-svg .svg-beebot .beebot-claw {
  transform-box: fill-box;
  transform-origin: center;
}

 

.beelab-svg.beebot-ready .svg-beebot .beebot-wing-motion--right {
  animation: beebot-wing-right 2.4s ease-in-out infinite;
}

.beelab-svg.beebot-ready .svg-beebot .beebot-wing-motion--left {
  animation: beebot-wing-left 2.4s ease-in-out infinite;
}

.beelab-svg.beebot-ready .svg-beebot .beebot-antenna-motion--left {
  animation: beebot-antenna-left 3.1s ease-in-out infinite;
}

.beelab-svg.beebot-ready .svg-beebot .beebot-antenna-motion--right {
  animation: beebot-antenna-right 3.1s ease-in-out infinite;
}

.beelab-svg.beebot-ready .svg-beebot .beebot-eye-blink--left,
.beelab-svg.beebot-ready .svg-beebot .beebot-eye-blink--right {
  animation: beebot-blink 5.6s linear infinite;
}

.beelab-svg.beebot-ready .svg-beebot .beebot-arm-motion--left {
  animation: beebot-arm-left 3.8s ease-in-out infinite;
}

.beelab-svg.beebot-ready .svg-beebot .beebot-arm-motion--right {
  animation: beebot-arm-right 3.8s ease-in-out infinite;
}

/* optional: tiny claw turn, reusing the same rotation idea as gears,
   but with a very small angle instead of full spinning */
.beelab-svg.beebot-ready .svg-beebot .beebot-claw--left {
  animation: beebot-claw-left 3.2s ease-in-out infinite;
}

.beelab-svg.beebot-ready .svg-beebot .beebot-claw--right {
  animation: beebot-claw-right 3.2s ease-in-out infinite;
}

 .beelab-svg .svg-beebot .beebot-wing-motion--right {
  transform-box: view-box;
  transform-origin: 204px 172px;
}

.beelab-svg .svg-beebot .beebot-wing-motion--left {
  transform-box: view-box;
  transform-origin: 74px 188px;
}

.beelab-svg .svg-beebot .beebot-antenna-motion--left {
  transform-box: view-box;
  transform-origin: 146px 68px;
}

.beelab-svg .svg-beebot .beebot-antenna-motion--right {
  transform-box: view-box;
  transform-origin: 182px 63px;
}

.beelab-svg .svg-beebot .beebot-arm-motion--left {
  transform-box: view-box;
  transform-origin: 95px 190px;
}

.beelab-svg .svg-beebot .beebot-arm-motion--right {
  transform-box: view-box;
  transform-origin: 225px 168px;
}

.beelab-svg .svg-beebot .beebot-eye-blink,
.beelab-svg .svg-beebot .beebot-claw {
  transform-box: fill-box;
  transform-origin: center;
}

.beelab-svg.beebot-ready .svg-beebot .beebot-wing-motion--right {
  animation: beebot-wing-right 2.4s ease-in-out infinite;
}

.beelab-svg.beebot-ready .svg-beebot .beebot-wing-motion--left {
  animation: beebot-wing-left 2.4s ease-in-out infinite;
}

.beelab-svg.beebot-ready .svg-beebot .beebot-antenna-motion--left {
  animation: beebot-antenna-left 3.1s ease-in-out infinite;
}

.beelab-svg.beebot-ready .svg-beebot .beebot-antenna-motion--right {
  animation: beebot-antenna-right 3.1s ease-in-out infinite;
}

.beelab-svg.beebot-ready .svg-beebot .beebot-eye-blink--left,
.beelab-svg.beebot-ready .svg-beebot .beebot-eye-blink--right {
  animation: beebot-blink 5.6s linear infinite;
}

.beelab-svg.beebot-ready .svg-beebot .beebot-arm-motion--left {
  animation: beebot-arm-left 3.8s ease-in-out infinite;
}

.beelab-svg.beebot-ready .svg-beebot .beebot-arm-motion--right {
  animation: beebot-arm-right 3.8s ease-in-out infinite;
}

.beelab-svg.beebot-ready .svg-beebot .beebot-claw--left {
  animation: beebot-claw-left 3.2s ease-in-out infinite;
}

.beelab-svg.beebot-ready .svg-beebot .beebot-claw--right {
  animation: beebot-claw-right 3.2s ease-in-out infinite;
}

@keyframes beebot-wing-right {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-7deg); }
  75% { transform: rotate(-5deg); }
}

@keyframes beebot-wing-left {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(9deg); }
  75% { transform: rotate(6deg); }
}

@keyframes beebot-antenna-left {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(2deg); }
}

@keyframes beebot-antenna-right {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(4deg); }
  75% { transform: rotate(-2deg); }
}

@keyframes beebot-blink {
  0%, 76%, 83%, 100% { transform: scaleY(1); }
  79% { transform: scaleY(0.14); }
}

@keyframes beebot-arm-left {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(8deg); }
  60% { transform: rotate(3deg); }
}

@keyframes beebot-arm-right {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-6deg); }
  60% { transform: rotate(-3deg); }
}

@keyframes beebot-claw-left {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-8deg); }
}

@keyframes beebot-claw-right {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(8deg); }
}

@media (prefers-reduced-motion: reduce) {
  .beelab-svg.beebot-ready .svg-beebot .beebot-wing-motion--right,
  .beelab-svg.beebot-ready .svg-beebot .beebot-wing-motion--left,
  .beelab-svg.beebot-ready .svg-beebot .beebot-antenna-motion--left,
  .beelab-svg.beebot-ready .svg-beebot .beebot-antenna-motion--right,
  .beelab-svg.beebot-ready .svg-beebot .beebot-eye-blink,
  .beelab-svg.beebot-ready .svg-beebot .beebot-arm-motion--left,
  .beelab-svg.beebot-ready .svg-beebot .beebot-arm-motion--right,
  .beelab-svg.beebot-ready .svg-beebot .beebot-claw {
    animation: none !important;
  }
}