/* ============================================================================
 * Dark Matter Animations (DESIGN.md §7)
 * Loaded after main.css on every full page (see app/templates/base.html).
 *
 * Naming convention: `dm-*` prefix to scope all keyframes and utility classes
 * to this design system (no global names like `fadeIn` that collide with
 * vendor libraries).
 *
 * Speed policy: ≤ 500ms total for entrance, ≤ 240ms for state changes,
 * ≤ 60ms stagger between siblings, all eased with `var(--ease-out)`.
 * Long-running loops (shimmer) capped at 1.5s.
 * ============================================================================ */

/* --- Keyframes ------------------------------------------------------------ */

/* Staggered fade-up entrance (8px translate) */
@keyframes dm-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scale from 0.96 + fade in (card / panel open) */
@keyframes dm-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* Shimmer skeleton (1.5s loop, data-loading state) */
@keyframes dm-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Toast slide-in from top + fade (300ms) */
@keyframes dm-toast-in {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fade out + slight scale down (close/exit, 200ms) */
@keyframes dm-fade-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.96); }
}

/* --- Utility classes ----------------------------------------------------- */

/* Single-element entrance (fade-up). Use for the page-intro or a single hero. */
.dm-enter {
  animation: dm-fade-up var(--duration-enter) var(--ease-out) both;
}

/* Staggered entrance for a list of siblings. Apply to the parent; the
 * children get an animation-delay based on their order. Cap is 6
 * children (after that the user has already seen the design system work
 * and additional stagger doesn't add value). */
.dm-enter-stagger > * {
  animation: dm-fade-up var(--duration-enter) var(--ease-out) both;
}

.dm-enter-stagger > *:nth-child(1) { animation-delay: 0ms; }
.dm-enter-stagger > *:nth-child(2) { animation-delay: 60ms; }
.dm-enter-stagger > *:nth-child(3) { animation-delay: 120ms; }
.dm-enter-stagger > *:nth-child(4) { animation-delay: 180ms; }
.dm-enter-stagger > *:nth-child(5) { animation-delay: 240ms; }
.dm-enter-stagger > *:nth-child(6) { animation-delay: 300ms; }

/* Card / panel pop (scale from 0.96 + fade). */
.dm-pop {
  animation: dm-scale-in var(--duration-normal) var(--ease-out) both;
}

/* Hover lift (translateY(-2px)) + accent shadow. The transition is owned
 * by the class so removing it disables both the lift and the shadow
 * (they're paired). */
.dm-hoverable {
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.dm-hoverable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent);
}

/* Shimmer skeleton for loading states. The background uses three
 * existing palette tokens (tertiary → overlay → tertiary). */
.dm-skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-tertiary) 0%,
    var(--color-bg-overlay) 50%,
    var(--color-bg-tertiary) 100%
  );
  background-size: 200% 100%;
  animation: dm-shimmer 1.5s linear infinite;
  border-radius: var(--radius-md);
}

/* Toast slide-in. Apply to a container that holds a toast. */
.dm-toast {
  animation: dm-toast-in 300ms var(--ease-out) both;
}

/* Exit animation (200ms fade + slight scale). Triggered by removing
 * the element after the animation ends. */
.dm-leave {
  animation: dm-fade-out 200ms var(--ease-out) both;
}

/* --- Reduced motion preference ----------------------------------------- */
/* Respect user preference: kill all entrance animations. Static state
 * shows the final layout. Long-running loops (shimmer) are kept at a
 * minimal opacity pulse so the loading state is still recognizable. */
@media (prefers-reduced-motion: reduce) {
  .dm-enter,
  .dm-enter-stagger > *,
  .dm-pop,
  .dm-toast,
  .dm-leave {
    animation: none;
  }
}