/* ===== Animations & Motion Utilities ===== */
/* Ultra-modern, performant animations for fluid experience */

:root {
  --easing-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --easing-emphasized: cubic-bezier(0.2, 0.8, 0, 1);
  --easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --duration-xs: 150ms;
  --duration-sm: 200ms;
  --duration-md: 300ms;
  --duration-lg: 450ms;
  --duration-xl: 600ms;
}

/* Base transition helpers - avoid "all" for performance */
.transition-transform { transition: transform var(--duration-md) var(--easing-standard); }
.transition-opacity { transition: opacity var(--duration-md) var(--easing-standard); }
.transition-fast { transition: transform var(--duration-sm) var(--easing-standard), opacity var(--duration-sm) var(--easing-standard); }
.transition-slow { transition: transform var(--duration-lg) var(--easing-emphasized), opacity var(--duration-lg) var(--easing-emphasized); }

/* Progressive section reveals */
.section-progressive {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--duration-xl) var(--easing-standard), transform var(--duration-xl) var(--easing-standard);
  /* Rendering optimization for offscreen content */
  content-visibility: auto;
  contain-intrinsic-size: 1px 1000px;
}

.section-progressive.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Entrance animations - replace JS inline styles */
.reveal { 
  opacity: 0; 
  transform: translateY(30px); 
  transition: opacity var(--duration-xl) var(--easing-standard), transform var(--duration-xl) var(--easing-standard);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.fade-in { 
  opacity: 0; 
  transition: opacity var(--duration-md) var(--easing-standard);
}
.fade-in.is-visible { opacity: 1; }

.scale-in { 
  transform: scale(0.96); 
  opacity: 0; 
  transition: transform var(--duration-lg) var(--easing-emphasized), opacity var(--duration-sm) var(--easing-standard);
}
.scale-in.is-visible { transform: scale(1); opacity: 1; }

.bounce-in {
  transform: scale(0);
  transition: transform var(--duration-xl) var(--easing-bounce);
}
.bounce-in.is-visible { transform: scale(1); }

/* Quest cards filtering animations */
.quest-card {
  transition: opacity var(--duration-sm) var(--easing-standard), 
              transform var(--duration-sm) var(--easing-standard),
              filter var(--duration-sm) var(--easing-standard);
}

.quest-card.filtering-out {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}

.quest-card.filtering-in {
  opacity: 1;
  transform: translateY(0);
}

/* Interactive elements micro-transitions - specific properties only */
.btn, .filter-btn, .nav-link {
  transition: transform var(--duration-sm) var(--easing-standard), 
              background-color var(--duration-sm) var(--easing-standard),
              color var(--duration-sm) var(--easing-standard);
}

.quest-card, .feature-card {
  transition: transform var(--duration-sm) var(--easing-standard), 
              box-shadow var(--duration-sm) var(--easing-standard);
}

.btn:active { transform: scale(0.95); }
.quest-card:hover, .feature-card:hover { transform: translateY(-8px); }

/* Screen switching animation for tutorial */
.creation-screen-main, .creation-screen-small {
  transition: opacity var(--duration-xs) var(--easing-standard);
}

.screen-switching { opacity: 0; }

/* Counter animations */
.animate-counter {
  transform: scale(1.2);
  color: var(--orange);
  transition: transform var(--duration-sm) var(--easing-standard), color var(--duration-sm) var(--easing-standard);
}

/* Parallax performance optimization */
.parallax-element {
  will-change: transform;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* Stagger delays for entrance animations */
.stagger-1 { animation-delay: 0ms; }
.stagger-2 { animation-delay: 100ms; }
.stagger-3 { animation-delay: 200ms; }
.stagger-4 { animation-delay: 300ms; }
.stagger-5 { animation-delay: 400ms; }

/* Loading states */
.loading-shimmer {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Performance optimizations - reduce will-change usage */
.gpu-accelerated {
  transform: translateZ(0);
}

/* Only apply will-change during active animations */
.animating {
  will-change: transform, opacity;
}

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

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Utility classes */
.js-hide { visibility: hidden; }
.js-show { visibility: visible; }
.no-transition { transition: none !important; }