/* css/weather-anim.css */

.ws-scene {
  width: 100%;
  height: 100%;
}
.ws-scene svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Base keyframes */
@keyframes ws-pulse-scale {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@keyframes ws-rotate-slow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes ws-drift {
  0% { transform: translateX(-6px); }
  100% { transform: translateX(6px); }
}

@keyframes ws-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

@keyframes ws-drop-fall {
  0% { transform: translateY(0); opacity: 1; }
  80% { transform: translateY(20px); opacity: 1; }
  100% { transform: translateY(25px); opacity: 0; }
}

@keyframes ws-snow-fall {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translate(calc(var(--sway, -10) * 1px), 30px); opacity: 0; }
}

@keyframes ws-flash {
  0%, 100% { opacity: 0; }
  1%, 5% { opacity: 1; }
  2%, 4% { opacity: 0; }
}

@keyframes ws-twinkle {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}

@keyframes ws-fog-slide {
  0% { transform: translateX(-10px); }
  100% { transform: translateX(10px); }
}

/* Elements */
.ws-sun circle {
  transform-box: fill-box;
  transform-origin: center;
}
.ws-sun-rays {
  transform-box: fill-box;
  transform-origin: center;
}
.ws-cloud {
  transform-box: fill-box;
  transform-origin: center;
}
.ws-drop, .ws-flake {
  transform-box: fill-box;
  transform-origin: center;
}

/* Animations applied unless static */
:not(.ws-static) .ws-sun circle { animation: ws-pulse-scale 4s ease-in-out infinite; }
:not(.ws-static) .ws-sun-rays { animation: ws-rotate-slow 60s linear infinite; }
:not(.ws-static) .ws-partly-cloudy .ws-cloud { animation: ws-drift 8s ease-in-out infinite alternate; }
:not(.ws-static) .ws-cloudy .ws-cloud-main { animation: ws-bob 6s ease-in-out infinite; }
:not(.ws-static) .ws-cloudy .ws-cloud-bg { animation: ws-drift 10s ease-in-out infinite alternate; }
:not(.ws-static) .ws-drop { animation: ws-drop-fall var(--dur) linear infinite; animation-delay: var(--d); }
:not(.ws-static) .ws-flake { animation: ws-snow-fall 3.5s ease-in-out infinite; animation-delay: var(--d); }
:not(.ws-static) .ws-lightning { animation: ws-flash 5s ease-out infinite; }
:not(.ws-static) .ws-cloud-flash { animation: ws-flash 5s ease-out infinite; }
:not(.ws-static) .ws-star { animation: ws-twinkle 3s ease-in-out infinite; animation-delay: var(--d); }
:not(.ws-static) .ws-fog-band { animation: ws-fog-slide 8s ease-in-out infinite alternate; animation-delay: var(--d); }

@media (prefers-reduced-motion: reduce) {
  .ws-sun circle, .ws-sun-rays, .ws-cloud, .ws-drop, .ws-flake, .ws-lightning, .ws-cloud-flash, .ws-star, .ws-fog-band {
    animation: none !important;
  }
}

/* ============================================================
   Ambient Layer
   ============================================================ */

/* Ambient Drops */
.amb-drop {
  position: absolute;
  top: -20px;
  width: 1px;
  background: rgba(255,255,255,var(--op, 0.15));
  left: calc(var(--x) * 1%);
  height: calc(var(--h) * 1px);
  transform: rotate(10deg);
  will-change: transform, opacity;
  animation: amb-drop-fall calc(var(--dur) * 1s) linear infinite;
  animation-delay: calc(var(--d) * -1s); /* negative delay to start immediately */
}
@keyframes amb-drop-fall {
  0% { transform: translateY(-20px) rotate(10deg); }
  100% { transform: translateY(500px) rotate(10deg); } /* Fall far enough past tile */
}

/* Ambient Snow */
.amb-flake {
  position: absolute;
  top: -10px;
  width: calc(var(--r) * 1px);
  height: calc(var(--r) * 1px);
  background: rgba(255,255,255,var(--op, 0.2));
  border-radius: 50%;
  left: calc(var(--x) * 1%);
  will-change: transform, opacity;
  animation: amb-snow-fall calc(var(--dur) * 1s) ease-in-out infinite;
  animation-delay: calc(var(--d) * -1s);
}
@keyframes amb-snow-fall {
  0% { transform: translate(0, -10px); }
  100% { transform: translate(calc(var(--sway) * 1px), 500px); }
}

/* Ambient Sun Glow */
.amb-sun-glow {
  position: absolute;
  top: -50px;
  left: -50px;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.15) 0%, rgba(251, 191, 36, 0) 70%);
  border-radius: 50%;
  animation: amb-pulse 6s ease-in-out infinite alternate;
}
@keyframes amb-pulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.1); opacity: 1; }
}

/* Ambient Stars */
.amb-star {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  width: 2px;
  height: 2px;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  animation: amb-twinkle 4s ease-in-out infinite;
  animation-delay: calc(var(--d) * -1s);
}
@keyframes amb-twinkle {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.6; }
}

/* Ambient Fog/Clouds */
.amb-cloud {
  position: absolute;
  top: calc(var(--y) * 1%);
  left: 0;
  width: 200%;
  height: 100px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.05), transparent);
  filter: blur(20px);
  animation: amb-drift calc(var(--dur) * 1s) ease-in-out infinite alternate;
  animation-delay: calc(var(--d) * -1s);
}
@keyframes amb-drift {
  0% { transform: translateX(-10%); }
  100% { transform: translateX(-40%); }
}

.paused .amb-drop, .paused .amb-flake, .paused .amb-sun-glow, .paused .amb-star, .paused .amb-cloud {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .amb-drop, .amb-flake, .amb-sun-glow, .amb-star, .amb-cloud {
    animation: none !important;
  }
}