/* ==========================================================================
   gobble.earth — reduced-motion alternatives
   Loaded LAST on every page. When someone asks for reduced motion we drop
   movement (slides, drops, bounces, spins, tilts) but keep meaning: things
   still fade in and out, and feedback ("that changed!") becomes a soft
   highlight glow instead of a jump cut.
   `:root` prefixes give these rules enough specificity to beat the
   page-level `animation: none !important` resets.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  /* 1. Movement off: keyframe motion resolves instantly, and transitions only
        animate non-spatial properties (colour, opacity, shadow) briefly. */
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    scroll-behavior: auto !important;
    transition-property: opacity, color, background-color, border-color, outline-color, box-shadow, fill, stroke !important;
    transition-duration: 160ms !important;
    transition-delay: 0ms !important;
  }

  /* 2. Appearing things fade in rather than fly, drop or pop. */
  :root .toast,
  :root .modal[open],
  :root .plate-food.is-landing,
  :root .plate-food.is-dropping,
  :root .home-hero .plate,
  :root .home-hero .plate-food,
  :root .tag,
  :root .item-editor,
  :root .compare-prompt.is-in,
  :root .shelf-card.is-new,
  :root .h2h__ring.is-entering .h2h__corner--a,
  :root .h2h__ring.is-entering .h2h__corner--b,
  :root .h2h__ring.is-entering .h2h__vs,
  :root .h2h__ring.is-entering .h2h__emoji,
  :root .pscale.is-dropping .pscale__dot {
    animation: rm-fade-in 220ms ease-out both !important;
  }

  /* 3. Leaving things fade out in place. */
  :root .toast.is-leaving,
  :root .plate-food.is-leaving--pop,
  :root .plate-food.is-leaving--lift {
    animation: rm-fade-out 200ms ease-in forwards !important;
  }

  /* 4. "Something changed" feedback: a glow ring, no movement. */
  :root .grade.is-flip,
  :root .grade.is-pulse,
  :root .plate.is-bounce,
  :root .plate--hero.is-thunk,
  :root .plate-food.is-plus,
  :root .plate-food.is-minus,
  :root .plate-dock.is-catch .plate-dock__plate,
  :root .plate-dock.is-catch .plate-dock__total,
  :root .food-card.is-picked,
  :root .food-row.is-settle,
  :root .stepper__value.is-tick-up,
  :root .stepper__value.is-tick-down {
    animation: rm-glow 520ms ease-out !important;
  }

  /* 5. The swap-saving chip stays: it carries information ("−14 kg").
        Fade it in, hold, fade out, without floating. */
  :root .float-chip {
    display: block !important;
    transform: none !important;
    animation: rm-chip 1600ms ease-out forwards !important;
  }

  /* 6. Pure decoration and looping motion stay still. */
  :root .leaf-burst, :root .confetti, :root .flyer { display: none !important; }
  :root .plate-hint__hand, :root .hero-try__food,
  :root .scale__pin.is-swinging, :root .plate-meter.is-swing .meter__fill::after,
  :root .pscale.is-dropping .pscale__axis {
    animation: none !important;
  }
  :root .h2h__ring.is-entering .h2h__bar > span,
  :root .h2h__ring.is-entering .h2h__mini > span { animation: none !important; }
}

@keyframes rm-fade-in  { from { opacity: 0; } }
@keyframes rm-fade-out { to { opacity: 0; } }
@keyframes rm-glow {
  0%   { box-shadow: 0 0 0 0 var(--mustard); }
  35%  { box-shadow: 0 0 0 5px var(--mustard); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes rm-chip {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}