/* =============================================================
   Motion — animation keyframes, utilities, and transitions
   All durations and easings come from theme.css tokens.
   ============================================================= */

/* === Respect prefers-reduced-motion === */
@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 === */

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

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

@keyframes slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide-down {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes pop {
  0%   { transform: scale(0.85); opacity: 0; }
  70%  { transform: scale(1.05); }
  100% { transform: scale(1);    opacity: 1; }
}

@keyframes scale-in {
  from { transform: scale(0.95); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* === Utility classes ===
   Usage: add class to element, animation plays once on mount.
   Turbo: works well with Turbo Frame responses and page transitions. */

.animate-fade-in      { animation: fade-in      var(--duration-normal)    var(--ease-out)    both; }
.animate-slide-up     { animation: slide-up     var(--duration-normal)    var(--ease-out)    both; }
.animate-slide-down   { animation: slide-down   var(--duration-normal)    var(--ease-out)    both; }
.animate-slide-right  { animation: slide-in-right var(--duration-normal)  var(--ease-out)    both; }
.animate-pop          { animation: pop          var(--duration-emphasis)   var(--ease-spring) both; }
.animate-scale-in     { animation: scale-in     var(--duration-emphasis)   var(--ease-out)    both; }
.animate-pulse        { animation: pulse 1.5s   var(--ease-in-out) infinite; }

/* Stagger children — set --stagger-delay and --i on each child via Stimulus or inline style */
.stagger > * {
  animation-delay: calc(var(--stagger-delay, 50ms) * var(--i, 0));
}

/* === Common transition helpers === */

.transition-colors {
  transition: color            var(--duration-quick) var(--ease-in-out),
              background-color var(--duration-quick) var(--ease-in-out),
              border-color     var(--duration-quick) var(--ease-in-out);
}

.transition-opacity {
  transition: opacity var(--duration-quick) var(--ease-in-out);
}

.transition-transform {
  transition: transform var(--duration-normal) var(--ease-out);
}

/* === View Transitions (Turbo 8) ===
   Applied globally — crossfade between navigations.
   Override per-element with ::view-transition-* if needed. */
@view-transition {
  navigation: auto;
}