/* === Base Animation Utility === */
.animate {
  animation-fill-mode: both;
}

/* === Entrance Animations === */

/* Fade In */
.fade-in {
  animation: fadeIn 1s ease-in-out;
}

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

/* Zoom In */
.zoom-in {
  animation: zoomIn 1s ease-in-out;
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Slide In from Top */
.slide-in-top {
  animation: slideInTop 1s ease-in-out;
}

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

/* Slide In from Bottom */
.slide-in-bottom {
  animation: slideInBottom 1s ease-in-out;
}

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

/* Slide In from Left */
.slide-in-left {
  animation: slideInLeft 1s ease-in-out;
}

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

/* Slide In from Right */
.slide-in-right {
  animation: slideInRight 1s ease-in-out;
}

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

/* === Exit Animations === */

/* Fade Out */
.fade-out {
  animation: fadeOut 0.3s ease-in-out;
}

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

/* Zoom Out */
.zoom-out {
  animation: zoomOut 0.3s ease-in-out;
}

@keyframes zoomOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* Slide Out to Top */
.slide-out-top {
  animation: slideOutTop 0.3s ease-in-out;
}

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

/* Slide Out to Bottom */
.slide-out-bottom {
  animation: slideOutBottom 0.3s ease-in-out;
}

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

/* === Attention Effects === */

/* Pulse */
.pulse {
  animation: pulse 0.6s ease-in-out;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Shake (subtle) */
.shake {
  animation: shake 1s ease-in-out;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}