/* Transitions driven by utils/ui/scroll-animations.js. */
:root {
  /* Scroll transitions */
  --animation-easing-elegant: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --animation-easing-overshoot: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Shared scroll transitions: content stays readable until the observer binds it. */
.animate-on-scroll.scroll-observer-prepared {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--animation-duration, 800ms) var(--animation-easing-elegant),
    transform var(--animation-duration, 800ms) var(--animation-easing-overshoot);
  transition-delay: var(--animation-delay, 0ms);
}

.animate-on-scroll.scroll-observer-prepared:where(.fade-up) {
  transform: translateY(30px);
}

.animate-on-scroll.scroll-observer-prepared:where(.fade-left) {
  transform: translateX(30px);
}

.animate-on-scroll.scroll-observer-prepared:where(.fade-right) {
  transform: translateX(-30px);
}

.animate-on-scroll.scroll-observer-prepared:where(.is-visible, :focus-within, :target) {
  opacity: 1;
  transform: none;
}

/* Keyboard navigation and anchor links must never focus transparent content. */
.animate-on-scroll.scroll-observer-prepared:where(:focus-within, :target) {
  transition: none;
}

@media print, (prefers-reduced-motion: reduce) {
  .animate-on-scroll.scroll-observer-prepared {
    opacity: 1;
    transform: none;
    transition: none !important;
  }
}