/* ── Idle: breathing + blinking (always-on base layer) ───── */
/* These run on .mote-body and .mote-eye regardless of state. */
/* Higher-priority state animations override via the parent   */
/* .mote-body-anim group — they compose by nesting.           */

.mote-body {
  animation: ma-breathe var(--breathe-speed, 3.5s) ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 50% 70%;
}

@keyframes ma-breathe {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.04) translateY(-1px); }
}

/* ── Blinking (always on, all states except sleep) ───────── */
.mote-eye {
  animation: ma-blink 4s step-end infinite;
  animation-delay: var(--blink-delay, 0s);
  transform-box: fill-box;
  transform-origin: center;
}
.mote-eye ~ .mote-eye { --blink-delay: -0.05s; }

@keyframes ma-blink {
  0%, 88%, 96%, 100% { transform: scaleY(1); }
  92%                { transform: scaleY(0.05); }
}

/* ── Shadow (subtle ellipse under the mote) ──────────────── */
.mote-shadow ellipse {
  opacity: 0.25;
  transform-box: fill-box;
  transform-origin: center;
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mote-body,
  .mote-eye,
  .mote-body-anim,
  .mote-features-top,
  .mote-features-side {
    animation: none !important;
  }
}