.fade-in {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: none;
}
.slide-in-left {
  opacity: 0;
  transform: translateX(-30px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}
.slide-in-left.visible {
  opacity: 1;
  transform: none;
}
@keyframes float-y {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
@keyframes shimmer {
  0% {
    background-position: -400px 0;
  }
  100% {
    background-position: 400px 0;
  }
}
.anim-float {
  animation: float-y 3.5s ease-in-out infinite;
}
.skeleton {
  background: linear-gradient(
    90deg,
    var(--clr-card) 25%,
    rgba(255, 255, 255, 0.04) 50%,
    var(--clr-card) 75%
  );
  background-size: 400px 100%;
  animation: shimmer 1.4s infinite linear;
}