/* Learning Magic — Enchanted Background & Sparkle Animations */

@keyframes magicFloatSlow {
  0%, 100% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(-16px) rotate(8deg) scale(1.08);
  }
}

@keyframes magicFloatReverse {
  0%, 100% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(14px) rotate(-10deg) scale(0.94);
  }
}

@keyframes magicTwinkle {
  0%, 100% {
    opacity: 0.25;
    transform: scale(0.8) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.25) rotate(45deg);
    filter: drop-shadow(0 0 8px rgba(255, 210, 63, 0.9));
  }
}

@keyframes magicTwinklePink {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.85) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.3) rotate(-35deg);
    filter: drop-shadow(0 0 10px rgba(255, 51, 133, 0.9));
  }
}

@keyframes magicTwinkleTeal {
  0%, 100% {
    opacity: 0.25;
    transform: scale(0.75) rotate(0deg);
  }
  50% {
    opacity: 0.95;
    transform: scale(1.2) rotate(30deg);
    filter: drop-shadow(0 0 8px rgba(0, 194, 203, 0.85));
  }
}

@keyframes rainbowShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes rainbowArcWave {
  0%, 100% {
    transform: scale(1) rotate(-2deg);
    opacity: 0.65;
  }
  50% {
    transform: scale(1.06) rotate(3deg);
    opacity: 0.85;
  }
}

@keyframes driftParticle {
  0% {
    transform: translateY(0) translateX(0) scale(0.8);
    opacity: 0;
  }
  20% {
    opacity: 0.8;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(-80px) translateX(25px) scale(1.1);
    opacity: 0;
  }
}

/* Container for enchanted ambient background */
.magic-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* Flowing rainbow aura behind heroes */
.magic-rainbow-aura {
  position: absolute;
  top: -20%;
  left: -10%;
  width: 120%;
  height: 140%;
  background: radial-gradient(
    circle at 30% 40%,
    rgba(255, 210, 63, 0.12) 0%,
    rgba(255, 51, 133, 0.10) 25%,
    rgba(0, 194, 203, 0.10) 50%,
    rgba(121, 40, 202, 0.08) 75%,
    transparent 100%
  );
  filter: blur(45px);
  animation: rainbowArcWave 12s ease-in-out infinite;
  z-index: 0;
}

/* Individual floating star & sparkle elements */
.magic-star-yellow {
  color: #FFD23F;
  filter: drop-shadow(0 2px 6px rgba(255, 210, 63, 0.4));
  animation: magicFloatSlow 6s ease-in-out infinite;
}

.magic-star-pink {
  color: #FF3385;
  filter: drop-shadow(0 2px 6px rgba(255, 51, 133, 0.4));
  animation: magicFloatReverse 7s ease-in-out infinite;
}

.magic-star-teal {
  color: #00C2CB;
  filter: drop-shadow(0 2px 6px rgba(0, 194, 203, 0.4));
  animation: magicFloatSlow 8s ease-in-out infinite;
}

.magic-star-purple {
  color: #7928CA;
  filter: drop-shadow(0 2px 6px rgba(121, 40, 202, 0.4));
  animation: magicFloatReverse 7.5s ease-in-out infinite;
}

.magic-glint-gold {
  color: #FFD23F;
  animation: magicTwinkle 3.2s ease-in-out infinite;
}

.magic-glint-pink {
  color: #FF3385;
  animation: magicTwinklePink 3.8s ease-in-out infinite;
}

.magic-glint-teal {
  color: #00C2CB;
  animation: magicTwinkleTeal 4.2s ease-in-out infinite;
}

/* Rainbow ribbon strip under headers */
.magic-rainbow-ribbon {
  height: 3px;
  background: linear-gradient(90deg, #FFD23F, #FF3385, #7928CA, #00C2CB, #FFD23F);
  background-size: 300% 100%;
  animation: rainbowShift 6s linear infinite;
}

/* Interactive cursor sparkle burst */
.cursor-sparkle {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  animation: cursorSparkleAnim 0.75s ease-out forwards;
}

@keyframes cursorSparkleAnim {
  0% {
    transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2) rotate(90deg);
    opacity: 0.9;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.4) rotate(180deg) translateY(20px);
    opacity: 0;
  }
}