@layer components {
  /* ==========================================================================
     Scroll-Driven Animations
     ========================================================================== */
  @keyframes fade-in-up {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes slide-in-left {
    from { opacity: 0; transform: translateX(-60px); }
    to { opacity: 1; transform: translateX(0); }
  }

  @keyframes slide-in-right {
    from { opacity: 0; transform: translateX(60px); }
    to { opacity: 1; transform: translateX(0); }
  }

  @keyframes image-reveal {
    from { opacity: 0; transform: scale(0.9); clip-path: inset(10%); }
    to { opacity: 1; transform: scale(1); clip-path: inset(0%); }
  }

  @keyframes zoom-in {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
  }

  /* Reveal Classes — Native CSS Scroll-Driven */
  .scroll-reveal {
    animation: fade-in-up linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 35%;
  }

  .scroll-reveal-left {
    animation: slide-in-left linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 35%;
  }

  .scroll-reveal-right {
    animation: slide-in-right linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 35%;
  }

  .scroll-reveal-image {
    animation: image-reveal linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 35%;
  }

  .scroll-reveal-zoom {
    animation: zoom-in linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 35%;
  }

  /* ==========================================================================
     Hero Parallax
     ========================================================================== */
  .hero__bg {
    animation: hero-parallax linear both;
    animation-timeline: scroll(root block);
    animation-range: 0vh 100vh;
  }
  
  @keyframes hero-parallax {
    to { transform: translateY(30%) scale(1.1); }
  }

  /* ==========================================================================
     Scroll Progress Bar
     ========================================================================== */
  .scroll-progress {
    animation: scroll-progress-grow linear;
    animation-timeline: scroll(root block);
  }
  
  @keyframes scroll-progress-grow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }

  /* ==========================================================================
     Stagger Delays
     ========================================================================== */
  .stagger-1 { animation-delay: 100ms; }
  .stagger-2 { animation-delay: 200ms; }
  .stagger-3 { animation-delay: 300ms; }
  .stagger-4 { animation-delay: 400ms; }
  .stagger-5 { animation-delay: 500ms; }
  .stagger-6 { animation-delay: 600ms; }
  .stagger-7 { animation-delay: 700ms; }
  .stagger-8 { animation-delay: 800ms; }

  /* ==========================================================================
     IntersectionObserver Fallback (for browsers without scroll-driven animations)
     These classes are added by animations.js
     ========================================================================== */
  .js-reveal-ready {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.35, 1), 
                transform 0.6s cubic-bezier(0.25, 1, 0.35, 1);
  }

  .js-reveal-ready.scroll-reveal-left {
    transform: translateX(-60px);
  }

  .js-reveal-ready.scroll-reveal-right {
    transform: translateX(60px);
  }

  .js-reveal-ready.scroll-reveal-image {
    transform: scale(0.9);
    clip-path: inset(10%);
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.35, 1),
                transform 0.6s cubic-bezier(0.25, 1, 0.35, 1),
                clip-path 0.6s cubic-bezier(0.25, 1, 0.35, 1);
  }

  .js-reveal-ready.scroll-reveal-zoom {
    transform: scale(0.85);
  }

  .js-reveal-ready.is-revealed {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
    clip-path: inset(0%);
  }

  /* Stagger delays for fallback */
  .js-reveal-ready.stagger-1 { transition-delay: 100ms; }
  .js-reveal-ready.stagger-2 { transition-delay: 200ms; }
  .js-reveal-ready.stagger-3 { transition-delay: 300ms; }
  .js-reveal-ready.stagger-4 { transition-delay: 400ms; }
  .js-reveal-ready.stagger-5 { transition-delay: 500ms; }
  .js-reveal-ready.stagger-6 { transition-delay: 600ms; }
  .js-reveal-ready.stagger-7 { transition-delay: 700ms; }
  .js-reveal-ready.stagger-8 { transition-delay: 800ms; }

  /* ==========================================================================
     Feature Detection & Fallbacks
     ========================================================================== */
  @supports not ((animation-timeline: view()) and (animation-range: entry)) {
    .scroll-reveal, 
    .scroll-reveal-left, 
    .scroll-reveal-right, 
    .scroll-reveal-image, 
    .scroll-reveal-zoom {
      /* When no JS fallback either, just show everything */
      animation: none;
    }
    
    .hero__bg {
      animation: none;
    }
    
    .scroll-progress {
      display: none;
    }
  }

  /* ==========================================================================
     Reduced Motion Support
     ========================================================================== */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    
    .scroll-reveal, 
    .scroll-reveal-left, 
    .scroll-reveal-right, 
    .scroll-reveal-image, 
    .scroll-reveal-zoom,
    .js-reveal-ready {
      opacity: 1 !important;
      transform: none !important;
      clip-path: none !important;
      animation: none !important;
      transition: none !important;
    }
    
    .hero__bg {
      animation: none !important;
    }
  }
}