/* A continuous, gently moving Zimbabwe development setting for the Network page. */
body.network-page {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  background: #edf5f0;
}

body.network-page::before,
body.network-page::after {
  position: fixed;
  pointer-events: none;
  content: "";
}

body.network-page::before {
  inset: -5%;
  z-index: -2;
  background-image:
    linear-gradient(118deg, rgba(255, 253, 249, 0.28), rgba(233, 246, 239, 0.2)),
    image-set(
      url("assets/zgtn-development-background-960.webp") 1x,
      url("assets/zgtn-development-background-1440.webp") 2x
    );
  background-position: center, 48% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  filter: saturate(0.94) contrast(1.02);
  transform: scale(1.045);
  will-change: background-position, transform;
}

body.network-page::after {
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 253, 248, 0.64), transparent 34%),
    radial-gradient(circle at 82% 68%, rgba(218, 239, 227, 0.28), transparent 30%);
  opacity: 0.9;
  will-change: opacity, transform;
}

body.network-page > :is(.site-header, main, .site-footer) {
  position: relative;
  z-index: 1;
}

body.network-page main {
  background: transparent !important;
}

body.network-page main > .network-hero {
  background: rgba(247, 251, 248, 0.34);
  backdrop-filter: blur(1px);
}

body.network-page main > .network-workflow {
  background: rgba(255, 253, 249, 0.66) !important;
  backdrop-filter: blur(2.5px);
}

body.network-page main > .network-in-motion {
  background: rgba(242, 249, 245, 0.63) !important;
  backdrop-filter: blur(2.5px);
}

body.network-page main > .network-impact-panel {
  background: rgba(255, 253, 249, 0.48) !important;
  backdrop-filter: blur(1.5px);
}

body.network-page .network-sector-grid a {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
}

body.network-page .site-footer {
  background: rgba(248, 252, 249, 0.78) !important;
  backdrop-filter: blur(9px);
}

@media (prefers-reduced-motion: no-preference) {
  body.network-page::before {
    animation: zgtn-network-background-drift 30s ease-in-out infinite alternate;
  }

  body.network-page::after {
    animation: zgtn-network-light-shift 18s ease-in-out infinite alternate;
  }

  @keyframes zgtn-network-background-drift {
    from {
      background-position: center, 44% 51%;
      transform: scale(1.045);
    }
    to {
      background-position: center, 57% 47%;
      transform: scale(1.09);
    }
  }

  @keyframes zgtn-network-light-shift {
    from {
      opacity: 0.78;
      transform: translate3d(-1%, 0, 0) scale(1.01);
    }
    to {
      opacity: 0.96;
      transform: translate3d(1%, -1%, 0) scale(1.04);
    }
  }
}

@media (max-width: 760px) {
  body.network-page::before {
    inset: -8%;
    background-position: center, 62% 50%;
    transform: scale(1.08);
  }

  body.network-page::after {
    background:
      radial-gradient(circle at 16% 12%, rgba(255, 253, 248, 0.7), transparent 38%),
      radial-gradient(circle at 78% 72%, rgba(218, 239, 227, 0.22), transparent 34%);
  }

  body.network-page main > .network-hero {
    background: rgba(247, 251, 248, 0.46);
  }

  body.network-page main > :is(.network-workflow, .network-in-motion) {
    background: rgba(250, 252, 249, 0.72) !important;
    backdrop-filter: blur(2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.network-page::before,
  body.network-page::after {
    animation: none;
    will-change: auto;
  }
}