/* Optimized Scroll Reveal Animation */

/* Base animation styles - using GPU-accelerated properties */
.scroll-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

.scroll-reveal--revealed {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

/* Staggered animations for child elements */
.scroll-reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

.scroll-reveal-stagger--revealed > * {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

/* Respect user preferences */
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal,
  .scroll-reveal-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }

  .scroll-reveal--revealed,
  .scroll-reveal-stagger--revealed > * {
    opacity: 1;
    transform: none;
  }
}

/* Last-resort fallback. If scroll-reveal.js never initialises — the request failed, the file
   was blocked, the script threw — the observer never runs and everything would stay at
   opacity: 0 forever. The snippet in base.html adds this class on window load when the script
   has not reported in, so the content becomes visible instead of silently missing. */
.scroll-reveal-fallback .scroll-reveal,
.scroll-reveal-fallback .scroll-reveal-stagger > * {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}