/* ============================================================
 * animations.css — Keyframes and shared transitions
 *
 * - @keyframes fade-in, slide-up, shimmer, pulse, ...
 * - Theme transition: transition: background-color, color,
 *   border-color 200ms on body / .surface / .button utility classes
 * - prefers-reduced-motion overrides (disable non-essential anim)
 *
 * Uses only variables defined in tokens.css.
 * Filled in task 11.2.
 * ============================================================ */

/* ─── Theme transition utilities ──────────────────────────────────────────
 * Smooth ~200ms cross-fade between dark and light themes (Requirement 11.7).
 * Applied to body and to the .surface / .button utility classes so any
 * element that opts in inherits the transition without overriding component-
 * level transitions on transform / opacity / box-shadow.
 * ──────────────────────────────────────────────────────────────────────── */
body,
.surface,
.button {
  transition:
    background-color var(--dur-theme, 200ms) var(--ease, ease),
    color            var(--dur-theme, 200ms) var(--ease, ease),
    border-color     var(--dur-theme, 200ms) var(--ease, ease);
}

/* ─── Reduce motion (accessibility) ───────────────────────────────────────
 * Honours OS-level "reduce motion" preferences for users sensitive to
 * animation. Theme transition is also collapsed so the change is instant.
 * ──────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ─── Keyframes used by components.css / chat.css ────────────────────────
 * fadeIn — generic opacity fade (used by surfaces appearing in place).
 * slideUp — translate-and-fade up, used for the chat-view "new messages"
 *           pill and toast entry.
 * popoverIn — small scale + fade for menu popovers.
 * pulse — micro-pulse used by the recording mic state.
 * shimmer — placeholder/loading sweep for skeleton states.
 * modalFadeIn / modalSlideIn — modal backdrop + dialog entry.
 * toastIn — toast slide-in from the right edge.
 * ──────────────────────────────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes popoverIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.05); opacity: 0.85; }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}