/* ...existing code... */
:root{
  --anim-duration: 900ms;
  --anim-ease: cubic-bezier(.2,.9,.2,1);
  --anim-x: 60px;
}

/* Base hidden state for viewport-driven animations */
.anim-on-scroll{
  opacity: 0;
  will-change: transform, opacity;
  transition: transform var(--anim-duration) var(--anim-ease), opacity var(--anim-duration) var(--anim-ease);
  transform: translateZ(0);
}

/* directions */
.anim-on-scroll.from-left{ transform: translateX(calc(-1 * var(--anim-x))); }
.anim-on-scroll.from-right{ transform: translateX(var(--anim-x)); }
/* vertical variant */
.anim-on-scroll.up{ transform: translateY(28px); }

/* visible */
.anim-on-scroll.in-view{ opacity: 1; transform: translateX(0) !important; }
.anim-on-scroll.in-view.up{ transform: translateY(0) !important; }

/* simple stagger helper for container children */
.anim-stagger > *{ transition-delay: 0s; }
.anim-stagger.in-view > *{ transition-delay: .06s; }

/* accessibility */
@media (prefers-reduced-motion: reduce){
  .anim-on-scroll, .anim-on-scroll.in-view { transition: none; transform: none; opacity: 1; }
}

/* small utility */
.anim-toggler { will-change: opacity, transform; }