/* ==========================================================================
   Motion — short, purposeful, never decorative loops
   ========================================================================== */

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

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

@keyframes bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.view-enter > * {
  animation: rise var(--dur-3) var(--ease-out) both;
}
.view-enter > *:nth-child(2) { animation-delay: 50ms; }
.view-enter > *:nth-child(3) { animation-delay: 100ms; }
.view-enter > *:nth-child(4) { animation-delay: 150ms; }
.view-enter > *:nth-child(n + 5) { animation-delay: 200ms; }

/* Staggered children inside a grid */
.stagger > * { animation: rise var(--dur-3) var(--ease-out) both; }
.stagger > *:nth-child(1) { animation-delay: 60ms; }
.stagger > *:nth-child(2) { animation-delay: 110ms; }
.stagger > *:nth-child(3) { animation-delay: 160ms; }
.stagger > *:nth-child(4) { animation-delay: 210ms; }
.stagger > *:nth-child(5) { animation-delay: 260ms; }
.stagger > *:nth-child(n + 6) { animation-delay: 300ms; }

/* Reduced motion — system preference or in-app setting */
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) *,
  html:not([data-motion="full"]) *::before,
  html:not([data-motion="full"]) *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
}
html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
  animation-duration: 1ms !important;
  animation-delay: 0ms !important;
  transition-duration: 1ms !important;
}