.page-body {
  position: relative;
}

.bee-heads-container {
  position: fixed;
  right: -180px;
  top: 15%;
  transform: translateY(-50%);
  width: 600px;
  pointer-events: none;
  z-index: 1;
}

.bee-head {
  position: absolute;
  display: block;
  height: auto;
  pointer-events: auto;
  transform: rotate(var(--base-rotation, 0deg)) scale(var(--hover-scale, 1));
  transition: transform 0.3s ease;
  will-change: transform;
}

/* Hover scale is applied through a CSS variable rather than a plain
   `transform` override — the float animation below also controls
   `transform`, and a running animation always wins over a static hover
   rule on the same property. Routing the scale through --hover-scale and
   referencing it inside the keyframes lets both effects apply at once. */
.bee-head:hover {
  --hover-scale: 1.06;
}

@keyframes float-bee {
  0%   { transform: translateY(0px) rotate(var(--base-rotation, 0deg)) scale(var(--hover-scale, 1)); }
  50%  { transform: translateY(-8px) rotate(calc(var(--base-rotation, 0deg) + 2deg)) scale(var(--hover-scale, 1)); }
  100% { transform: translateY(0px) rotate(var(--base-rotation, 0deg)) scale(var(--hover-scale, 1)); }
}

@media (prefers-reduced-motion: no-preference) {
  .bee-head-1 { animation: float-bee 5.2s ease-in-out 0s infinite both; }
  .bee-head-2 { animation: float-bee 4.4s ease-in-out 0.8s infinite both; }
  .bee-head-3 { animation: float-bee 6.1s ease-in-out 1.5s infinite both; }
  .bee-head-4 { animation: float-bee 4.8s ease-in-out 2.2s infinite both; }
  .bee-head-5 { animation: float-bee 7.0s ease-in-out 0.4s infinite both; }
  .bee-head-6 { animation: float-bee 5.6s ease-in-out 1.9s infinite both; }
}

/* Bee heads are white line art — correct as-is in dark mode. In light mode,
   invert so they read as black line art on white. */
[data-theme="light"] .bee-head {
  filter: invert(1);
}

@media (max-width: 599px) {
  .bee-heads-container {
    display: none;
  }
}