/*
 * Al Hafiz Online Quran Academy - Animations Stylesheet
 * Contains beautiful keyframes and transition helper classes
 */

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

@keyframes spin-slow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Logo Pulsing Glow */
@keyframes logo-glow {
  0% {
    transform: scale(0.95);
    filter: drop-shadow(0 0 5px rgba(197, 160, 89, 0.4));
  }
  100% {
    transform: scale(1.05);
    filter: drop-shadow(0 0 25px rgba(197, 160, 89, 0.8));
  }
}

/* Morphing Blob Background */
@keyframes morph {
  0% {
    border-radius: 43% 57% 70% 30% / 45% 45% 55% 55%;
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    border-radius: 70% 30% 50% 50% / 30% 60% 40% 70%;
    transform: translate(20px, -30px) rotate(180deg);
  }
  100% {
    border-radius: 43% 57% 70% 30% / 45% 45% 55% 55%;
    transform: translate(0, 0) rotate(360deg);
  }
}

/* Gentle Float */
@keyframes float {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-25px) rotate(5deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

/* Shimmer Glow effect */
.glow-effect {
  position: relative;
}

.glow-effect::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  box-shadow: 0 0 15px rgba(197, 160, 89, 0.3);
  opacity: 0;
  transition: var(--transition);
  pointer-events: none;
}

.glow-effect:hover::after {
  opacity: 1;
}

/* Fade In Transitions */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Sparkle Animation */
@keyframes sparkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

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