body {
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% -18%, rgba(255, 255, 255, 0.085), transparent 34%),
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.04), transparent 36%),
    radial-gradient(circle at 0% 45%, rgba(255, 255, 255, 0.035), transparent 32%),
    radial-gradient(circle at 100% 50%, rgba(255, 255, 255, 0.03), transparent 34%),
    linear-gradient(180deg, #0a0b0c 0%, #050607 46%, #020304 100%);
}

body::before,
body::after {
  position: fixed;
  top: -8vh;
  z-index: 0;
  width: min(46vw, 760px);
  height: 116vh;
  content: "";
  pointer-events: none;
  background: url("/ambient-lines.svg") center / 100% 100% no-repeat;
  filter: saturate(0) contrast(1.22) drop-shadow(0 0 18px rgba(255, 255, 255, 0.08));
  opacity: 0.56;
  will-change: transform, opacity;
  animation: iisy-field-left 30s ease-in-out infinite alternate;
  mask-image: linear-gradient(90deg, black 0%, black 38%, rgba(0, 0, 0, 0.5) 58%, transparent 86%);
}

body::before {
  left: 0;
  top: -14vh;
  transform: translate3d(-28%, 4vh, 0) scaleY(-1) rotate(-3deg) scale(1.05);
  transform-origin: center;
}

body::after {
  right: 0;
  opacity: 0.46;
  transform: translate3d(26%, 3vh, 0) scaleX(-1) scale(1.05);
  animation-name: iisy-field-right;
  animation-duration: 36s;
}

.page {
  position: relative;
  z-index: 1;
}

.shell {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.01)),
    rgba(8, 9, 10, 0.82);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.022) inset,
    0 36px 100px rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(18px);
}

.shell::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 82% 14%, rgba(255, 255, 255, 0.07), transparent 24%),
    radial-gradient(circle at 16% 62%, rgba(255, 255, 255, 0.032), transparent 28%);
}

.shell > * {
  position: relative;
  z-index: 1;
}

.legal-hero > * {
  position: relative;
  z-index: 1;
}

.hero::after,
.legal-hero::after {
  animation: iisy-radar 18s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

@keyframes iisy-field-left {
  0% {
    opacity: 0.42;
    transform: translate3d(-29%, 5vh, 0) scaleY(-1) rotate(-3deg) scale(1.035);
  }
  100% {
    opacity: 0.58;
    transform: translate3d(-24%, 1vh, 0) scaleY(-1) rotate(-1deg) scale(1.075);
  }
}

@keyframes iisy-field-right {
  0% {
    opacity: 0.34;
    transform: translate3d(27%, 4vh, 0) scaleX(-1) scale(1.025);
  }
  100% {
    opacity: 0.52;
    transform: translate3d(21%, 0, 0) scaleX(-1) scale(1.07);
  }
}

@keyframes iisy-radar {
  0% {
    opacity: 0.06;
    transform: translate3d(0, 0, 0) scale(0.985);
  }
  100% {
    opacity: 0.105;
    transform: translate3d(-10px, 8px, 0) scale(1.025);
  }
}

@media (max-width: 820px) {
  body::before,
  body::after {
    width: 78vw;
    opacity: 0.18;
  }

  body::after {
    opacity: 0.2;
  }

  .shell {
    backdrop-filter: blur(12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  .hero::after,
  .legal-hero::after {
    animation: none;
  }
}