/* Global root vars – always available, but distance can be overridden */
:root {
  --anim-dist: 60px;                /* smaller default, or set to 0 if you want no movement on very small screens */
  --anim-dur: 0.8s;
  --anim-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --anim-delay: 0.1s;
}

/* Only enable bigger distance + staggering on tablet+ */
@media (min-width: 700px) {
  :root {
    --anim-dist: 80px;
  }
}

/* Starting states – hidden/off-screen until animation */
.anim-down   { opacity: 0; transform: translateY(calc(-1 * var(--anim-dist))); transition: all var(--anim-dur) var(--anim-ease); }
.anim-up     { opacity: 0; transform: translateY(var(--anim-dist)); transition: all var(--anim-dur) var(--anim-ease); }
.anim-right  { opacity: 0; transform: translateX(calc(-1 * var(--anim-dist))); transition: all var(--anim-dur) var(--anim-ease); }
.anim-left   { opacity: 0; transform: translateX(var(--anim-dist)); transition: all var(--anim-dur) var(--anim-ease); }
.anim-appear { opacity: 0; transform: scale(0.8); transition: all var(--anim-dur) var(--anim-ease); }

/* Animated state - when element comes into view */
.anim-down.animate   { opacity: 1; transform: translateY(0); }
.anim-up.animate     { opacity: 1; transform: translateY(0); }
.anim-right.animate  { opacity: 1; transform: translateX(0); }
.anim-left.animate   { opacity: 1; transform: translateX(0); }
.anim-appear.animate { opacity: 1; transform: scale(1); }

/* Staggered animations for child elements */
.anim-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: all var(--anim-dur) var(--anim-ease);
}

.anim-stagger.animate > *:nth-child(1) { transition-delay: 0.1s; }
.anim-stagger.animate > *:nth-child(2) { transition-delay: 0.2s; }
.anim-stagger.animate > *:nth-child(3) { transition-delay: 0.3s; }
.anim-stagger.animate > *:nth-child(4) { transition-delay: 0.4s; }
.anim-stagger.animate > *:nth-child(5) { transition-delay: 0.5s; }

.anim-stagger.animate > * {
  opacity: 1;
  transform: translateY(0);
}