/* ====================================================================
   animate.min.css – Default Minimal Version
   Digunakan untuk animasi dasar: fade, slide, zoom, bounce.
   ==================================================================== */

/* Durasi default */
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

/* Delay */
.delay-1s { animation-delay: 1s; }
.delay-2s { animation-delay: 2s; }
.delay-500ms { animation-delay: .5s; }

/* =======================================================
   FADE IN
   ======================================================= */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.fadeIn { animation-name: fadeIn; }

@keyframes fadeInUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
.fadeInUp { animation-name: fadeInUp; }

@keyframes fadeInDown {
  from { opacity:0; transform:translateY(-20px); }
  to   { opacity:1; transform:translateY(0); }
}
.fadeInDown { animation-name: fadeInDown; }

@keyframes fadeInLeft {
  from { opacity:0; transform:translateX(-20px); }
  to   { opacity:1; transform:translateX(0); }
}
.fadeInLeft { animation-name: fadeInLeft; }

@keyframes fadeInRight {
  from { opacity:0; transform:translateX(20px); }
  to   { opacity:1; transform:translateX(0); }
}
.fadeInRight { animation-name: fadeInRight; }

/* =======================================================
   FADE OUT
   ======================================================= */

@keyframes fadeOut {
  from { opacity:1; }
  to   { opacity:0; }
}
.fadeOut { animation-name: fadeOut; }

/* =======================================================
   SLIDE
   ======================================================= */

@keyframes slideInUp {
  from { transform: translateY(100%); opacity:0; }
  to   { transform: translateY(0); opacity:1; }
}
.slideInUp { animation-name: slideInUp; }

@keyframes slideInDown {
  from { transform: translateY(-100%); opacity:0; }
  to   { transform: translateY(0); opacity:1; }
}
.slideInDown { animation-name: slideInDown; }

@keyframes slideInLeft {
  from { transform: translateX(-100%); opacity:0; }
  to   { transform: translateX(0); opacity:1; }
}
.slideInLeft { animation-name: slideInLeft; }

@keyframes slideInRight {
  from { transform: translateX(100%); opacity:0; }
  to   { transform: translateX(0); opacity:1; }
}
.slideInRight { animation-name: slideInRight; }

/* =======================================================
   ZOOM
   ======================================================= */

@keyframes zoomIn {
  from { opacity:0; transform: scale(.8); }
  to   { opacity:1; transform: scale(1); }
}
.zoomIn { animation-name: zoomIn; }

@keyframes zoomOut {
  from { opacity:1; transform: scale(1); }
  to   { opacity:0; transform: scale(.8); }
}
.zoomOut { animation-name: zoomOut; }

/* =======================================================
   BOUNCE
   ======================================================= */

@keyframes bounceIn {
  0%   { opacity:0; transform: scale(.3); }
  50%  { opacity:1; transform: scale(1.05); }
  70%  { transform: scale(.9); }
  100% { transform: scale(1); }
}
.bounceIn { animation-name: bounceIn; }

/* =======================================================
   ROTATE
   ======================================================= */

@keyframes rotateIn {
  from { transform: rotate(-200deg); opacity:0; }
  to   { transform: rotate(0); opacity:1; }
}
.rotateIn { animation-name: rotateIn; }

@keyframes rotateOut {
  from { transform: rotate(0); opacity:1; }
  to   { transform: rotate(200deg); opacity:0; }
}
.rotateOut { animation-name: rotateOut; }