/* ==============================================
   ANIMATION KEYFRAMES
   Centralized animations for the entire site
   ============================================== */

/* ========== Hero & Content Reveal Animations ========== */

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

@keyframes subtitleFadeIn {
  from {
    opacity: 0;
    transform: translateX(0);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

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

/* ========== Card Animations ========== */

@keyframes projectCardFadeInHorizontal {
  from {
    opacity: 0;
    transform: translateX(-40px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes projectCardFadeInVertical {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ========== UI Element Animations ========== */

@keyframes touchHint {
  0%, 100% { opacity: 0; }
  20%, 80% { opacity: 0.4; }
}

@keyframes chevronPulse {
  0%, 100% {
    opacity: 0.5;
    transform: translateY(0) scale(1);
  }
  50% {
    opacity: 0.8;
    transform: translateY(-8px) scale(1.1);
  }
}

@keyframes chevronFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 0.5;
    transform: translateY(0);
  }
}

@keyframes chevronFadeOut {
  from {
    opacity: 0.5;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(20px);
  }
}

/* ========== Loading Animations ========== */

@keyframes dotPulse {
  0%, 60%, 100% {
    opacity: 0.3;
  }
  30% {
    opacity: 1;
  }
}

@keyframes pdf-spinner {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ========== Navigation Animations ========== */

@keyframes navLinkBounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes navLinkReturn {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}

/* ==============================================
   ANIMATION UTILITY CLASSES
   Reusable animation classes for common patterns
   ============================================== */

/* Fade In Utilities */
.fade-in {
  animation: pageContentFadeInUp var(--duration-slow) var(--ease-decelerated) forwards;
}

.fade-in-fast {
  animation: pageContentFadeInUp var(--duration-medium) var(--ease-decelerated) forwards;
}

.fade-in-slow {
  animation: pageContentFadeInUp var(--duration-slower) var(--ease-decelerated) forwards;
}

/* Slide Utilities */
.slide-up {
  animation: pageContentFadeInUp var(--duration-slow) var(--ease-decelerated) forwards;
}

.slide-right {
  animation: projectCardFadeInHorizontal var(--duration-slow) var(--ease-decelerated) forwards;
}

/* Stagger Children - for sequential animations */
.stagger-children > * {
  opacity: 0;
  transform: translateY(30px);
  animation: pageContentFadeInUp var(--duration-slow) var(--ease-decelerated) forwards;
}

.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.5s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.6s; }

/* Performance Optimization */
.will-animate {
  will-change: opacity, transform;
}

.animation-complete {
  will-change: auto;
}

/* Disable Animations (for accessibility or back navigation) */
.no-animation,
.no-animation * {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
}