/* ==========================================================================
   WowLaos - Animations
   ========================================================================== */

@keyframes vl-slide-down {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes vl-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes vl-fade-in-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes vl-pop-in {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes vl-spin {
  to { transform: rotate(360deg); }
}

@keyframes vl-marquee {
  to { transform: translateX(-100%); }
}

@keyframes vl-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(212, 175, 55, 0); }
}

@keyframes vl-logo-glow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.25)); }
  50% { filter: drop-shadow(0 0 14px rgba(212, 175, 55, 0.6)); }
}

@keyframes vl-pulse-glow-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.55); }
  50% { box-shadow: 0 0 0 5px rgba(46, 204, 113, 0); }
}

@keyframes vl-card-shine {
  0%, 15% { transform: translateX(-60%); }
  55%, 100% { transform: translateX(60%); }
}

@keyframes vl-shimmer {
  0% { background-position: -300px 0; }
  100% { background-position: 300px 0; }
}

@keyframes vl-progress-indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

.vl-animate-fade-in { animation: vl-fade-in var(--vl-transition-slow) both; }
.vl-animate-fade-in-up { animation: vl-fade-in-up var(--vl-transition-slow) both; }
.vl-animate-pop-in { animation: vl-pop-in var(--vl-transition-base) both; }

.vl-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.09) 37%, rgba(255,255,255,0.04) 63%);
  background-size: 400% 100%;
  animation: vl-shimmer 1.4s ease infinite;
  border-radius: var(--vl-radius-md);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}