/* WP-21 motion (P1 + P2). Keyframes and helper classes for the dashboard shells.
   Every animation here uses a duration token (so reduced motion zeroes it via tokens.css) and sits
   inside prefers-reduced-motion: no-preference, so reduced motion gets final states with no movement.
   Stagger: set --i on the element (the template caps it at 6). Plan: docs/agents/wp/WP-21-motion-phases.md. */

@keyframes ui-enter { from { opacity: 0; transform: translateY(var(--dist-2)); } to { opacity: 1; transform: none; } }
@keyframes ui-exit { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(var(--dist-1)); } }
@keyframes ui-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

@media (prefers-reduced-motion: no-preference) {
  /* Entrance: first six items rise and fade, staggered by --i. */
  .is-enter {
    animation: ui-enter var(--t-enter) var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * var(--stagger));
  }

  /* Exit (P2): ui.js closeWithMotion() sets data-closing, waits for animationend (300 ms fallback), then closes.
     Dialogs animate themselves. <details> menus keep their summary still and animate the panel only. */
  dialog.modal[data-closing],
  dialog.drawer[data-closing],
  details[data-closing] > .menu,
  details[data-closing] > .popover__body,
  details[data-closing] > .launcher {
    animation: ui-exit var(--t-exit) var(--ease-in) forwards;
  }

  /* Toast and flash dismiss use .is-gone (ui.js dismiss): align its speed to the exit token. */
  .toast.is-gone { transition-duration: var(--t-exit); }

  /* Press feedback (P2): buttons dip 2% while pressed. */
  .btn {
    transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease), transform var(--t-fast) var(--ease-std);
  }
  .btn:not(:disabled):not([aria-disabled="true"]):active { transform: scale(.98); }

  /* Loading placeholder. Pass aria-busy="true" on the wrapper while it shows. */
  .skeleton-shimmer {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%) 0 0 / 200% 100%;
    animation: ui-shimmer 1.4s linear infinite;
  }
}

/* Without motion the skeleton stays a flat block (no loop). */
@media (prefers-reduced-motion: reduce) {
  .skeleton-shimmer { background: var(--surface-2); }
}