/**
 * Site-Wide Animation System
 * Based on Linear/Stripe/Vercel tier micro-interactions
 *
 * Usage: <link rel="stylesheet" href="/css/animations.css"> before Tailwind CDN
 *
 * Timing Standards:
 * - Button press: 100ms ease-out
 * - Hover effects: 150-200ms ease-out
 * - State changes: 200ms ease-out
 * - Transitions: 300-500ms ease-out
 * - Max duration: 600ms (NEVER exceed)
 */

/* =============================================================================
   Layer 1: CSS Custom Properties (Design Tokens)
   ============================================================================= */

:root {
  /* Duration tokens */
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-moderate: 300ms;
  --duration-slow: 500ms;

  /* Easing tokens */
  --ease-out: ease-out;
  --ease-in: ease-in;
  --ease-spring: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Scale tokens */
  --scale-hover: 1.05;
  --scale-press: 0.95;
  --scale-subtle: 1.02;

  /* Translation tokens */
  --translate-press: 0.5px;
  --translate-toast: -50px;
  --translate-slide: 10px;
}

/* =============================================================================
   Layer 2: Consolidated Keyframes (15 Core Animations)
   ============================================================================= */

/* Loading - Spinner rotation */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Feedback - Error shake */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* Feedback - Success pulse */
@keyframes success-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Entrance - Fade in with slide up */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(var(--translate-slide));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Entrance - Slide up only */
@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Entrance - Scale in */
@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Screen - Enter with crossfade */
@keyframes screen-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Screen - Exit */
@keyframes screen-exit {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* Modal - Backdrop enter */
@keyframes modal-backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Modal - Content enter with bounce */
@keyframes modal-content-enter {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Modal - Exit */
@keyframes modal-exit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
}

/* Toast - Enter from top */
@keyframes toast-enter {
  from {
    opacity: 0;
    transform: translateY(var(--translate-toast));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Toast - Exit upward */
@keyframes toast-exit {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(var(--translate-toast));
  }
}

/* Celebration - Confetti fall */
@keyframes confetti-fall {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateY(100vh) rotate(720deg);
  }
}

/* Skeleton - Shimmer loading */
@keyframes skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Status Card - Dramatic entrance */
@keyframes status-card-enter {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
  }
  60% {
    opacity: 1;
    transform: translateY(-5px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Button press - Spring physics */
@keyframes button-press {
  0% { transform: scale(1); }
  50% { transform: scale(0.95) translateY(0.5px); }
  100% { transform: scale(1); }
}

/* Avatar stagger - Pop in */
@keyframes avatar-pop {
  from {
    opacity: 0;
    transform: scale(0) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Copy/Calendar success - Checkmark appear */
@keyframes checkmark-appear {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Input focus - Glow pulse */
@keyframes input-focus-glow {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(230, 57, 70, 0.2);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(230, 57, 70, 0.1);
  }
}

/* Confetti drift - Horizontal movement */
@keyframes confetti-drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(15px); }
}

/* =============================================================================
   Layer 3: Utility Classes
   ============================================================================= */

/* Animation utilities */
.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-shake {
  animation: shake var(--duration-slow) var(--ease-spring);
}

.animate-success-pulse {
  animation: success-pulse var(--duration-normal) var(--ease-spring);
}

.animate-fade-in {
  animation: fade-in var(--duration-moderate) var(--ease-out) forwards;
}

.animate-slide-up {
  animation: slide-up var(--duration-moderate) var(--ease-out) forwards;
}

.animate-scale-in {
  animation: scale-in var(--duration-normal) var(--ease-spring) forwards;
}

.screen-enter {
  animation: screen-enter var(--duration-normal) var(--ease-out) forwards;
}

.screen-exit {
  animation: screen-exit var(--duration-fast) var(--ease-in) forwards;
}

.modal-backdrop-enter {
  animation: modal-backdrop-enter var(--duration-normal) var(--ease-out) forwards;
}

.modal-content-enter {
  animation: modal-content-enter var(--duration-moderate) var(--ease-bounce) forwards;
}

.modal-exit {
  animation: modal-exit var(--duration-fast) var(--ease-in) forwards;
}

.toast-enter {
  animation: toast-enter var(--duration-moderate) var(--ease-spring) forwards;
}

.toast-exit {
  animation: toast-exit var(--duration-normal) var(--ease-in) forwards;
}

.animate-confetti {
  animation: confetti-fall 3s var(--ease-out) forwards;
}

.animate-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.status-card-enter {
  animation: status-card-enter var(--duration-moderate) var(--ease-bounce) forwards;
}

.animate-button-press {
  animation: button-press var(--duration-instant) var(--ease-spring);
}

.animate-avatar-pop {
  animation: avatar-pop var(--duration-normal) var(--ease-bounce) forwards;
}

.animate-checkmark {
  animation: checkmark-appear var(--duration-normal) var(--ease-bounce) forwards;
}

/* Button interactions */
.btn-interactive {
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.btn-interactive:hover {
  transform: scale(var(--scale-hover));
}

.btn-interactive:active {
  transform: scale(var(--scale-press)) translateY(var(--translate-press));
}

/* Primary button with shadow */
.btn-primary-interactive {
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}

.btn-primary-interactive:hover {
  transform: scale(var(--scale-hover));
  box-shadow: 0 10px 25px -5px rgba(230, 57, 70, 0.4);
}

.btn-primary-interactive:active {
  transform: scale(var(--scale-press)) translateY(var(--translate-press));
}

/* Input focus effects */
.input-focus-animate:focus {
  animation: input-focus-glow 2s ease-in-out infinite;
}

/* Stagger delay utilities */
.delay-0 { animation-delay: 0ms; }
.delay-50 { animation-delay: 50ms; }
.delay-100 { animation-delay: 100ms; }
.delay-150 { animation-delay: 150ms; }
.delay-200 { animation-delay: 200ms; }
.delay-250 { animation-delay: 250ms; }
.delay-300 { animation-delay: 300ms; }

/* Opacity for animation start state */
.opacity-0-start {
  opacity: 0;
}

/* =============================================================================
   Layer 4: Reduced Motion (WCAG 2.1 AA)
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .animate-spin {
    animation: none;
  }
}

/* =============================================================================
   Layer 5: Transition Utilities
   ============================================================================= */

.transition-instant {
  transition-duration: var(--duration-instant);
  transition-timing-function: var(--ease-out);
}

.transition-fast {
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-out);
}

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

.transition-moderate {
  transition-duration: var(--duration-moderate);
  transition-timing-function: var(--ease-out);
}

.transition-slow {
  transition-duration: var(--duration-slow);
  transition-timing-function: var(--ease-out);
}

/* Common transition properties */
.transition-transform {
  transition-property: transform;
}

.transition-opacity {
  transition-property: opacity;
}

.transition-all-common {
  transition-property: transform, opacity, background-color, box-shadow;
}