/* ==========================================================
   TRADITIONAL JAVANESE WEDDING - ANIMATIONS
   Adapted & Enhanced from Viding Theme 120
   ========================================================== */

/* --- Keyframes --- */

@keyframes fadeAnim {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes fadeRight {
  0% {
    transform: translate3d(-60px, 0, 0);
    opacity: 0;
  }
  100% {
    transform: translateZ(0);
    opacity: 1;
  }
}

@keyframes fadeLeft {
  0% {
    transform: translate3d(60px, 0, 0);
    opacity: 0;
  }
  100% {
    transform: translateZ(0);
    opacity: 1;
  }
}

@keyframes fadeUp {
  0% {
    transform: translate3d(0, 60px, 0);
    opacity: 0;
  }
  100% {
    transform: translateZ(0);
    opacity: 1;
  }
}

@keyframes fadeDown {
  0% {
    transform: translate3d(0, -50px, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes slideDown {
  0% {
    transform: translate3d(0, -40px, 0);
    opacity: 0;
  }
  100% {
    transform: translateZ(0);
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    transform: scale3d(0.6, 0.6, 0.6);
    opacity: 0;
  }
  100% {
    transform: scale3d(1, 1, 1);
    opacity: 1;
  }
}

@keyframes zoomInUp {
  0% {
    transform: translate3d(0, 60px, 0) scale3d(0.7, 0.7, 0.7);
    opacity: 0;
  }
  100% {
    transform: translateZ(0) scale3d(1, 1, 1);
    opacity: 1;
  }
}

@keyframes zoomOut {
  0% {
    transform: scale3d(1.18, 1.18, 1.18);
    opacity: 0;
  }
  100% {
    transform: scale3d(1, 1, 1);
    opacity: 1;
  }
}

@keyframes scrollAnim {
  0% {
    opacity: 0;
    transform: translate3d(0, -4px, 0);
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes spinDisc {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulseGold {
  0% {
    box-shadow: 0 0 0 0 rgba(197, 160, 89, 0.6);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(197, 160, 89, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(197, 160, 89, 0);
  }
}

@keyframes floatGentle {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* --- Animation Classes & Triggers --- */

.animation-invisible {
  opacity: 0;
  visibility: hidden;
}

[data-anim] {
  animation-duration: 1.2s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

[data-anim=fade].has-animate {
  animation-name: fadeAnim;
  visibility: visible !important;
}

[data-anim=fade-right].has-animate {
  animation-name: fadeRight;
  visibility: visible !important;
}

[data-anim=fade-left].has-animate {
  animation-name: fadeLeft;
  visibility: visible !important;
}

[data-anim=fade-up].has-animate {
  animation-name: fadeUp;
  visibility: visible !important;
}

[data-anim=fade-down].has-animate {
  animation-name: fadeDown;
  visibility: visible !important;
}

[data-anim=slide-down].has-animate {
  animation-name: slideDown;
  visibility: visible !important;
}

[data-anim=zoom-in].has-animate {
  animation-name: zoomIn;
  visibility: visible !important;
}

[data-anim=zoom-in-up].has-animate {
  animation-name: zoomInUp;
  visibility: visible !important;
}

[data-anim=zoom-out].has-animate {
  animation-name: zoomOut;
  visibility: visible !important;
}

/* Loop animations */
.animate-float {
  animation: floatGentle 4s ease-in-out infinite;
}

.animate-pulse-gold {
  animation: pulseGold 2.2s infinite;
}

.animate-spin-slow {
  animation: spinDisc 6s linear infinite;
}

.animate-paused {
  animation-play-state: paused !important;
}