@charset "UTF-8";

/* GLOBAL ANIMATION */
.animated{
  animation-duration:.9s;
  animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.4,0,.2,1);
  will-change:transform,opacity;
}

.animated.infinite{animation-iteration-count:infinite;}
.animated.hinge{animation-duration:1.6s;}
.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut{animation-duration:.6s;}

/* ===============================
   BOUNCE (LEBIH HALUS)
================================= */
@keyframes bounce{
  0%,100%{transform:translateY(0);}
  30%{transform:translateY(-18px);}
  60%{transform:translateY(-8px);}
}
.bounce{
  animation-name:bounce;
  transform-origin:center bottom;
}

/* ===============================
   FLASH → SOFT FADE FLASH
================================= */
@keyframes flash{
  0%,100%{opacity:1;}
  50%{opacity:.4;}
}
.flash{animation-name:flash;}

/* ===============================
   PULSE → SMOOTH SCALE
================================= */
@keyframes pulse{
  0%{transform:scale(1);}
  50%{transform:scale(1.08);}
  100%{transform:scale(1);}
}
.pulse{animation-name:pulse;}

/* ===============================
   RUBBERBAND → SOFT ELASTIC
================================= */
@keyframes rubberBand{
  0%{transform:scale(1);}
  40%{transform:scale(1.15,.9);}
  60%{transform:scale(.95,1.05);}
  100%{transform:scale(1);}
}
.rubberBand{animation-name:rubberBand;}

/* ===============================
   SHAKE → MICRO SHAKE
================================= */
@keyframes shake{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-6px);}
  75%{transform:translateX(6px);}
}
.shake{animation-name:shake;}

/* ===============================
   FADE IN SERIES (MODERN)
================================= */
@keyframes fadeIn{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:none;}
}
.fadeIn{animation-name:fadeIn;}

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

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

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

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

/* ===============================
   FADE OUT SERIES
================================= */
@keyframes fadeOut{
  from{opacity:1;}
  to{opacity:0;transform:translateY(10px);}
}
.fadeOut{animation-name:fadeOut;}

@keyframes fadeOutUp{
  to{opacity:0;transform:translateY(-40px);}
}
.fadeOutUp{animation-name:fadeOutUp;}

@keyframes fadeOutDown{
  to{opacity:0;transform:translateY(40px);}
}
.fadeOutDown{animation-name:fadeOutDown;}

@keyframes fadeOutLeft{
  to{opacity:0;transform:translateX(-40px);}
}
.fadeOutLeft{animation-name:fadeOutLeft;}

@keyframes fadeOutRight{
  to{opacity:0;transform:translateX(40px);}
}
.fadeOutRight{animation-name:fadeOutRight;}

/* ===============================
   ZOOM (SOFT SCALE)
================================= */
@keyframes zoomIn{
  from{opacity:0;transform:scale(.85);}
  to{opacity:1;transform:scale(1);}
}
.zoomIn{animation-name:zoomIn;}

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

/* ===============================
   SLIDE SERIES (LEBIH HALUS)
================================= */
@keyframes slideInUp{
  from{transform:translateY(60px);opacity:0;}
  to{transform:none;opacity:1;}
}
.slideInUp{animation-name:slideInUp;}

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

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

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

@keyframes slideOutUp{
  to{transform:translateY(-60px);opacity:0;}
}
.slideOutUp{animation-name:slideOutUp;}

@keyframes slideOutDown{
  to{transform:translateY(60px);opacity:0;}
}
.slideOutDown{animation-name:slideOutDown;}

@keyframes slideOutLeft{
  to{transform:translateX(-60px);opacity:0;}
}
.slideOutLeft{animation-name:slideOutLeft;}

@keyframes slideOutRight{
  to{transform:translateX(60px);opacity:0;}
}
.slideOutRight{animation-name:slideOutRight;}

/* ===============================
   ROTATE (SOFT)
================================= */
@keyframes rotateIn{
  from{opacity:0;transform:rotate(-8deg) scale(.95);}
  to{opacity:1;transform:none;}
}
.rotateIn{animation-name:rotateIn;}

@keyframes rotateOut{
  to{opacity:0;transform:rotate(8deg) scale(.95);}
}
.rotateOut{animation-name:rotateOut;}

/* ===============================
   UTILITY PERFORMANCE BOOST
================================= */
@media (prefers-reduced-motion: reduce){
  .animated{
    animation:none !important;
    transition:none !important;
  }
}