/* Weather grounding effects for footer: snow accumulation and rain puddles/ripples */

/* Ensure the footer can host absolutely positioned overlays */
footer.bg-dark {
  position: relative;
  overflow: visible; /* allow ripples to expand */
}

/* Ground effects container sits on top of footer content but doesn't capture clicks */
#footer-ground-effects {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px; /* visual ground band */
  pointer-events: none;
  z-index: 3;
}

/* Snow caps/piles along the footer bottom */
#footer-ground-effects .snow-cap {
  position: absolute;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.95), rgba(240,240,255,0.92));
  border-radius: 50% 50% 12px 12px / 60% 60% 20% 20%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 -2px 6px rgba(0,0,0,0.06);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.12));
}

/* Tiny flakes resting on headings/links could use caps with smaller sizes; optional:
#footer .footer-snow-cap { ... } */

/* Rain puddles are soft ellipses near the bottom, with subtle shimmer */
#footer-ground-effects .rain-puddle {
  position: absolute;
  bottom: 8px;
  transform: translateZ(0);
  background: radial-gradient(ellipse at center, rgba(180, 220, 255, 0.18) 0%, rgba(120, 170, 210, 0.10) 60%, rgba(120, 170, 210, 0.0) 70%);
  border-radius: 50%;
  filter: blur(0.2px) saturate(1.05);
  animation: puddleShimmer 4s ease-in-out infinite;
}

@keyframes puddleShimmer {
  0%, 100% { filter: saturate(1.0) brightness(1.0); }
  50% { filter: saturate(1.1) brightness(1.05); }
}

/* Ripples expand from puddles on impact */
#footer-ground-effects .rain-ripple {
  position: absolute;
  bottom: 10px;
  width: 20px;
  height: 10px;
  border: 2px solid rgba(200, 230, 255, 0.25);
  border-radius: 50%;
  transform: translate(-50%, 0) scale(0.6);
  opacity: 0;
  animation: rippleExpand 1.8s ease-out forwards;
}

@keyframes rippleExpand {
  0% { opacity: 0.35; transform: translate(-50%, 0) scale(0.6); }
  60% { opacity: 0.25; }
  100% { opacity: 0; transform: translate(-50%, 0) scale(2.3); }
}

/* Accessibility: respect reduced motion by disabling animations */
@media (prefers-reduced-motion: reduce) {
  #footer-ground-effects .rain-ripple,
  #footer-ground-effects .rain-puddle {
    animation: none !important;
  }
}

/* Hail ground pellets */
#footer-ground-effects .hail-pellet {
  position: absolute;
  bottom: 6px;
  width: 6px; height: 6px;
  background: radial-gradient(circle at 30% 30%, #fff, #cfd8dc);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* Falling hailstones (distinct from raindrops) */
.hailstone {
  position: absolute;
  top: -10px;
  background: radial-gradient(circle at 30% 30%, #ffffff, #cfd8dc 60%, #90a4ae 100%);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
  animation: fall-hail linear infinite;
}
@keyframes fall-hail {
  0% { transform: translateY(-10px); opacity: 0.9; }
  100% { transform: translateY(110vh); opacity: 0.9; }
}

/* Fog overlay: low-contrast mist across the page */
#fog-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 9;
  background: radial-gradient(ellipse at 50% 20%, rgba(255,255,255,0.05) 0%, rgba(200,200,200,0.10) 35%, rgba(200,200,200,0.15) 55%, rgba(200,200,200,0.10) 80%, rgba(200,200,200,0.04) 100%),
              linear-gradient(to bottom, rgba(200,200,200,0.08), rgba(180,180,180,0.06));
  opacity: 0.0;
  transition: opacity 1s ease;
}
#fog-overlay.visible { opacity: 1; }

/* Lightning overlay flash */
#lightning-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 12;
  background: linear-gradient(rgba(255,255,255,0.0), rgba(255,255,255,0.0));
  opacity: 0;
}
#lightning-overlay.flash { animation: lightningFlash 0.9s ease-out forwards; }
@keyframes lightningFlash {
  0% { opacity: 0; }
  10% { opacity: 0.95; background: rgba(255,255,255,0.95); }
  20% { opacity: 0.2; background: rgba(255,255,255,0.2); }
  30% { opacity: 0.7; background: rgba(255,255,255,0.7); }
  100% { opacity: 0; background: rgba(255,255,255,0); }
}

/* Heat haze shimmer overlay */
#heat-haze {
  position: fixed; inset: 0; pointer-events: none; z-index: 8;
  background: repeating-linear-gradient( to bottom, rgba(255, 200, 150, 0.03) 0, rgba(255, 200, 150, 0.03) 2px, rgba(255, 200, 150, 0.00) 4px);
  animation: heatShimmer 6s ease-in-out infinite;
}
@keyframes heatShimmer {
  0%,100% { filter: blur(0.0px) contrast(1); }
  50% { filter: blur(0.5px) contrast(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  #heat-haze { animation: none; }
}

/* Footer text damage styles */
footer.bg-dark.effect-freeze h5,
footer.bg-dark.effect-freeze a,
footer.bg-dark.effect-freeze address,
footer.bg-dark.effect-freeze p { 
  color: #e8f6ff !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4), 0 0 6px rgba(180,220,255,0.6);
}
footer.bg-dark.effect-freeze h5::after {
  content: '';
  display: block;
  margin: 6px auto 0;
  width: 60%; height: 6px;
  background: linear-gradient(to bottom, rgba(220,240,255,0.9), rgba(200,220,255,0.0));
  border-radius: 0 0 8px 8px;
}

footer.bg-dark.effect-wet h5,
footer.bg-dark.effect-wet a { 
  text-shadow: 0 0 8px rgba(120,180,255,0.35), 0 2px 8px rgba(0,0,0,0.25);
}
footer.bg-dark.effect-wet h5::after {
  content: '';
  position: relative; display: inline-block; left: 8px; top: 6px;
  width: 6px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #e3f2fd, #90caf9);
  animation: drip 2.6s ease-in infinite;
}
@keyframes drip {
  0% { transform: translateY(0); opacity: 1; }
  80% { transform: translateY(10px); opacity: 0.3; }
  100% { transform: translateY(14px); opacity: 0; }
}

footer.bg-dark.effect-rust h5,
footer.bg-dark.effect-rust a,
footer.bg-dark.effect-rust p { 
  color: #c56f34 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}

footer.bg-dark.effect-windy h5,
footer.bg-dark.effect-windy a { 
  display: inline-block;
  animation: sway 2.2s ease-in-out infinite;
  transform-origin: 50% 0%;
}
@keyframes sway {
  0%,100% { transform: rotate(0deg) translateX(0); }
  50% { transform: rotate(-1.2deg) translateX(-1px); }
}

footer.bg-dark.effect-heat h5,
footer.bg-dark.effect-heat a { 
  text-shadow: 0 0 6px rgba(255,140,0,0.25);
}

/* Forked lightning SVG stroke styling */
#lightning-svg { position: fixed; inset: 0; z-index: 13; pointer-events: none; }
#lightning-svg .bolt { fill: none; stroke: rgba(255,255,255,0.95); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(255,255,255,0.9)); }
#lightning-svg .bolt.dim { stroke: rgba(255,255,255,0.7); filter: drop-shadow(0 0 4px rgba(255,255,255,0.6)); }
.bolt-animate { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: boltDraw 180ms linear forwards, boltFade 1200ms ease-out forwards; }
@keyframes boltDraw { to { stroke-dashoffset: 0; } }
@keyframes boltFade { 0% { opacity: 1; } 70% { opacity: 0.5; } 100% { opacity: 0; } }

/* Rain splash particles near ground */
#footer-ground-effects .rain-splash {
  position: absolute; bottom: 14px; width: 4px; height: 8px;
  background: radial-gradient(circle at 30% 30%, rgba(220,240,255,0.9), rgba(120,170,210,0.4));
  border-radius: 50% 50% 40% 40%; transform-origin: 50% 100%;
  animation: splashUp 350ms ease-out forwards;
}
@keyframes splashUp { 0% { transform: translateY(0) scale(0.6); opacity: 0.9; } 100% { transform: translateY(-14px) scale(0.8); opacity: 0; } }
