/**
 * Inner pages hero — blue + green animated gradient (blue dominant).
 * Home (index) is unchanged; load this CSS only on non-home pages.
 */

@keyframes mopdicInnerHeroGradientShift {
  0%, 100% { background-position: 0% 50%, 0% 0%; }
  25% { background-position: 50% 0%, 50% 50%; }
  50% { background-position: 100% 50%, 100% 100%; }
  75% { background-position: 50% 100%, 50% 50%; }
}

.about-hero,
.jobs-hero,
.departments-hero {
  background:
    linear-gradient(
      135deg,
      rgba(50, 102, 181, 0.96) 0%,
      rgba(66, 124, 208, 0.93) 32%,
      rgba(59, 178, 60, 0.52) 50%,
      rgba(66, 124, 208, 0.92) 68%,
      rgba(50, 102, 181, 0.96) 100%
    ),
    linear-gradient(
      45deg,
      #1e3a5f 0%,
      #2855a0 16%,
      #427cd0 36%,
      #3bb23c 46%,
      #3266b5 58%,
      #2d5a87 72%,
      #427cd0 88%,
      #1e3a5f 100%
    ) !important;
  background-size: 400% 400%, 200% 200% !important;
  animation: mopdicInnerHeroGradientShift 15s ease infinite, heroGradientPulse 8s ease-in-out infinite !important;
}

.about-hero h1,
.departments-hero h1 {
  background: linear-gradient(135deg, #ffffff 0%, #c7e9ff 55%, #d4f5d6 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.about-hero .hero-eyebrow i,
.departments-hero .hero-eyebrow i,
.jobs-hero .hero-eyebrow i {
  box-shadow: 0 0 12px rgba(66, 124, 208, 0.55) !important;
}

@media (prefers-reduced-motion: reduce) {
  .about-hero,
  .jobs-hero,
  .departments-hero {
    animation: none !important;
  }
}