Scroll Reveal

<!-- Elements that reveal as they scroll into view (CSS only) -->
<div class="nuda-scroll-reveal__item">Revealed element 1</div>
<div class="nuda-scroll-reveal__item">Revealed element 2</div>
<div class="nuda-scroll-reveal__item">Revealed element 3</div>

/* Scroll Reveal (CSS Only)
   Elements fade up as they enter the viewport using scroll-driven animations.
   Uses animation-timeline: view() for modern browsers.
   Customize: --reveal-distance, --reveal-duration */

.nuda-scroll-reveal__item {
  --reveal-distance: 20px;
  --reveal-duration: 0.6s;
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  animation: nuda-scroll-reveal-in linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

@keyframes nuda-scroll-reveal-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fallback for browsers without scroll-driven animations */
@supports not (animation-timeline: view()) {
  .nuda-scroll-reveal__item {
    animation: nuda-scroll-reveal-fallback var(--reveal-duration) ease-out both;
  }

  @keyframes nuda-scroll-reveal-fallback {
    from {
      opacity: 0;
      transform: translateY(var(--reveal-distance));
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-scroll-reveal__item {
    animation: none;
    opacity: 1;
    transform: none;
  }
}