.anim {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.anim.anim--from-left {
  transform: translateX(-32px);
}

.anim.anim--from-right {
  transform: translateX(32px);
}

.anim.anim--scale {
  transform: translateY(20px) scale(0.96);
}

.anim.is-visible {
  opacity: 1;
  transform: none;
}

.anim[data-delay="1"] {
  transition-delay: 0.08s;
}

.anim[data-delay="2"] {
  transition-delay: 0.16s;
}

.anim[data-delay="3"] {
  transition-delay: 0.24s;
}

.anim[data-delay="4"] {
  transition-delay: 0.32s;
}

.anim[data-delay="5"] {
  transition-delay: 0.40s;
}

.anim[data-delay="6"] {
  transition-delay: 0.48s;
}

.anim[data-delay="7"] {
  transition-delay: 0.56s;
}

.anim[data-delay="8"] {
  transition-delay: 0.64s;
}

.hero-subtitle.anim {
  transition-delay: 0.05s;
}

.hero h1.anim {
  transition-delay: 0.18s;
}

.hero-desc.anim {
  transition-delay: 0.30s;
}

.hero-btn.anim {
  transition-delay: 0.42s;
}

.hero-image.anim {
  transition-delay: 0.22s;
}

@media (prefers-reduced-motion: reduce) {
  .anim {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}