/* ════════════════════════════════
   SCROLL-DRIVEN ANIMATIONS
   Modern Web Features
════════════════════════════════ */

@supports (animation-timeline: view()) {
  /* Remove the JS-based transition for browsers that support view-timeline */
  .fade-up {
    transition: none;
    opacity: 0;
    transform: translateY(40px);
    animation: fade-up-anim linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 25%;
  }

  /* We ignore the .visible class here because the animation runs on scroll position */
  .fade-up.visible {
    opacity: unset;
    transform: unset;
  }

  @keyframes fade-up-anim {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Specific stagger and parallax effects */
  
  /* Stagger the gallery items naturally with scroll */
  .gallery-item {
    animation: fade-up-anim linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 30%;
  }

  .gallery-item:nth-child(even) {
    animation-range: entry 15% cover 35%;
  }

  /* Floating cards in hero parallax */
  @keyframes parallax-float {
    from {
      transform: translateY(30px);
    }
    to {
      transform: translateY(-50px);
    }
  }

  .hero-float-card.card-top-right {
    animation: parallax-float linear both;
    animation-timeline: scroll(root);
    animation-range: 0% 50%;
  }

  .hero-float-card.card-bottom-left {
    animation: parallax-float linear both reverse;
    animation-timeline: scroll(root);
    animation-range: 0% 50%;
  }
}

/* MANDATORY Copy-Paste Safety: Disable continuous storytelling motion for sensitive users */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-play-state: paused !important;
    animation: none !important;
    transition: none !important;
  }
  .fade-up, .gallery-item {
    opacity: 1 !important;
    transform: none !important;
  }
}