/**
 * MENA.ME Animation System
 * Purposeful motion for a living system
 */

/* ==========================================================================
   CSS Custom Properties for Animation
   ========================================================================== */

:root {
  /* Timing */
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 600ms;
  --duration-slower: 800ms;

  /* Easing - Organic, not mechanical */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Stagger intervals */
  --stagger-interval: 75ms;
}

/* ==========================================================================
   Keyframe Definitions
   ========================================================================== */

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

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

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

@keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

@keyframes nodeSpawn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  60% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes nodeDeath {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 5px var(--accent),
                0 0 10px var(--accent-muted);
  }
  50% {
    box-shadow: 0 0 15px var(--accent),
                0 0 30px var(--accent-muted);
  }
}

/* ==========================================================================
   Reveal System
   ========================================================================== */

/* Base state: hidden, waiting */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity var(--duration-slow) var(--ease-out-expo),
    transform var(--duration-slow) var(--ease-out-expo);
  will-change: opacity, transform;
}

/* Revealed state: visible */
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   Staggered Animation Delays
   ========================================================================== */

.reveal-group .reveal:nth-child(1) { transition-delay: calc(var(--stagger-interval) * 0); }
.reveal-group .reveal:nth-child(2) { transition-delay: calc(var(--stagger-interval) * 1); }
.reveal-group .reveal:nth-child(3) { transition-delay: calc(var(--stagger-interval) * 2); }
.reveal-group .reveal:nth-child(4) { transition-delay: calc(var(--stagger-interval) * 3); }
.reveal-group .reveal:nth-child(5) { transition-delay: calc(var(--stagger-interval) * 4); }
.reveal-group .reveal:nth-child(6) { transition-delay: calc(var(--stagger-interval) * 5); }
.reveal-group .reveal:nth-child(7) { transition-delay: calc(var(--stagger-interval) * 6); }
.reveal-group .reveal:nth-child(8) { transition-delay: calc(var(--stagger-interval) * 7); }
.reveal-group .reveal:nth-child(9) { transition-delay: calc(var(--stagger-interval) * 8); }
.reveal-group .reveal:nth-child(10) { transition-delay: calc(var(--stagger-interval) * 9); }
.reveal-group .reveal:nth-child(11) { transition-delay: calc(var(--stagger-interval) * 10); }
.reveal-group .reveal:nth-child(12) { transition-delay: calc(var(--stagger-interval) * 11); }

/* ==========================================================================
   Reduced Motion Support
   ========================================================================== */

@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;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .reveal.revealed {
    opacity: 1;
    transform: none;
  }
}