/* ── Brand sway — swaying heliconia "working" indicator ────────────────
 * Animation for the `BrandSway` component (`@helikona/brand/brand-sway`).
 * Kept outside any `@layer` so a utility framework that happens to touch
 * `transform` can't out-specificity a keyframed animation.
 *
 * Two rotations on the same 3s period, not one. `.brand-sway` pivots the
 * whole plant at the base of the stem; `.brand-sway-bloom` pivots the
 * upper bracts of the spike, a little wider and phase-shifted by a
 * negative delay so the tip trails the stem instead of moving with it.
 * That lag is the whole difference between wind and a rocking icon.
 *
 * The easing is deliberate — linear reads mechanical, like a throbber.
 * Easing through both ends gives the unhurried, considered quality the
 * brand asks for elsewhere; 3s is slow enough to be ignorable while a
 * task runs long. */
@keyframes brand-sway-stem {
  0%, 100% { transform: rotate(-5deg); }
  50%      { transform: rotate(5deg); }
}

@keyframes brand-sway-head {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}

.brand-sway {
  animation: brand-sway-stem 3s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}

.brand-sway-bloom {
  animation: brand-sway-head 3s cubic-bezier(0.37, 0, 0.63, 1) -0.45s infinite;
}

@media (prefers-reduced-motion: reduce) {
  /* Motion sensitivity: hold the plant still and breathe the upper
   * bracts' opacity so the indicator still reads as "working" without
   * anything travelling. */
  @keyframes brand-sway-breathe {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
  }
  .brand-sway {
    animation: none;
  }
  .brand-sway-bloom {
    animation: brand-sway-breathe 2.4s ease-in-out infinite;
  }
}