/* PHASE 2: Performance Optimization - Non-Critical CSS */
/* Advanced animations and styles loaded asynchronously */

/* Smooth transitions for motion ≤300ms */
* {
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Simple Toast Animations */
@keyframes toast-slide-in {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.toast-slide-in {
  animation: toast-slide-in 0.3s ease-out forwards;
}

/* Subtle Elegant Animations */
@keyframes cosmic-pulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.02);
    filter: brightness(1.05);
  }
}

@keyframes subtle-glow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(242, 179, 94, 0.1);
    text-shadow: 0 0 3px rgba(242, 179, 94, 0.2);
  }
  50% {
    box-shadow: 0 0 10px rgba(242, 179, 94, 0.2);
    text-shadow: 0 0 6px rgba(242, 179, 94, 0.3);
  }
}

@keyframes gentle-reveal {
  0% {
    transform: translateY(30px) scale(0.98);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

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

@keyframes gentle-drift {
  0% {
    transform: translateX(0) translateY(0);
  }
  25% {
    transform: translateX(2px) translateY(-1px);
  }
  50% {
    transform: translateX(0) translateY(-2px);
  }
  75% {
    transform: translateX(-2px) translateY(-1px);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}

@keyframes subtle-enhance {
  0% {
    filter: brightness(1) contrast(1) saturate(1);
    transform: scale(1);
  }
  50% {
    filter: brightness(1.02) contrast(1.02) saturate(1.05);
    transform: scale(1.005);
  }
  100% {
    filter: brightness(1) contrast(1) saturate(1);
    transform: scale(1);
  }
}

@keyframes progress-glow {
  0% {
    box-shadow: 0 0 3px rgba(242, 179, 94, 0.2);
  }
  50% {
    box-shadow: 0 0 8px rgba(242, 179, 94, 0.4);
  }
  100% {
    box-shadow: 0 0 3px rgba(242, 179, 94, 0.2);
  }
}

/* Utility Classes */
.cosmic-pulse {
  animation: cosmic-pulse 4s ease-in-out infinite;
}

.subtle-glow {
  animation: subtle-glow 3s ease-in-out infinite;
}

.gentle-reveal {
  animation: gentle-reveal 1.2s ease-out forwards;
}

.soft-float {
  animation: soft-float 6s ease-in-out infinite;
}

.gentle-drift {
  animation: gentle-drift 12s ease-in-out infinite;
}

.subtle-enhance {
  animation: subtle-enhance 3s ease-in-out infinite;
}

.progress-glow {
  animation: progress-glow 3s ease-in-out infinite;
}

/* Hover Effects */
.hover-subtle-glow:hover {
  animation: subtle-glow 2s ease-in-out infinite;
}

.hover-cosmic-pulse:hover {
  animation: cosmic-pulse 3s ease-in-out infinite;
}

/* Scroll-triggered animations */
.scroll-triggered {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-triggered.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Advanced gradient animations */
.gradient-animated {
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
}

/* Persistent Parallax Constellation Layer */
@keyframes constellation-drift {
  0% {
    transform: translateX(0) translateY(0) rotate(0deg);
    opacity: 0.3;
  }
  25% {
    transform: translateX(10px) translateY(-5px) rotate(0.2deg);
    opacity: 0.4;
  }
  50% {
    transform: translateX(0) translateY(-10px) rotate(0.4deg);
    opacity: 0.5;
  }
  75% {
    transform: translateX(-10px) translateY(-5px) rotate(0.2deg);
    opacity: 0.4;
  }
  100% {
    transform: translateX(0) translateY(0) rotate(0deg);
    opacity: 0.3;
  }
}

.constellation-drift {
  animation: constellation-drift 20s ease-in-out infinite;
}

/* Cosmic Float Animation */
@keyframes cosmic-float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0.7;
  }
  25% {
    transform: translateY(-10px) rotate(1deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-20px) rotate(0deg);
    opacity: 0.9;
  }
  75% {
    transform: translateY(-10px) rotate(-1deg);
    opacity: 0.8;
  }
}

.cosmic-float {
  animation: cosmic-float 8s ease-in-out infinite;
}

/* 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;
  }
  
  .cosmic-pulse,
  .subtle-glow,
  .gentle-reveal,
  .soft-float,
  .gentle-drift,
  .subtle-enhance,
  .progress-glow,
  .constellation-drift,
  .cosmic-float {
    animation: none !important;
  }
}