/* ===== FADE IN ===== */
.fade-in {
  opacity: 0;
  animation: fadeIn 0.6s var(--ease-smooth) forwards;
}
@keyframes fadeIn {
  to { opacity: 1; }
}

/* ===== SLIDE UP/DOWN/LEFT/RIGHT ===== */
.slide-up {
  opacity: 0;
  transform: translateY(30px);
  animation: slideUp 0.7s var(--ease-spring) forwards;
}
@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-down {
  opacity: 0;
  transform: translateY(-30px);
  animation: slideDown 0.7s var(--ease-spring) forwards;
}
@keyframes slideDown {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-left {
  opacity: 0;
  transform: translateX(30px);
  animation: slideLeft 0.7s var(--ease-spring) forwards;
}
@keyframes slideLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-right {
  opacity: 0;
  transform: translateX(-30px);
  animation: slideRight 0.7s var(--ease-spring) forwards;
}
@keyframes slideRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ===== SCALE IN ===== */
.scale-in {
  opacity: 0;
  transform: scale(0.9);
  animation: scaleIn 0.5s var(--ease-spring) forwards;
}
@keyframes scaleIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ===== ZOOM BLUR (Framer-style) ===== */
.zoom-blur-in {
  opacity: 0;
  transform: scale(0.8);
  filter: blur(10px);
  animation: zoomBlurIn 0.8s var(--ease-smooth) forwards;
}
@keyframes zoomBlurIn {
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

/* ===== ROTATE FADE ===== */
.rotate-fade-in {
  opacity: 0;
  transform: rotate(-5deg) scale(0.95);
  animation: rotateFadeIn 0.6s var(--ease-elastic) forwards;
}
@keyframes rotateFadeIn {
  to {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}