body {
  margin: 0;
  padding: 0;
  background: url('forest.jpg') no-repeat center center fixed;
  background-size: cover;
  font-family: 'Great Vibes', cursive;
  overflow: hidden;
  position: relative;
  height: 100vh;
}
.page-title {
  text-align: center;
  font-size: 4em;
  color: #000;
  text-shadow:
    0 0 10px #ffc6ff,
    0 0 20px #ffd6ff,
    0 0 40px #ffccff,
    0 0 60px #fff3ff;
  margin-top: 60px;
  z-index: 2;
  position: relative;
  animation: glowPulse 2s ease-in-out infinite, float 5s ease-in-out infinite;
}

h2 {
  text-align: center;
  font-size: 2em;
  color: #000;
  text-shadow:
      0 0 10px #ffc6ff,
      0 0 20px #ffd6ff,
      0 0 40px #ffccff,
      0 0 60px #fff3ff;
  animation: glowPulse 3s ease-in-out infinite, float 6s ease-in-out infinite;
} 


@keyframes glowPulse {
  0%, 100% { text-shadow: 0 0 10px #ffc6ff, 0 0 20px #ffd6ff, 0 0 40px #ffccff; }
  50% { text-shadow: 0 0 20px #fff0ff, 0 0 40px #ffe1ff, 0 0 80px #ffffff; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}
.magic-button {
  position: absolute;
  width: 100px;
  z-index: 3;
  cursor: pointer;
  filter: drop-shadow(0 0 10px #ffefb5);
  transition: transform 0.3s ease, filter 0.3s ease;
  animation: fairyFloat 4s ease-in-out infinite;
}

.magic-button:hover {
  transform: scale(1.25) rotate(2deg);
  filter: drop-shadow(0 0 25px #fff2b3);
}

@keyframes fairyFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Sparkle Trail */
.sparkle {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff, #ffe6ff, #ffd6f6);
  pointer-events: none;
  opacity: 0.9;
  animation: sparkleFade 1s linear forwards;
  z-index: 9999;
}

@keyframes sparkleFade {
  0% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
  100% {
    transform: scale(0.5) translateY(-20px);
    opacity: 0;
  }
}

/* Button positions */
#teacup { top: 250px; left: 10%; }
#purple-fairy { top: 400px; right: 15%; }
#green-fairy { bottom: 150px; left: 20%; }
#potion { bottom: 120px; right: 25%; }

.sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.9;
  filter: blur(1px);
  animation: sparkle-fade 1.2s linear forwards;
}

@keyframes sparkle-fade {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.8; }
  100% { transform: scale(0.8); opacity: 0; }
}