/* ==========================================================================
   WHB Reveal Animations
   Semua elemen mulai hidden, class .whb-active ditambahkan oleh
   IntersectionObserver di whb-reveal.js saat elemen masuk viewport.
   ========================================================================== */

/* Fade In */
.whb-fade-in {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.whb-fade-in.whb-active {
  opacity: 1;
}

/* Muncul Atas (naik dari bawah) */
.whb-muncul-atas {
  transform: translateY(60px);
  opacity: 0;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s ease;
}
.whb-muncul-atas.whb-active {
  transform: translateY(0);
  opacity: 1;
}

/* Muncul Bawah (turun dari atas) */
.whb-muncul-bawah {
  transform: translateY(-60px);
  opacity: 0;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s ease;
}
.whb-muncul-bawah.whb-active {
  transform: translateY(0);
  opacity: 1;
}

/* Muncul Kiri */
.whb-muncul-kiri {
  position: relative;
  transform: translateX(-80px) scale(0.96);
  opacity: 0;
  transition: opacity 0.6s ease, transform 1s ease;
}
.whb-muncul-kiri.whb-active {
  transform: translateX(0) scale(1);
  opacity: 1;
}

/* Muncul Kanan */
.whb-muncul-kanan {
  position: relative;
  transform: translateX(80px) scale(0.96);
  opacity: 0;
  transition: opacity 0.6s ease, transform 1s ease;
}
.whb-muncul-kanan.whb-active {
  transform: translateX(0) scale(1);
  opacity: 1;
}

/* Muncul Kiri Atas (diagonal) */
.whb-muncul-kiri-atas {
  transform: translate(-60px, 40px);
  opacity: 0;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s ease;
}
.whb-muncul-kiri-atas.whb-active {
  transform: translate(0, 0);
  opacity: 1;
}

/* Muncul Kanan Atas (diagonal) */
.whb-muncul-kanan-atas {
  transform: translate(60px, 40px);
  opacity: 0;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s ease;
}
.whb-muncul-kanan-atas.whb-active {
  transform: translate(0, 0);
  opacity: 1;
}

/* Rotate In */
.whb-rotate-in {
  transform: rotate(-180deg);
  opacity: 0;
  transition: transform 1s ease-out, opacity 1s ease-out;
}
.whb-rotate-in.whb-active {
  transform: rotate(0deg);
  opacity: 1;
}

/* Flip X */
.whb-flip-x {
  transform: rotateX(90deg);
  opacity: 0;
  transition: transform 1s ease, opacity 1s ease;
}
.whb-flip-x.whb-active {
  transform: rotateX(0deg);
  opacity: 1;
}

/* Flip Y */
.whb-flip-y {
  transform: rotateY(90deg);
  opacity: 0;
  transition: transform 1s ease, opacity 1s ease;
}
.whb-flip-y.whb-active {
  transform: rotateY(0deg);
  opacity: 1;
}

/* Zoom In */
.whb-zoom-in {
  transform: scale(0.5);
  opacity: 0;
  transition: transform 1s ease, opacity 1s ease;
}
.whb-zoom-in.whb-active {
  transform: scale(1);
  opacity: 1;
}

/* Zoom Out */
.whb-zoom-out {
  transform: scale(1.5);
  opacity: 0;
  transition: transform 1s ease, opacity 1s ease;
}
.whb-zoom-out.whb-active {
  transform: scale(1);
  opacity: 1;
}

/* Blur In */
.whb-blur-in {
  filter: blur(10px);
  opacity: 0;
  transition: filter 1s ease, opacity 1s ease;
}
.whb-blur-in.whb-active {
  filter: blur(0);
  opacity: 1;
}

/* Slide Up Subtle */
.whb-slide-up-subtle {
  transform: translateY(30px);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
}
.whb-slide-up-subtle.whb-active {
  transform: translateY(0);
  opacity: 1;
}

/* Bounce In */
.whb-bounce-in {
  transform: scale(0.3);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s ease;
}
.whb-bounce-in.whb-active {
  transform: scale(1);
  opacity: 1;
}

/* Curtain Reveal (clip-path) */
.whb-curtain-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s cubic-bezier(0.83, 0, 0.17, 1);
}
.whb-curtain-reveal.whb-active {
  clip-path: inset(0 0 0 0);
}

/* ==========================================================================
   WHB Wipe Animations (replay setiap scroll masuk/keluar viewport)
   Beda dari animasi di atas: elemen ini balik ke hidden lagi saat keluar
   viewport, lalu muncul ulang saat di-scroll masuk lagi.
   ========================================================================== */

/* Wipe Up (reveal dari bawah ke atas) */
.whb-wipe-up {
  clip-path: inset(100% 0% 0% 0%);
  transition: clip-path 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.whb-wipe-up.whb-active {
  clip-path: inset(-2px);
}

/* Wipe Down (reveal dari atas ke bawah) */
.whb-wipe-down {
  clip-path: inset(0% 0% 100% 0%);
  transition: clip-path 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.whb-wipe-down.whb-active {
  clip-path: inset(-2px);
}

/* Wipe Left (reveal dari kanan ke kiri) */
.whb-wipe-left {
  clip-path: inset(0% 0% 0% 100%);
  transition: clip-path 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.whb-wipe-left.whb-active {
  clip-path: inset(-2px);
}

/* Wipe Right (reveal dari kiri ke kanan) */
.whb-wipe-right {
  clip-path: inset(0% 100% 0% 0%);
  transition: clip-path 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.whb-wipe-right.whb-active {
  clip-path: inset(-2px);
}