/* =========================================================
   substrate.css
   SecureLynx Substrate Environmental Layer
   ========================================================= */

.site-shell {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 22%, rgba(0, 230, 255, 0.12), transparent 34%),
    radial-gradient(circle at 40% 85%, rgba(0, 102, 255, 0.08), transparent 32%),
    linear-gradient(180deg, #05070D 0%, #08101C 42%, #05070D 100%);
}

.substrate-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.substrate-grid {
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(0, 230, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 230, 255, 0.04) 1px, transparent 1px);
  background-size: 82px 82px;
  mask-image: radial-gradient(circle at 65% 35%, black, transparent 68%);
}

.substrate-network {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, transparent 0%, rgba(0, 230, 255, 0.09) 50%, transparent 100%);
  opacity: 0.34;
  transform: translateX(-60%);
  animation: resonanceSweep 14s linear infinite;
}

.substrate-orb {
  position: absolute;
  right: 7vw;
  top: 12vh;
  width: min(58vw, 720px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(0, 230, 255, 0.12);
  box-shadow:
    inset 0 0 90px rgba(0, 230, 255, 0.055),
    0 0 90px rgba(0, 230, 255, 0.08);
  animation: slowRotate 26s linear infinite;
}

.substrate-orb::before,
.substrate-orb::after {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 1px solid rgba(0, 230, 255, 0.08);
}

.substrate-points {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(0, 230, 255, 0.7) 1px, transparent 1.5px);
  background-size: 116px 116px;
  opacity: 0.18;
  animation: drift 18s ease-in-out infinite alternate;
}

main,
.site-header {
  position: relative;
  z-index: 2;
}

@keyframes resonanceSweep {
  to {
    transform: translateX(100%);
  }
}

@keyframes slowRotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes drift {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-20px, 18px, 0);
  }
}