/* Variabel Global */
:root {
  --animation-duration: 1s; /* Durasi animasi default */
  --animation-delay: 0s; /* Delay animasi default */
}

/* General Styles */
.wdpal-fade-in,
.wdpal-muncul-atas,
.wdpal-muncul-bawah,
.wdpal-muncul-kiri,
.wdpal-muncul-kanan,
.wdpal-rotate-in,
.wdpal-flip-x,
.wdpal-flip-y,
.wdpal-zoom-in,
.wdpal-zoom-out {
  opacity: 0;
  position: relative;
  z-index: 1;
}

/* None (No Animation) */
.wdpal-none {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Fade In */
.wdpal-fade-in {
  transition: opacity var(--animation-duration) ease-in-out;
  transition-delay: var(--animation-delay);
}

.wdpal-fade-in.active {
  opacity: 1;
}

/* Muncul Dari Atas */
.wdpal-muncul-atas {
  transform: translateY(100%);
  transition: transform var(--animation-duration) ease, opacity var(--animation-duration) ease;
  transition-delay: var(--animation-delay);
}

.wdpal-muncul-atas.active {
  transform: translateY(0);
  opacity: 1;
}

/* Muncul Dari Bawah */
.wdpal-muncul-bawah {
  transform: translateY(-100%);
  transition: transform var(--animation-duration) ease, opacity var(--animation-duration) ease;
  transition-delay: var(--animation-delay);
}

.wdpal-muncul-bawah.active {
  transform: translateY(0);
  opacity: 1;
}

/* Muncul Dari Kiri */
.wdpal-muncul-kiri {
  transform: translateX(-100%) scale(0.93);
  transition: transform var(--animation-duration) ease, opacity var(--animation-duration) ease;
  transition-delay: var(--animation-delay);
}

.wdpal-muncul-kiri.active {
  transform: translateX(0);
  opacity: 1;
}

/* Muncul Dari Kanan */
.wdpal-muncul-kanan {
  transform: translateX(100%) scale(0.93);
  transition: transform var(--animation-duration) ease, opacity var(--animation-duration) ease;
  transition-delay: var(--animation-delay);
}

.wdpal-muncul-kanan.active {
  transform: translateX(0);
  opacity: 1;
}

/* Rotate In */
.wdpal-rotate-in {
  transform: rotate(-180deg);
  transition: transform var(--animation-duration) ease-out, opacity var(--animation-duration) ease-out;
  transition-delay: var(--animation-delay);
}

.wdpal-rotate-in.active {
  transform: rotate(0deg);
  opacity: 1;
}

/* Flip X */
.wdpal-flip-x {
  transform: rotateX(90deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--animation-duration) ease, opacity var(--animation-duration) ease;
  transition-delay: var(--animation-delay);
}

.wdpal-flip-x.active {
  transform: rotateX(0deg);
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
}

/* Flip Y */
.wdpal-flip-y {
  transform: rotateY(90deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--animation-duration) ease, opacity var(--animation-duration) ease;
  transition-delay: var(--animation-delay);
}

.wdpal-flip-y.active {
  transform: rotateY(0deg);
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
}

/* Zoom In */
.wdpal-zoom-in {
  transform: scale(0.5);
  transition: transform var(--animation-duration) ease, opacity var(--animation-duration) ease;
  transition-delay: var(--animation-delay);
}

.wdpal-zoom-in.active {
  transform: scale(1);
  opacity: 1;
}

/* Zoom Out */
.wdpal-zoom-out {
  transform: scale(1.5);
  transition: transform var(--animation-duration) ease, opacity var(--animation-duration) ease;
  transition-delay: var(--animation-delay);
}

.wdpal-zoom-out.active {
  transform: scale(1);
  opacity: 1;
}