/* ===========================
   ANIMATION STYLES
=========================== */

/* Base setup for all animated elements */
.fade-in-up,
.fade-in-delay,
.fade-in-delay2,
.slide-up,
.pop-in,
.slide-in-left,
.slide-in-right,
.fade-in-scale {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease-out;
  will-change: opacity, transform;
}

/* When element is visible */
.show {
  opacity: 1;
  transform: translateY(0);
}

/* Entrance animations */
.slide-up.show { animation: slideUp 1s ease forwards; }
.fade-in-up.show { animation: fadeInUp 1s ease forwards; }
.fade-in-delay.show { animation: fadeInUp 1s ease 0.4s forwards; }
.fade-in-delay2.show { animation: fadeInUp 1s ease 0.8s forwards; }
.pop-in.show { animation: popIn 0.6s ease-out 1.2s forwards; }
.slide-in-left.show { animation: slideInLeft 1s ease forwards; }
.slide-in-right.show { animation: slideInRight 1s ease forwards; }
.fade-in-scale.show { animation: fadeInScale 1s ease forwards; }

/* Exit animations */
.fade-out-up {
  animation: fadeOutUp 0.8s ease forwards;
}
.slide-out-left {
  animation: slideOutLeft 0.8s ease forwards;
}
.slide-out-right {
  animation: slideOutRight 0.8s ease forwards;
}

/* ===========================
   KEYFRAMES
=========================== */

/* Entrance */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } }
@keyframes popIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes fadeInScale { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }

/* Exit */
@keyframes fadeOutUp { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-40px); } }
@keyframes slideOutLeft { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-60px); } }
@keyframes slideOutRight { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(60px); } }