/**
 * Subset Animate.css 3.x — kompatibel dengan WOW.js (kelas .animated + nama animasi).
 * Dipakai di home / home-light seperti pola home-old.php (wow fadeInUp, slideInLeft, zoomIn).
 */

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp {
  animation-name: fadeInUp;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.slideInLeft {
  animation-name: slideInLeft;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.slideInRight {
  animation-name: slideInRight;
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

.zoomIn {
  animation-name: zoomIn;
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }
}

.fadeOutDown {
  animation-name: fadeOutDown;
}

@keyframes slideOutLeft {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
    visibility: hidden;
  }
}

.slideOutLeft {
  animation-name: slideOutLeft;
}

@keyframes slideOutRight {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
    visibility: hidden;
  }
}

.slideOutRight {
  animation-name: slideOutRight;
}

@keyframes zoomOut {
  from {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }

  to {
    opacity: 0;
    transform: scale3d(0.85, 0.85, 0.85);
  }
}

.zoomOut {
  animation-name: zoomOut;
}

/* Hero image: subtle slide-in dari kanan (selaras dengan animasi hero home.php) */
@keyframes heroSlideInRight {
  from {
    opacity: 0;
    transform: translate3d(72px, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.heroSlideInRight {
  animation-name: heroSlideInRight;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes heroSlideOutRight {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(72px, 0, 0);
  }
}

.heroSlideOutRight {
  animation-name: heroSlideOutRight;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .wow {
    visibility: visible !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .animated {
    animation: none !important;
  }
}