/* Animation Canvas & Scene Renderer */
.animation-stage {
  width: 100%;
  height: 350px;
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
  margin-bottom: var(--spacing-md);
}

.anim-element {
  position: absolute;
  transition: all 0.5s linear;
}

.anim-sun {
  border-radius: 50%;
  box-shadow: 0 0 20px #ffeb3b;
  animation: pulseSun 4s infinite ease-in-out;
}

@keyframes pulseSun {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.anim-cloud {
  background: #ffffff;
  border-radius: 50px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  animation: floatCloud 6s infinite ease-in-out;
}

@keyframes floatCloud {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(15px); }
}

.anim-particle {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  animation: riseVapor 3s infinite linear;
}

@keyframes riseVapor {
  0% { transform: translateY(0); opacity: 0.2; }
  50% { opacity: 0.8; }
  100% { transform: translateY(-120px); opacity: 0; }
}

.anim-raindrop {
  width: 4px;
  height: 14px;
  border-radius: 2px;
  animation: fallRain 1.5s infinite linear;
}

@keyframes fallRain {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(140px); opacity: 0.2; }
}