@keyframes fadeInUp {
  0% {
    opacity: 0%;
    transform: translateY(30px);
  }

  100% {
    opacity: 100%;
    transform: translateY(0);
  }
}

.animate-on-scroll {
  transition: opacity var(--transition-slow) var(--ease-spring), transform var(--transition-slow) var(--ease-spring);
}

.animate-on-scroll.is-visible {
  opacity: 100%;
  transform: translateY(0);
}

.hover-lift {
  transition:
    transform var(--transition-base) ease-out,
    box-shadow var(--transition-base) ease-out;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.hover-scale {
  transition: transform var(--transition-fast) ease-out;
}

.hover-scale:hover {
  transform: scale(1.05);
}

.stagger-1 {
  animation-delay: 0.1s;
}

.stagger-2 {
  animation-delay: 0.2s;
}

.stagger-3 {
  animation-delay: 0.3s;
}

.stagger-4 {
  animation-delay: 0.4s;
}

.smooth-scroll {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}