/* Pyro Animations */
.pyro > .before {
  animation: 1s bang ease-out infinite backwards, 
            1s gravity ease-in infinite backwards, 
            5s position linear infinite backwards;
}

.pyro > .after {
  animation: 1.25s bang ease-out infinite backwards, 
            1.25s gravity ease-in infinite backwards, 
            6.25s position linear infinite backwards;
}

@keyframes bang {
  from {
    box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white;
  }
}

@keyframes gravity {
  to {
    transform: translateY(200px);
    opacity: 0;
  }
}

@keyframes position {
  0%, 19.9% { margin-top: 10%; margin-left: 40%; }
  20%, 39.9% { margin-top: 40%; margin-left: 30%; }
  40%, 59.9% { margin-top: 20%; margin-left: 70%; }
  60%, 79.9% { margin-top: 30%; margin-left: 20%; }
  80%, 99.9% { margin-top: 30%; margin-left: 80%; }
}

/* Sparkle Effects */
.sparkle {
  animation: sparkle 2s infinite;
}

@keyframes sparkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Floating Animation */
.floating {
  animation: floating 3s ease-in-out infinite;
}

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

/* Shine Effect */
a.gold-text.sparkle:hover {
  animation: shine 1.5s infinite;
}

@keyframes shine {
  0% { text-shadow: 0 0 10px var(--gold); }
  50% { text-shadow: 0 0 20px var(--gold), 0 0 30px var(--gold); }
  100% { text-shadow: 0 0 10px var(--gold); }
}