/* ============================================================
   Ultimate Quiz Fun — uqf-animations.css
   Keyframes and animation utilities
   ============================================================ */

/* --- Keyframes --- */
@keyframes uqf-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

@keyframes uqf-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.7; }
}

@keyframes uqf-spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes uqf-bounce-in {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes uqf-slide-up {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes uqf-slide-in-left {
  from { transform: translateX(-40px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes uqf-slide-in-right {
  from { transform: translateX(40px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

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

@keyframes uqf-shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes uqf-ripple {
  0% { transform: scale(0); opacity: 0.6; }
  100% { transform: scale(2.5); opacity: 0; }
}

@keyframes uqf-gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes uqf-blob {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25% { border-radius: 40% 60% 70% 30% / 30% 70% 40% 60%; }
  50% { border-radius: 30% 70% 40% 60% / 70% 40% 60% 30%; }
  75% { border-radius: 70% 30% 60% 40% / 40% 60% 30% 70%; }
}

@keyframes uqf-counter-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes uqf-progress-glow {
  0%, 100% { box-shadow: 0 0 6px rgba(74, 108, 247, 0.4); }
  50% { box-shadow: 0 0 16px rgba(74, 108, 247, 0.8); }
}

@keyframes uqf-wave-anim {
  0% { d: path('M0,120 C200,80 400,160 600,120 C800,80 1000,160 1200,120 L1200,200 L0,200 Z'); }
  50% { d: path('M0,140 C200,100 400,180 600,140 C800,100 1000,180 1200,140 L1200,200 L0,200 Z'); }
  100% { d: path('M0,120 C200,80 400,160 600,120 C800,80 1000,160 1200,120 L1200,200 L0,200 Z'); }
}

/* --- Animation Utility Classes --- */
.uqf-anim-float { animation: uqf-float 4s ease-in-out infinite; }
.uqf-anim-pulse { animation: uqf-pulse 2s ease-in-out infinite; }
.uqf-anim-spin-slow { animation: uqf-spin-slow 20s linear infinite; }
.uqf-anim-bounce-in { animation: uqf-bounce-in 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards; }
.uqf-anim-slide-up { animation: uqf-slide-up 0.5s ease forwards; }
.uqf-anim-fade-in { animation: uqf-fade-in 0.5s ease forwards; }

/* --- Staggered Animations --- */
.uqf-stagger-1 { animation-delay: 0.1s; }
.uqf-stagger-2 { animation-delay: 0.2s; }
.uqf-stagger-3 { animation-delay: 0.3s; }
.uqf-stagger-4 { animation-delay: 0.4s; }
.uqf-stagger-5 { animation-delay: 0.5s; }

/* --- Scroll Reveal States --- */
.uqf-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.uqf-reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.uqf-reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.uqf-reveal.uqf-revealed,
.uqf-reveal-left.uqf-revealed,
.uqf-reveal-right.uqf-revealed {
  opacity: 1;
  transform: translate(0);
}

/* Blob decorative shapes */
.uqf-blob-shape {
  position: absolute;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  animation: uqf-blob 12s ease-in-out infinite;
  opacity: 0.07;
  pointer-events: none;
}

.uqf-blob-shape-1 {
  width: 500px; height: 500px;
  background: var(--uqf-primary);
  top: -200px; right: -150px;
}

.uqf-blob-shape-2 {
  width: 350px; height: 350px;
  background: var(--uqf-secondary);
  bottom: -100px; left: -100px;
  animation-delay: -4s;
}

/* Shimmer for loading states */
.uqf-shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% auto;
  animation: uqf-shimmer 1.5s infinite;
}

/* Progress bar glow */
.uqf-progress-bar { animation: uqf-progress-glow 2s ease-in-out infinite; }

/* Hover lift */
.uqf-hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.uqf-hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(74,108,247,0.18);
}

/* Icon bounce on hover */
.uqf-icon-bounce {
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.uqf-icon-bounce:hover {
  transform: scale(1.15) rotate(-5deg);
}

/* Button ripple effect */
.uqf-btn-ripple {
  position: relative;
  overflow: hidden;
}

.uqf-btn-ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255,255,255,0.2);
  transform: scale(0);
  transition: transform 0.4s ease;
}

.uqf-btn-ripple:active::after {
  transform: scale(2);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

/* Particle dots (hero background) */
.uqf-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: uqf-float var(--duration, 6s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

/* Quiz option check animation */
.uqf-quiz-option.uqf-selected {
  animation: uqf-bounce-in 0.3s ease forwards;
}

/* Counter animation helper */
.uqf-animated-counter.uqf-counted {
  animation: uqf-counter-pop 0.4s ease;
}