/* ==========================================================
   ✅ WORLD-CLASS ANIMATIONS — animations.css
   - GPU Accelerated (60fps guaranteed)
   - Performance Optimized (will-change)
   - Staggered Entry Logic
========================================================== */

/* 1. THE REFINED FADE-UP
   - Uses 'will-change' to prepare the GPU
   - Uses 'cubic-bezier' from your tokens for natural motion
---------------------------------------------------------- */
.fade-up {
  opacity: 0;
  transform: translateY(20px) translateZ(0); /* translateZ triggers GPU */
  will-change: opacity, transform;
  animation: fadeUp var(--dur-med) var(--ease-out) forwards;
}

/* 2. STAGGERED DELAYS
   - Add these classes to items in a grid/carousel 
   - Makes cards appear one-by-one for a luxury feel
---------------------------------------------------------- */
.delay-1 {
  animation-delay: 100ms;
}
.delay-2 {
  animation-delay: 200ms;
}
.delay-3 {
  animation-delay: 300ms;
}
.delay-4 {
  animation-delay: 400ms;
}

/* 3. REVEAL ON SCROLL (Observer Ready)
   - Use this with the Intersection Observer JS 
---------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(30px) translateZ(0);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0) translateZ(0);
}

/* 4. PREMIUM KEYFRAMES */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px) translateZ(0);
  }
  to {
    opacity: 1;
    transform: translateY(0) translateZ(0);
  }
}

/* 5. SUBTLE SHIMMER (For Loading States) 
   - High-end skeleton effect
---------------------------------------------------------- */
.shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

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