/* Storm FX (rain + cats & dogs + lightning + wind + shake)
   Safe to include on any page; it only activates when body has class "fx-storm". */

body.fx-storm{
  overflow:hidden; /* keep the rain canvas clean */
}

/* Fullscreen canvas for particles */
#fxCanvas.fx-canvas{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:1;              /* above page background, below content */
  pointer-events:none;
}

/* Lightning overlay */
#fxFlash.fx-flash{
  position:fixed;
  inset:-20vh -20vw; /* larger than screen to avoid edges */
  z-index:50;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.95), rgba(255,255,255,0.00) 55%),
    radial-gradient(circle at 70% 35%, rgba(255,255,255,0.60), rgba(255,255,255,0.00) 60%),
    linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.00) 55%);
  mix-blend-mode:screen;
}

#fxFlash.is-flashing{
  animation: fx-flash 750ms ease-out 1;
}

@keyframes fx-flash{
  0%   { opacity:0; }
  5%   { opacity:0.95; }
  15%  { opacity:0.10; }
  25%  { opacity:0.75; }
  40%  { opacity:0.06; }
  55%  { opacity:0.45; }
  100% { opacity:0; }
}

/* Wind: gently sway your existing .bg layer if present */


@keyframes fx-wind-sway{
  0%   { transform: translate3d(0,0,0) skewX(0deg); }
  18%  { transform: translate3d(-10px,0,0) skewX(-0.6deg); }
  42%  { transform: translate3d(14px,0,0) skewX(0.9deg); }
  70%  { transform: translate3d(-8px,0,0) skewX(-0.4deg); }
  100% { transform: translate3d(0,0,0) skewX(0deg); }
}

/* Shake the form card on lightning */
.fx-shake{
  animation: fx-shake 450ms cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes fx-shake{
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d( 2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d( 4px, 0, 0); }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce){
  #fxCanvas.fx-canvas{ display:none !important; }
  #fxFlash.fx-flash{ display:none !important; }
  body.fx-storm .bg{ animation:none !important; }
  .fx-shake{ animation:none !important; }
}