/* Minhocário — motion, transitions, and animated edge states.
   Cascade position 5 of 5: tokens → base → components → screens → motion.
   index.html is the source of truth for that order; never use @import.

   LAST ON PURPOSE. The `prefers-reduced-motion` block at the bottom is a
   blanket `*` override, and the T22 transition rules re-declare properties on
   components and screens. Loading this file last is what lets both win without
   reaching for !important — moving it earlier silently breaks reduced-motion.

   V2b NOTE — every transition and entrance now runs on --dur-fast / --dur /
   --dur-slow; the eight stray durations V2a left literal are gone. The two
   infinite pulses deliberately did NOT collapse into those steps: they are not
   transitions but a condition breathing for as long as it holds, and folding a
   1.2s breath into 0.3s turns a calm warning into a strobe. They keep their own
   --dur-pulse / --dur-pulse-urgent, and stay unequal so a stressed gauge and an
   urgent button never lock into one metronome beat.

   ============================================================================
   T22 — UX polish: transitions, focus/press feedback, and explicit edge states.
   Colors and weights carry the meaning; motion is decorative and fully opts out
   under prefers-reduced-motion (bottom of this file).
   ========================================================================== */

/* Screen entry: a brief fade/rise so switching screens is not a hard cut. Runs
   on every reveal because [hidden] removes the section from the render tree. */
.screen:not([hidden]) { animation: screen-in var(--dur) ease-out both; }
@keyframes screen-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Shop / setup cards lift on hover for affordance; disabled ones stay put. */
.shop-card { transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.shop-card:not(.shop-card--disabled):hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.setup-species { transition: background-color var(--dur-fast) var(--ease); }

/* Action feedback line: flash on each new message so a repeated outcome (e.g.
   two rejected clicks) still registers. showFeedback re-applies the class with a
   forced reflow every call, restarting the animation. */
.actions__feedback--flash { animation: feedback-in var(--dur-slow) ease-out; }
@keyframes feedback-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* Modal chooser: fade the backdrop and pop the dialog in. */
dialog.chooser[open] { animation: dialog-in var(--dur) ease-out; }
dialog.chooser[open]::backdrop { animation: backdrop-in var(--dur) ease-out; }
@keyframes dialog-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.chooser__option { transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }

/* Colony-dead banner: slide in so the interruption is noticed (edge state). */
.banner { animation: banner-in var(--dur) ease-out; }
@keyframes banner-in {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* --- Explicit edge states --------------------------------------------------
   The action that clears a filling/full tray/tank points the player at the fix
   (toggled from js/ui/actions.js only while the colony is alive). Two tiers, the
   same ones the gauges use: a calm yellow border while it is filling up, then
   the red pulse once it is full and production is actually suffering.

   The warning tier deliberately does NOT animate. Motion is what separates
   "act now" from "act soon" here, so spending it on the earlier tier would flatten
   the distinction — and under prefers-reduced-motion (below) colour is carrying
   the whole message anyway. The static `--warn` tier lives here rather than in
   components.css so the two tiers of one signal stay readable side by side. */
.actions__btn--warn { border-color: var(--state-warn); background: var(--state-warn-bg); }
.actions__btn--alert {
  border-color: var(--state-alert);
  animation: urgent-pulse var(--dur-pulse-urgent) ease-in-out infinite;
}
@keyframes urgent-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--state-alert-glow-0); }
  50%      { box-shadow: 0 0 0 4px var(--state-alert-glow); }
}

/* An env variable outside its comfort band gently pulses its marker/value, so a
   stressed colony is noticeable even before it turns critical. */
.gauge--alert .gauge__marker,
.stat--alert .stat__value { animation: alert-pulse var(--dur-pulse) ease-in-out infinite; }
@keyframes alert-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* Honor a reduced-motion preference: keep every color/weight cue, drop motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}