/* === FNHP: CSS-only fluid background (no WebGL/SVG) === */
/* Put this file in css/motion.css and include it after your main.css */

:root {
  --fnhp-blue: #0033a0;
  --fnhp-red:  #d62828;
  --bg-a: rgba(0,51,160,0.35);
  --bg-b: rgba(214,40,40,0.28);
}

#bg-css {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Two large radial gradients */
  background-image:
    radial-gradient(40% 40% at 25% 30%, var(--bg-a), rgba(0,0,0,0) 60%),
    radial-gradient(42% 42% at 75% 70%, var(--bg-b), rgba(0,0,0,0) 60%),
    linear-gradient(135deg, #0b1324, #10223a);
  background-size: 120% 120%, 120% 120%, cover;
  background-position: 25% 30%, 75% 70%, center;
  animation: fnhp-bg-move 24s ease-in-out infinite;
  overflow: hidden;
}

#bg-animation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

#bg-animation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.85;
}

@keyframes fnhp-bg-move {
  0%   { background-position: 24% 30%, 76% 70%, center; }
  50%  { background-position: 28% 26%, 72% 74%, center; }
  100% { background-position: 24% 30%, 76% 70%, center; }
}

/* Content above */
#app, main, footer, .hero, nav { position: relative; z-index: 10; }
.site-header { z-index: 30; }

/* Loader */
#fnhp-loader { position: fixed; inset: 0; z-index: 50; }
.loader{ opacity:1; transition:opacity .5s ease; }
.loader.hide{ opacity:0; pointer-events:none; }

@media (prefers-reduced-motion: reduce) {
  #bg-css { animation: none; }
}