/* =========================================================
   DNN HERO SECTION 28 — WAVE GRID PULSE BACKGROUND
   Author: AZ Managed IT
   Version: v20251110-wavegrid
   ========================================================= */

.dnn-hero-s28 {
  --bg: #0f0f0f;
  --line: rgba(0, 191, 255, 0.05);
  position: relative;
  background: var(--bg);
  border-top: 1px solid #111;
  overflow: hidden;
  width: 100%;
  height: 470px;
  isolation: isolate;
}

/* ===== GRID LAYER ===== */
.dnn-hero-s28 .servergrid-bg {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 28px);
  opacity: 0.85;
  animation: gridWavePulse 36s ease-in-out infinite;
  will-change: background-position, filter, opacity;
}

/* ===== AURORA OVERLAY ===== */
.dnn-hero-s28::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 35% 40%, rgba(0,191,255,0.18), transparent 60%),
    radial-gradient(circle at 70% 60%, rgba(30,144,255,0.14), transparent 55%);
  mix-blend-mode: screen;
  opacity: 0.7;
  animation: auroraFlow 60s ease-in-out infinite alternate;
}

/* ===== SOFT GRADIENT SHADE ===== */
.dnn-hero-s28::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.65) 0%,
    rgba(0,0,0,0.8) 45%,
    rgba(0,191,255,0.05) 100%
  );
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ===== KEYFRAMES ===== */

/* Subtle vertical shimmer + pulse */
@keyframes gridWavePulse {
  0% {
    background-position: 0 0, 0 0;
    opacity: 0.8;
    filter: brightness(1);
  }
  25% {
    background-position: 0 20px, 20px 0;
    opacity: 0.9;
    filter: brightness(1.05);
  }
  50% {
    background-position: 0 40px, 40px 0;
    opacity: 1;
    filter: brightness(1.15);
  }
  75% {
    background-position: 0 20px, 20px 0;
    opacity: 0.9;
    filter: brightness(1.05);
  }
  100% {
    background-position: 0 0, 0 0;
    opacity: 0.8;
    filter: brightness(1);
  }
}

/* Aurora drift movement */
@keyframes auroraFlow {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-25px, 20px) scale(1.08); }
  100% { transform: translate(20px, -25px) scale(1); }
}