/* Smooth Scroll */
html {
  scroll-behavior: smooth;
}

/* Keyframes */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

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

@keyframes pulseGlow {
  0% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.1); }
  50% { box-shadow: 0 0 40px rgba(34, 197, 94, 0.3); }
  100% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.1); }
}

/* Animation Classes */
.animate-fade-in {
  animation: fadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.game-container {
  animation: pulseGlow 4s infinite;
}

/* Ambient Particles (CSS only simple effect) */
.particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}

.particle {
  position: absolute;
  background: rgba(74, 222, 128, 0.2);
  border-radius: 50%;
  animation: float 10s infinite linear;
}

.particle:nth-child(1) { width: 10px; height: 10px; top: 20%; left: 10%; animation-duration: 8s; }
.particle:nth-child(2) { width: 15px; height: 15px; top: 60%; left: 80%; animation-duration: 12s; }
.particle:nth-child(3) { width: 8px; height: 8px; top: 80%; left: 30%; animation-duration: 6s; }