/* Fade-up on scroll — minimal, elegant, responsive */

/* Base reveal state */
.reveal {
  --distance: 18px;                  /* how far it rises */
  --duration: 600ms;                 /* animation length */
  --delay: 0ms;                      /* per-element delay */
  --easing: cubic-bezier(.2,.6,.2,1);
  --blur: 6px;

  opacity: 0;
  transform: translateY(var(--distance));
  filter: blur(var(--blur));
  transition:
    opacity var(--duration) var(--easing) var(--delay),
    transform var(--duration) var(--easing) var(--delay),
    filter var(--duration) var(--easing) var(--delay);
  will-change: opacity, transform, filter;
}

/* When it enters the viewport */
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Optional variants (you can add one of these classes if desired) */
.reveal.soft   { --distance: 12px; --duration: 520ms; --blur: 4px; }
.reveal.subtle { --distance: 8px;  --duration: 480ms; --blur: 3px; }
.reveal.slow   { --duration: 800ms; }

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}