/* ═══════════════════════════════════════════════════════════════════════
   MOTION — A2ZDocs
   Animation utilities. Requires tokens.css (prefers-reduced-motion rule).
   Rule: All UI transitions ≤ 300ms. Micro-interactions ≤ 150ms.
         No spring/bounce curves. No animation during photo crop/preview.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Keyframes ──────────────────────────────────────────────────────── */

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

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

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

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

@keyframes slideRightIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* Safe entrance — replaces bounceIn */
@keyframes safeEnter {
  from { opacity: 0; transform: scale(0.96) translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Toast entrance from bottom */
@keyframes toastSlideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Shimmer (skeleton loader) */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* Pulse (live indicators, uploading) */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

/* Spin (loading spinners only) */
@keyframes spin {
  to { transform: rotate(360deg); }
}


/* ─── Animation Utility Classes ──────────────────────────────────────── */

/* Durations */
.dur-fast    { animation-duration: var(--motion-fast) !important; }
.dur-default { animation-duration: var(--motion-default) !important; }
.dur-slow    { animation-duration: var(--motion-slow) !important; }

/* Delays */
.delay-1 { animation-delay: 50ms; }
.delay-2 { animation-delay: 100ms; }
.delay-3 { animation-delay: 150ms; }
.delay-4 { animation-delay: 200ms; }
.delay-5 { animation-delay: 250ms; }

/* Presets */
.animate-fade-in   { animation: fadeIn     var(--motion-default) var(--ease-out)     both; }
.animate-slide-up  { animation: slideUpIn  var(--motion-slow)    var(--ease-out)     both; }
.animate-slide-down { animation: slideDownIn var(--motion-slow)  var(--ease-out)     both; }
.animate-slide-right { animation: slideRightIn var(--motion-slow) var(--ease-out)    both; }
.animate-scale-in  { animation: scaleIn    var(--motion-default) var(--ease-out)     both; }
.animate-safe-enter { animation: safeEnter var(--motion-slow)    var(--ease-out) 0.1s both; }
.animate-pulse     { animation: pulse 2s var(--ease-default) infinite; }
.animate-spin      { animation: spin 0.7s linear infinite; }

/* Shimmer — for skeleton loaders */
.animate-shimmer {
  background: linear-gradient(
    90deg,
    var(--color-neutral-100) 25%,
    var(--color-neutral-200) 50%,
    var(--color-neutral-100) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s var(--ease-default) infinite;
}

/* Transition utilities */
.transition-colors {
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.transition-shadow {
  transition: box-shadow var(--transition-fast);
}
.transition-transform {
  transition: transform var(--transition-default) var(--ease-out);
}
.transition-opacity {
  transition: opacity var(--transition-fast);
}
.transition-none { transition: none !important; }

/* Stagger children animation */
.stagger-children > * { animation: slideUpIn var(--motion-slow) var(--ease-out) both; }
.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
.stagger-children > *:nth-child(2) { animation-delay: 50ms; }
.stagger-children > *:nth-child(3) { animation-delay: 100ms; }
.stagger-children > *:nth-child(4) { animation-delay: 150ms; }
.stagger-children > *:nth-child(5) { animation-delay: 200ms; }
.stagger-children > *:nth-child(6) { animation-delay: 250ms; }
.stagger-children > *:nth-child(n+7) { animation-delay: 300ms; }


/* ─── Scroll Reveal ──────────────────────────────────────────────────── */
/* Works with ui.js IntersectionObserver: adds .is-revealed when visible */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity   var(--motion-slow) var(--ease-out),
    transform var(--motion-slow) var(--ease-out);
}
.reveal.is-revealed {
  opacity: 1;
  transform: none;
}
.reveal-fast {
  opacity: 0;
  transition:
    opacity   var(--motion-default) var(--ease-out),
    transform var(--motion-default) var(--ease-out);
  transform: translateY(8px);
}
.reveal-fast.is-revealed {
  opacity: 1;
  transform: none;
}


/* ─── NO-MOTION ZONES ────────────────────────────────────────────────── */
/* Apply to areas where motion must be suspended during user interaction */

/* Photo crop / canvas area: NEVER animate while user is working */
.no-motion,
.no-motion *,
.no-motion *::before,
.no-motion *::after {
  transition: none !important;
  animation: none !important;
}

/* prefers-reduced-motion is handled globally in tokens.css */