/* ===================================
   Animations (Based on Winkflo Official Theme)
   =================================== */

/* Spin Animation */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Preloading Animation */
@keyframes preloading {
  0% {
    transform-origin: 0% 50%;
    transform: scaleX(0);
    opacity: 0;
  }
  40% {
    transform-origin: 0% 50%;
    transform: scaleX(1);
    opacity: 1;
  }
  41% {
    transform-origin: 100% 50%;
    transform: scaleX(1);
    opacity: 1;
  }
  100% {
    transform-origin: 100% 50%;
    transform: scaleX(0);
    opacity: 1;
  }
}

/* Fade In */
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Fade Out */
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Zoom Fade */
@keyframes zoom-fade {
  0% {
    opacity: 0;
    transform: scale(1.3);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Rise Up */
@keyframes rise-up {
  0% {
    opacity: 1;
    transform: translateY(120%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Rise Up Out */
@keyframes rise-up-out {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    transform: translateY(-120%);
  }
}

/* Modal Open */
@keyframes modal-open {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Modal Closing */
@keyframes modal-closing {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.9);
  }
}

/* Overlay On */
@keyframes overlay-on {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.6;
  }
}

/* Overlay Off */
@keyframes overlay-off {
  0% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
  }
}

/* Placeholder Shimmer */
@keyframes placeholder-shimmer {
  0% {
    background-position: -150% 0;
  }
  100% {
    background-position: 150% 0;
  }
}

/* Shine Effect */
@keyframes shine {
  100% {
    left: -200%;
  }
}

/* Loading Animation */
@keyframes grid-product__loading {
  0% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Slideshow Bars */
@keyframes slideshowBars {
  0% {
    transform: translate(-100%);
  }
  100% {
    transform: translate(0);
  }
}

/* ===================================
   Animation Utility Classes
   =================================== */

.animate-fade-in {
  animation: fade-in 0.3s ease-in-out;
}

.animate-fade-out {
  animation: fade-out 0.3s ease-in-out;
}

.animate-zoom-fade {
  animation: zoom-fade 0.6s ease-out;
}

.animate-rise-up {
  animation: rise-up 0.4s ease-out;
}

.animate-modal-open {
  animation: modal-open 0.3s ease-out;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Loading Spinner */
.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: var(--colorDrawerButton);
  animation: spin 0.8s linear infinite;
}

/* Shimmer Effect for Loading Placeholders */
.shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: placeholder-shimmer 1.5s ease-in-out infinite;
}

/* Pulse Animation for Notifications */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.pulse {
  animation: pulse 2s ease-in-out infinite;
}