/* ==========================================================
   Homepage-only enhancement — animated hero gradient
   Extends assets/css/main.css (load AFTER main.css)
   ========================================================== */

.hero{
  background:
    radial-gradient(60% 90% at 12% 8%, rgba(45,165,215,0.30), transparent 60%),
    radial-gradient(55% 80% at 92% 100%, rgba(28,138,184,0.26), transparent 60%),
    radial-gradient(70% 60% at 60% 40%, rgba(18,104,138,0.18), transparent 65%),
    var(--navy-900);
  background-size:200% 200%, 200% 200%, 200% 200%, auto;
  animation:heroGradientDrift 22s ease-in-out infinite;
}
@keyframes heroGradientDrift{
  0%{background-position:0% 0%, 100% 100%, 50% 50%, 0 0;}
  50%{background-position:30% 20%, 70% 80%, 60% 40%, 0 0;}
  100%{background-position:0% 0%, 100% 100%, 50% 50%, 0 0;}
}
@media (prefers-reduced-motion:reduce){
  .hero{animation:none;}
}