/* ═══════════════════════════════════════════════════════════════════════════
   BonusLoots Lazy Section Animations
   Fade-in and slide-up effects for below-fold sections
   ═══════════════════════════════════════════════════════════════════════════ */

/**
 * Initial state for lazy-loaded sections
 * Hidden until the 'loaded' class is added by JavaScript
 */
[data-lazy-section] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}

/**
 * Animated state when section enters viewport
 * Applied by IntersectionObserver when section comes within 200px of viewport
 */
[data-lazy-section].loaded {
  opacity: 1;
  transform: translateY(0);
}

/**
 * Stagger animation for child elements within lazy sections
 * Optional: adds a cascading effect to child cards/items
 */
[data-lazy-section].loaded > * {
  animation: fadeInUp 0.6s ease-out forwards;
}

[data-lazy-section].loaded > :nth-child(1) { animation-delay: 0.1s; }
[data-lazy-section].loaded > :nth-child(2) { animation-delay: 0.2s; }
[data-lazy-section].loaded > :nth-child(3) { animation-delay: 0.3s; }
[data-lazy-section].loaded > :nth-child(4) { animation-delay: 0.4s; }
[data-lazy-section].loaded > :nth-child(n+5) { animation-delay: 0.5s; }

/**
 * Fade-in up animation keyframes
 * Complementary to the existing scroll animations
 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/**
 * Prefers reduced motion: respect user's accessibility preferences
 */
@media (prefers-reduced-motion: reduce) {
  [data-lazy-section] {
    transition: none;
    transform: none;
    opacity: 1;
  }

  [data-lazy-section].loaded > * {
    animation: none;
  }
}

/**
 * Mobile optimization: slightly faster animations on smaller screens
 */
@media (max-width: 768px) {
  [data-lazy-section] {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  }

  [data-lazy-section].loaded {
    opacity: 1;
    transform: translateY(0);
  }

  [data-lazy-section].loaded > * {
    animation: fadeInUp 0.4s ease-out forwards;
  }

  [data-lazy-section].loaded > :nth-child(1) { animation-delay: 0.05s; }
  [data-lazy-section].loaded > :nth-child(2) { animation-delay: 0.1s; }
  [data-lazy-section].loaded > :nth-child(3) { animation-delay: 0.15s; }
  [data-lazy-section].loaded > :nth-child(4) { animation-delay: 0.2s; }
  [data-lazy-section].loaded > :nth-child(n+5) { animation-delay: 0.25s; }
}