/**
 * 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(249, 115, 22, 0.2);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.1);
  }
}

/* EVT-013: Attention pulse — subtle nudge on idle submit button */
@keyframes attention-pulse {
  0% { transform: scale(1); box-shadow: 0 4px 14px -2px rgba(249, 115, 22, 0.4); }
  50% { transform: scale(1.03); box-shadow: 0 6px 20px -2px rgba(249, 115, 22, 0.55); }
  100% { transform: scale(1); box-shadow: 0 4px 14px -2px rgba(249, 115, 22, 0.4); }
}

/* 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;
}

/* EVT-013: Attention pulse class — applied/removed by JS lifecycle pair */
.attention-pulse {
  animation: attention-pulse 600ms var(--ease-out) 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(249, 115, 22, 0.4);
}

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

/* Input focus effects */
/* Must match class name in event.html name-input */
.input-focus-glow: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;
}

/* =============================================================================
   Layer 6: Premium Polish (Linear/Stripe/Vercel Tier)
   ============================================================================= */

:root {
  /* Premium easing - exponential for buttery smoothness */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

  /* Premium shadow layers */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.04);

  /* Premium dual-layer shadows (colored + neutral) */
  --shadow-premium-coral:
    0 4px 14px -2px rgba(249, 115, 22, 0.25),
    0 12px 24px -4px rgba(0, 0, 0, 0.08);
  --shadow-premium-teal:
    0 4px 14px -2px rgba(6, 182, 212, 0.25),
    0 12px 24px -4px rgba(0, 0, 0, 0.08);
}

/* Premium card with hover elevation */
.card-premium {
  transition: transform var(--duration-moderate) var(--ease-out-expo),
              box-shadow var(--duration-moderate) var(--ease-out-expo);
  box-shadow: var(--shadow-md);
}

.card-premium:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}

/* Premium card with colored glow */
.card-glow-coral {
  transition: transform var(--duration-moderate) var(--ease-out-expo),
              box-shadow var(--duration-moderate) var(--ease-out-expo);
}

.card-glow-coral:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-premium-coral);
}

/* Premium button with dual-layer shadow */
.btn-premium {
  transition: transform var(--duration-fast) var(--ease-out-expo),
              box-shadow var(--duration-fast) var(--ease-out-expo),
              background-color var(--duration-fast) var(--ease-out);
  box-shadow: 0 2px 8px -2px rgba(249, 115, 22, 0.3);
}

.btn-premium:hover {
  transform: scale(1.02) translateY(-1px);
  box-shadow: var(--shadow-premium-coral);
}

.btn-premium:active {
  transform: scale(0.98) translateY(0);
  box-shadow: 0 1px 4px -1px rgba(249, 115, 22, 0.3);
}

/* Premium glassmorphism */
.glass-premium {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-premium-dark {
  background: rgba(10, 10, 11, 0.8);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* =============================================================================
   Layer 7: Mascot Animations
   ============================================================================= */

/* Mascot breathing - subtle idle animation */
@keyframes mascot-breathe {
  0%, 100% {
    transform: scale(1) translateY(0);
  }
  50% {
    transform: scale(1.01) translateY(-2px);
  }
}

/* Mascot wave - welcoming gesture */
@keyframes mascot-wave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(12deg); }
  75% { transform: rotate(-8deg); }
}

/* Mascot bounce - celebration */
@keyframes mascot-bounce {
  0%, 100% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(-12px);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

/* Mascot entrance - hero reveal */
@keyframes mascot-entrance {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
  }
  60% {
    opacity: 1;
    transform: scale(1.05) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.mascot-breathe {
  animation: mascot-breathe 4s var(--ease-out) infinite;
}

.mascot-wave {
  animation: mascot-wave 1.5s var(--ease-spring) infinite;
  transform-origin: bottom center;
}

.mascot-bounce {
  animation: mascot-bounce 1s infinite;
}

.mascot-entrance {
  animation: mascot-entrance var(--duration-slow) var(--ease-out-expo) forwards;
}

/* Mascot container - for positioning */
.mascot-container {
  display: inline-block;
  will-change: transform;
}

.mascot-container:hover .mascot-breathe {
  animation-play-state: paused;
}

/* =============================================================================
   Layer 8: Scroll-Triggered Parallax (Respects Reduced Motion)
   ============================================================================= */

.parallax-container {
  overflow: hidden;
  position: relative;
}

.parallax-slow {
  will-change: transform;
  transition: transform 0.1s linear;
}

.parallax-medium {
  will-change: transform;
  transition: transform 0.1s linear;
}

.parallax-fast {
  will-change: transform;
  transition: transform 0.1s linear;
}

@media (prefers-reduced-motion: reduce) {
  .parallax-slow,
  .parallax-medium,
  .parallax-fast {
    transform: none !important;
    transition: none !important;
  }

  .mascot-breathe,
  .mascot-wave,
  .mascot-bounce {
    animation: none !important;
  }
}

/* =============================================================================
   Layer 9: FOMO/Social Proof Animations (FOMO-001)
   ============================================================================= */

@keyframes count-badge-enter {
  from { opacity: 0; transform: translateX(-10px) scale(0.95); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes count-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes trending-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.count-badge-enter {
  animation: count-badge-enter var(--duration-moderate) var(--ease-bounce) 0.4s forwards;
  opacity: 0;
}

.count-pulse {
  animation: count-pulse 600ms var(--ease-bounce) 0.6s forwards;
}

.trending-bounce {
  animation: trending-bounce 2s var(--ease-spring) 1s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .count-badge-enter,
  .count-pulse,
  .trending-bounce {
    animation: none !important;
    opacity: 1;
  }
}

/* =============================================================================
   Event Page: Calendar Section Highlight
   VIR-002: Moved from event.html inline styles (VIR-011)
   ============================================================================= */

@keyframes calendarHighlight {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.15);
  }
}

.calendar-highlight {
  animation: calendarHighlight 2s ease-in-out 3;
}

@media (prefers-reduced-motion: reduce) {
  .calendar-highlight {
    animation: none;
  }
}