/* Scroll-based entrance animations
 * Subtle horizontal slide + fade-in, triggered once when an element enters the viewport.
 * Activated by JS adding the .sr class; .sr-in marks the revealed state.
 * Honors prefers-reduced-motion: when the user prefers reduced motion, no movement or
 * fade is applied and elements are simply visible.
 */

.sr {
  opacity: 0;
  transform: translate3d(-32px, 0, 0);
  will-change: opacity, transform;
  transition:
    opacity 560ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--sr-delay, 0ms);
}

.sr.sr-right {
  transform: translate3d(32px, 0, 0);
}

.sr.sr-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* On smaller screens, ease the horizontal travel so it stays elegant */
@media (max-width: 767px) {
  .sr {
    transform: translate3d(-20px, 0, 0);
  }
  .sr.sr-right {
    transform: translate3d(20px, 0, 0);
  }
  .sr.sr-in {
    transform: translate3d(0, 0, 0);
  }
}

/* Accessibility: fully disable motion + fade for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sr,
  .sr.sr-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}