/* =============================================
   QAVIROXA - Animations Stylesheet
   Prefix: qx-
   ============================================= */

/* ---- Floating SVG Elements ---- */
.qx-float-element {
  animation: qx-float 6s ease-in-out infinite;
}

.qx-float-element-alt {
  animation: qx-float-alt 8s ease-in-out infinite;
}

@keyframes qx-float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-20px) rotate(5deg); }
  66% { transform: translateY(-10px) rotate(-3deg); }
}

@keyframes qx-float-alt {
  0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }
  50% { transform: translateY(-15px) rotate(-8deg) scale(1.05); }
}

/* ---- Pulse Effects ---- */
.qx-pulse-glow {
  animation: qx-pulse-glow 3s ease-in-out infinite;
}

@keyframes qx-pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(0, 229, 255, 0.6), 0 0 80px rgba(0, 229, 255, 0.2);
  }
}

.qx-pulse-ring {
  animation: qx-pulse-ring 2.5s ease-out infinite;
}

@keyframes qx-pulse-ring {
  0% {
    transform: scale(0.95);
    opacity: 1;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

/* ---- Gradient Animation ---- */
.qx-animated-gradient-bg {
  background: linear-gradient(
    135deg,
    #090d1a 0%,
    #0f1a35 25%,
    #1a0d35 50%,
    #0d1a28 75%,
    #090d1a 100%
  );
  background-size: 400% 400%;
  animation: qx-gradient-shift 15s ease infinite;
}

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

/* ---- SVG Divider Animations ---- */
.qx-svg-divider-wave path {
  animation: qx-wave-move 8s ease-in-out infinite;
}

@keyframes qx-wave-move {
  0%, 100% { d: path("M0,60 C180,90 360,30 540,60 C720,90 900,30 1080,60 L1080,120 L0,120 Z"); }
  50% { d: path("M0,80 C180,50 360,90 540,70 C720,50 900,90 1080,60 L1080,120 L0,120 Z"); }
}

/* ---- Loading Spinner ---- */
.qx-spinner-ring {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(0, 229, 255, 0.1);
  border-top-color: var(--qx-accent-cyan);
  border-radius: 50%;
  animation: qx-spin 0.8s linear infinite;
}

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

/* ---- Scan Line Effect ---- */
.qx-scan-lines {
  position: relative;
}

.qx-scan-lines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
  pointer-events: none;
  z-index: 1;
}

/* ---- Glitch Effect ---- */
.qx-glitch-text {
  position: relative;
}

.qx-glitch-text:hover {
  animation: qx-glitch 0.3s ease-in-out;
}

@keyframes qx-glitch {
  0%, 100% { clip-path: none; transform: none; }
  20% { clip-path: polygon(0 20%, 100% 20%, 100% 40%, 0 40%); transform: translate(-2px, 0); }
  40% { clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%); transform: translate(2px, 0); }
  60% { clip-path: none; transform: translate(-1px, 0); }
  80% { clip-path: polygon(0 10%, 100% 10%, 100% 30%, 0 30%); transform: translate(1px, 0); }
}

/* ---- Typewriter Cursor ---- */
.qx-typewriter-cursor::after {
  content: '|';
  animation: qx-blink-cursor 1s step-end infinite;
  color: var(--qx-accent-cyan);
}

@keyframes qx-blink-cursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ---- Shimmer Loading ---- */
.qx-shimmer {
  position: relative;
  overflow: hidden;
}

.qx-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 50%,
    transparent 100%
  );
  animation: qx-shimmer-move 2s ease-in-out infinite;
}

@keyframes qx-shimmer-move {
  to { left: 100%; }
}

/* ---- Quiz Card Flip ---- */
.qx-quiz-card-featured {
  perspective: 1000px;
}

.qx-quiz-card-inner {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  position: relative;
}

.qx-quiz-card-featured:hover .qx-quiz-card-inner {
  transform: rotateY(8deg) rotateX(2deg);
}

/* ---- Notification Slide-In ---- */
.qx-notification-toast {
  transform: translateX(120%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.qx-notification-toast.qx-toast-visible {
  transform: translateX(0);
}

/* ---- Page Transition ---- */
.qx-page-transition-overlay {
  position: fixed;
  inset: 0;
  background: var(--qx-bg-primary);
  z-index: 100000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* ---- Hero Particle Effect ---- */
.qx-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: qx-particle-drift var(--duration, 20s) linear infinite;
  opacity: 0;
}

@keyframes qx-particle-drift {
  0% {
    transform: translateY(100vh) translateX(0) scale(0);
    opacity: 0;
  }
  10% { opacity: var(--opacity, 0.6); }
  90% { opacity: var(--opacity, 0.6); }
  100% {
    transform: translateY(-100px) translateX(var(--drift, 50px)) scale(1);
    opacity: 0;
  }
}

/* ---- SVG Animated Icons ---- */
.qx-icon-spin-slow {
  animation: qx-spin 8s linear infinite;
}

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

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

/* ---- Quiz Progress Ring Animation ---- */
.qx-score-ring-fill {
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.qx-score-ring-fill.qx-ring-animated {
  stroke-dashoffset: calc(283 - (283 * var(--score-pct, 0)) / 100);
}

/* ---- Badge Spin-Glow ---- */
.qx-badge-challenge-glow {
  animation: qx-badge-glow 4s ease-in-out infinite;
}

@keyframes qx-badge-glow {
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(255, 215, 64, 0.4));
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(255, 215, 64, 0.8)) drop-shadow(0 0 40px rgba(255, 215, 64, 0.3));
  }
}

/* ---- Hover Scale Card ---- */
.qx-hover-scale {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.qx-hover-scale:hover {
  transform: scale(1.03);
}

/* ---- Border Gradient Animation ---- */
.qx-border-gradient-animated {
  position: relative;
}

.qx-border-gradient-animated::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(
    var(--angle, 0deg),
    var(--qx-accent-cyan),
    var(--qx-accent-purple),
    var(--qx-accent-magenta),
    var(--qx-accent-cyan)
  );
  background-size: 300% 300%;
  animation: qx-border-rotate 6s linear infinite;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.qx-border-gradient-animated:hover::before { opacity: 1; }

@keyframes qx-border-rotate {
  to { --angle: 360deg; }
}

/* ---- Stats Counter Tick ---- */
.qx-counter-tick {
  animation: qx-counter-pop 0.1s ease-out;
}

@keyframes qx-counter-pop {
  0% { transform: scale(1.1); }
  100% { transform: scale(1); }
}