Scroll-Driven Animation

/* Element to animate */
.animate-reveal {
  animation: reveal linear both;
  animation-timeline: view();
  animation-range: entry;
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reduced motion fallback */
@media (prefers-reduced-motion: reduce) {
  .animate-reveal {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Browser support: Chrome 115+, Safari 18+ */
/* Polyfill: scroll-driven-animations polyfill (experimental) */