/* Sad Bee — the play button's mascot rig. Pure decoration layered under
 * .play-button in styles.css; every state change is driven by .app-shell
 * classes (is-playing / is-loading). Split out of styles.css so the layout
 * rules there stay greppable. */
/* ------------------------------- Sad Bee -------------------------------- */
/* Two poses — airborne (playing/loading) and asleep on the pillow (paused /
 * idle) — with every property transitioned so the bee visibly lands, folds
 * its wings, pulls on a nightcap, and nods off rather than snapping.
 * Idle micro-animations (blink, breathe, kick, sway, twitch) are delayed past
 * the pose transitions so the two never fight over the same transform. */

.bee-svg {
  height: 54px;
  overflow: visible;
  width: 54px;
}

/* --- the whole figure: lands on the pillow / lifts off ------------------- */
/* Pose (transitioned) lives on .bee-figure; the idle loops live on .bee-rig.
 * They must not share an element: declaring an animation on a property
 * suppresses transitions on it, which made the pose snap. */

.bee-figure {
  transform: translateY(1.5px);
  transition: transform 700ms cubic-bezier(0.34, 1.3, 0.64, 1);
}

.app-shell.is-playing .bee-figure,
.app-shell.is-loading .bee-figure {
  transform: translateY(-2.5px);
}

/* Loops start and end at identity, delayed past the pose transition, so the
 * handoff is seamless in both directions. */
.bee-rig {
  transform-box: view-box;
}

/* Airborne: bob with a little tilt, like it is treading air. */
.app-shell.is-playing .bee-rig {
  animation: bee-hover 2s ease-in-out 750ms infinite;
  transform-origin: 32px 37px;
}

@keyframes bee-hover {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-3px) rotate(-1.7deg);
  }
}

/* Asleep: slow breathing, swelling gently from the base. */
.app-shell:not(.is-playing):not(.is-loading) .bee-rig {
  animation: bee-breathe 3.6s ease-in-out 900ms infinite;
  transform-origin: 32px 47.5px;
}

@keyframes bee-breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.012, 1.04);
  }
}

/* --- wings: folded asleep, raised in the air, flapping in counterphase --- */
/* Same split: .bee-wing holds the transitioned fold/raise pose, the inner
 * .bee-wing-rig holds the flap/twitch loops. Pivots sit at the wing bases. */

.bee-wing,
.bee-wing-rig {
  transform-box: view-box;
}

.bee-wing-back,
.bee-wing-back .bee-wing-rig {
  transform-origin: 24.5px 27.8px;
}

.bee-wing-front,
.bee-wing-front .bee-wing-rig {
  transform-origin: 30.5px 27.3px;
}

.bee-wing {
  transition: transform 600ms cubic-bezier(0.34, 1.4, 0.64, 1);
}

.bee-wing-back {
  transform: rotate(-74deg);
}

.bee-wing-front {
  transform: rotate(-62deg);
}

.app-shell.is-playing .bee-wing-back,
.app-shell.is-loading .bee-wing-back {
  transform: rotate(-16deg);
}

.app-shell.is-playing .bee-wing-front,
.app-shell.is-loading .bee-wing-front {
  transform: rotate(-6deg);
}

.app-shell.is-playing .bee-wing-back .bee-wing-rig {
  animation: bee-flap-back 460ms ease-in-out -230ms infinite;
}

.app-shell.is-playing .bee-wing-front .bee-wing-rig {
  animation: bee-flap-front 460ms ease-in-out infinite;
}

/* Warming up: a slow, tentative flap so loading never looks frozen. */
.app-shell.is-loading .bee-wing-back .bee-wing-rig {
  animation: bee-flap-back 1.1s ease-in-out -550ms infinite;
}

.app-shell.is-loading .bee-wing-front .bee-wing-rig {
  animation: bee-flap-front 1.1s ease-in-out infinite;
}

@keyframes bee-flap-front {
  0%,
  100% {
    transform: rotate(0deg);
  }
  35% {
    transform: rotate(-18deg);
  }
  75% {
    transform: rotate(12deg);
  }
}

@keyframes bee-flap-back {
  0%,
  100% {
    transform: rotate(0deg);
  }
  35% {
    transform: rotate(-16deg);
  }
  75% {
    transform: rotate(11deg);
  }
}

/* Dream twitch: mostly still, one small flutter per cycle. Delayed so the
 * fold-up transition plays out before the twitching starts. */
.app-shell:not(.is-playing):not(.is-loading) .bee-wing-front .bee-wing-rig {
  animation: bee-wing-doze 7s ease-in-out 3s infinite;
}

@keyframes bee-wing-doze {
  0%,
  84%,
  96%,
  100% {
    transform: rotate(0deg);
  }
  88% {
    transform: rotate(12deg);
  }
  92% {
    transform: rotate(-3deg);
  }
}

/* --- antennae: perked up in flight (swaying), drooping in sleep ---------- */

.bee-antenna,
.bee-antenna-rig {
  transform-box: view-box;
}

.bee-antenna-front,
.bee-antenna-front .bee-antenna-rig {
  transform-origin: 47px 24.5px;
}

.bee-antenna-back,
.bee-antenna-back .bee-antenna-rig {
  transform-origin: 43.5px 24.3px;
}

.bee-antenna {
  transform: rotate(24deg);
  transition: transform 650ms cubic-bezier(0.34, 1.3, 0.64, 1);
}

.app-shell.is-playing .bee-antenna,
.app-shell.is-loading .bee-antenna {
  transform: rotate(0deg);
}

.app-shell.is-playing .bee-antenna-front .bee-antenna-rig {
  animation: bee-antenna-sway 2s ease-in-out 750ms infinite;
}

.app-shell.is-playing .bee-antenna-back .bee-antenna-rig {
  animation: bee-antenna-sway 2s ease-in-out 550ms infinite;
}

@keyframes bee-antenna-sway {
  0%,
  100% {
    transform: rotate(0deg);
  }
  33% {
    transform: rotate(3deg);
  }
  66% {
    transform: rotate(-4deg);
  }
}

/* --- legs: tucked asleep, dangling and kicking in flight ----------------- */
/* Opacity is the transitioned pose property and transform is the loop, so
 * these can safely share an element. */

.bee-leg {
  opacity: 0;
  transform-box: view-box;
  transition: opacity 400ms ease;
}

.bee-leg-back {
  transform-origin: 27px 47px;
}

.bee-leg-front {
  transform-origin: 34px 47px;
}

.app-shell.is-playing .bee-leg,
.app-shell.is-loading .bee-leg {
  opacity: 1;
}

.app-shell.is-playing .bee-leg-back {
  animation: bee-leg-kick 1s ease-in-out 750ms infinite alternate;
}

.app-shell.is-playing .bee-leg-front {
  animation: bee-leg-kick 1s ease-in-out 250ms infinite alternate;
}

@keyframes bee-leg-kick {
  from {
    transform: rotate(-9deg);
  }
  to {
    transform: rotate(10deg);
  }
}

/* --- face: eye crossfade + occasional blink while awake ------------------ */

.bee-eye-awake,
.bee-tear {
  opacity: 0;
  transition: opacity 400ms ease;
}

.bee-eye-sleep {
  opacity: 1;
  transition: opacity 400ms ease;
}

.app-shell.is-playing .bee-eye-awake,
.app-shell.is-loading .bee-eye-awake {
  opacity: 1;
}

.app-shell.is-playing .bee-eye-sleep,
.app-shell.is-loading .bee-eye-sleep {
  opacity: 0;
}

.bee-eye-awake {
  transform-box: fill-box;
  transform-origin: 50% 55%;
}

.app-shell.is-playing .bee-eye-awake {
  animation: bee-blink 4.4s ease-in-out 1.2s infinite;
}

@keyframes bee-blink {
  0%,
  92%,
  100% {
    transform: scaleY(1);
  }
  95% {
    transform: scaleY(0.08);
  }
}

/* The tear wells up on the cheek, swells, slides, and drips on a loop. */
.bee-tear {
  transform-box: fill-box;
  transform-origin: 50% 30%;
}

.app-shell.is-playing .bee-tear,
.app-shell.is-loading .bee-tear {
  animation: bee-tear-drip 2.8s ease-in infinite;
}

@keyframes bee-tear-drip {
  0% {
    opacity: 0;
    transform: translateY(-0.4px) scale(0.5);
  }
  22% {
    opacity: 0.95;
    transform: translateY(0) scale(1);
  }
  55% {
    opacity: 0.95;
    transform: translateY(0.7px) scale(1.05, 1.1);
  }
  85% {
    opacity: 0.6;
    transform: translateY(3.2px) scale(0.9);
  }
  100% {
    opacity: 0;
    transform: translateY(4.4px) scale(0.8);
  }
}

/* --- sleepwear: pillow slides in under the landing bee, cap fades on ----- */

.bee-pillow {
  transition: opacity 500ms ease, transform 500ms ease;
}

.bee-cap {
  transform-box: fill-box;
  transition: opacity 500ms ease 150ms, transform 500ms ease 150ms;
}

.app-shell.is-playing .bee-pillow,
.app-shell.is-loading .bee-pillow {
  opacity: 0;
  transform: translateY(5px);
}

.app-shell.is-playing .bee-cap,
.app-shell.is-loading .bee-cap {
  opacity: 0;
  transform: translateY(-3px) rotate(-8deg);
  transition-delay: 0ms;
}

/* --- drifting z's while asleep; drifting notes while singing ------------- */
/* Same corner, never both at once. */

.bee-zzz,
.bee-notes {
  pointer-events: none;
  position: absolute;
  right: -6px;
  top: -8px;
}

.bee-zzz {
  color: var(--blue-soft);
  font-family: "Baloo 2", "Quicksand", sans-serif;
  font-weight: 800;
}

.bee-zzz span {
  display: inline-block;
  opacity: 0;
}

.bee-zzz span:nth-child(1) {
  font-size: 12px;
}

.bee-zzz span:nth-child(2) {
  font-size: 10px;
}

.bee-zzz span:nth-child(3) {
  font-size: 8px;
}

.app-shell:not(.is-playing):not(.is-loading) .bee-zzz span {
  animation: zzz-float-a 3.2s ease-in-out infinite;
}

.app-shell:not(.is-playing):not(.is-loading) .bee-zzz span:nth-child(2) {
  animation-delay: 0.7s;
  animation-name: zzz-float-b;
}

.app-shell:not(.is-playing):not(.is-loading) .bee-zzz span:nth-child(3) {
  animation-delay: 1.4s;
}

@keyframes zzz-float-a {
  0% {
    opacity: 0;
    transform: translate(0, 3px) rotate(0deg) scale(0.8);
  }
  30% {
    opacity: 0.95;
    transform: translate(2px, -2px) rotate(6deg) scale(1);
  }
  70% {
    opacity: 0.4;
    transform: translate(3px, -5px) rotate(10deg);
  }
  100% {
    opacity: 0;
    transform: translate(5px, -8px) rotate(14deg);
  }
}

@keyframes zzz-float-b {
  0% {
    opacity: 0;
    transform: translate(0, 3px) rotate(0deg) scale(0.8);
  }
  30% {
    opacity: 0.95;
    transform: translate(-1px, -2px) rotate(-5deg) scale(1);
  }
  70% {
    opacity: 0.4;
    transform: translate(0, -6px) rotate(-9deg);
  }
  100% {
    opacity: 0;
    transform: translate(1px, -9px) rotate(-12deg);
  }
}

.bee-notes {
  font-size: 12px;
  font-weight: 700;
}

.bee-notes span {
  color: var(--amber);
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
}

.bee-notes span:nth-child(2) {
  color: var(--blue-soft);
  font-size: 10px;
}

.bee-notes span:nth-child(3) {
  color: var(--iris-text);
  font-size: 9px;
}

.app-shell.is-playing .bee-notes span {
  animation: bee-note-float-a 2.4s ease-out 750ms infinite;
}

.app-shell.is-playing .bee-notes span:nth-child(2) {
  animation-delay: 1.55s;
  animation-name: bee-note-float-b;
}

.app-shell.is-playing .bee-notes span:nth-child(3) {
  animation-delay: 2.35s;
}

@keyframes bee-note-float-a {
  0% {
    opacity: 0;
    transform: translate(0, 2px) scale(0.6);
  }
  18% {
    opacity: 0.95;
    transform: translate(2px, -2px) scale(1.05) rotate(4deg);
  }
  60% {
    opacity: 0.7;
    transform: translate(4px, -8px) rotate(10deg);
  }
  100% {
    opacity: 0;
    transform: translate(8px, -15px) rotate(14deg);
  }
}

@keyframes bee-note-float-b {
  0% {
    opacity: 0;
    transform: translate(0, 2px) scale(0.6);
  }
  18% {
    opacity: 0.95;
    transform: translate(-2px, -2px) scale(1.05) rotate(-5deg);
  }
  60% {
    opacity: 0.7;
    transform: translate(-3px, -8px) rotate(-10deg);
  }
  100% {
    opacity: 0;
    transform: translate(-2px, -16px) rotate(-13deg);
  }
}

/* Slimmer bee on narrow phones (mirrors the 460px transport shrink). */
@media (max-width: 460px) {
  .bee-svg {
    height: 44px;
    width: 44px;
  }
}