/* =========================================
   PÖRRIÄINEN – PERUSASETUKSET
   ========================================= */

.bee {
  position: absolute;
  left: 0;
  top: 0;

  /* 🔑 KOKO TÄÄLLÄ */
  width: 30px; /*clamp(48px, 6vw, 72px);*/
  height: auto;

  pointer-events: none;
  z-index: 5;

  /* animaatioystävällinen */
  will-change: transform;

  /* kevyt syvyys, ei varjoa liikaa */
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.08));
}

/* =========================================
   SIIVET – KOROSTETTU LIIKE
   ========================================= */

.bee .bee-wings {
  transform-box: fill-box;
  transform-origin: center;
}

.bee .bee-wing {
  transform-box: fill-box;
  transform-origin: 60% 60%;
}

/* Takimmainen siipi */
.bee .bee-wing-back {
  opacity: 0.9;
  animation: flap-back 140ms ease-in-out infinite alternate;
}

/* Etummainen siipi */
.bee .bee-wing-front {
  animation: flap-front 140ms ease-in-out infinite alternate;
}

/* 🔥 Selvästi isompi liike */
@keyframes flap-back {
  from {
    transform: rotate(-18deg) scaleX(0.9) scaleY(1.05);
  }
  to {
    transform: rotate(12deg) scaleX(1.05) scaleY(0.95);
  }
}

@keyframes flap-front {
  from {
    transform: rotate(18deg) scaleX(0.9) scaleY(1.05);
  }
  to {
    transform: rotate(-18deg) scaleX(1.1) scaleY(0.9);
  }
}

/* =========================================
   ACCESSIBILITY
   ========================================= */

/* Kunnioita reduced motion -asetusta */
@media (prefers-reduced-motion: reduce) {
  .bee,
  .bee * {
    animation: none !important;
    transition: none !important;
  }
}