/* ─── Keyframes ─────────────────────────────── */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideFadeOutDown {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(10px); }
}

@keyframes slideFadeInUp {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ─── Utility Classes ───────────────────────── */

.fade-in        { animation: fadeIn 0.6s ease forwards; }
.fade-in-up     { animation: fadeInUp 0.6s ease forwards; }
.slide-in-left  { animation: slideInLeft 0.6s ease forwards; }
.slide-in-right { animation: slideInRight 0.6s ease forwards; }


/* ─── Delay Helpers ─────────────────────────── */

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.5s; }
.delay-4 { animation-delay: 0.7s; }
.delay-5 { animation-delay: 0.9s; }

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .fade-in-up,
  .slide-in-left,
  .slide-in-right {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}