:root {
  --page-bg: #f6f8fa;
}

body {
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 22% 18%, rgb(9 105 218 / 5%), transparent 28%),
    radial-gradient(circle at 78% 32%, rgb(31 35 40 / 4%), transparent 30%),
    linear-gradient(180deg, #fbfcfd 0%, var(--page-bg) 58%, #f3f6f8 100%);
}

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

.ambient-bg::before {
  content: '';
  position: absolute;
  inset: 12% 8%;
  background:
    radial-gradient(ellipse at 18% 28%, rgb(9 105 218 / 7%), transparent 36%),
    radial-gradient(ellipse at 86% 58%, rgb(84 174 255 / 6%), transparent 34%),
    linear-gradient(115deg, transparent 0 44%, rgb(9 105 218 / 4%) 44.4% 44.8%, transparent 45.2%);
  filter: blur(10px);
  opacity: 0.9;
  animation: ambient-breathe 18s ease-in-out infinite;
}

.ambient-stream {
  --stream-angle: -14deg;
  --stream-drift-duration: 24s;
  --stream-flow-duration: 6.4s;
  --stream-glint-left: 38%;
  position: absolute;
  width: clamp(260px, 34vw, 560px);
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgb(9 105 218 / 4%) 14%,
    rgb(9 105 218 / 18%) 25%,
    rgb(87 96 106 / 10%) 34%,
    transparent 46%,
    transparent 58%,
    rgb(84 174 255 / 14%) 72%,
    transparent 88%
  );
  background-size: 260% 100%;
  opacity: 0.42;
  transform: translateX(-80px) rotate(var(--stream-angle));
  animation:
    ambient-stream-drift var(--stream-drift-duration) linear infinite,
    ambient-stream-flow var(--stream-flow-duration) linear infinite;
}

.ambient-stream::after {
  content: '';
  position: absolute;
  top: -2px;
  left: var(--stream-glint-left, 38%);
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgb(9 105 218 / 34%);
  box-shadow: 0 0 18px rgb(9 105 218 / 18%);
  animation: ambient-stream-glint 4.8s ease-in-out infinite;
}

.ambient-stream-a {
  top: 19%;
  left: -8%;
  animation-delay:
    -4s,
    -1.6s;
}

.ambient-stream-b {
  --stream-angle: -10deg;
  --stream-drift-duration: 30s;
  --stream-flow-duration: 7.6s;
  top: 72%;
  right: -12%;
  width: clamp(300px, 38vw, 620px);
  animation-delay:
    -15s,
    -3.4s;
}

.ambient-stream-c {
  --stream-angle: 12deg;
  --stream-drift-duration: 34s;
  --stream-flow-duration: 8.8s;
  top: 38%;
  right: 10%;
  width: clamp(180px, 22vw, 360px);
  opacity: 0.26;
  animation-delay:
    -9s,
    -5.2s;
}

.ambient-surface {
  position: relative;
  z-index: 1;
}

@media (max-width: 760px) {
  .ambient-bg {
    opacity: 0.74;
  }

  .ambient-stream-a {
    left: -34%;
  }

  .ambient-stream-b {
    right: -38%;
  }

  .ambient-stream-c {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-bg::before,
  .ambient-stream,
  .ambient-stream::after {
    animation: none !important;
  }
}

@keyframes ambient-breathe {
  0%,
  100% {
    opacity: 0.64;
    transform: scale(1);
  }

  50% {
    opacity: 0.92;
    transform: scale(1.025);
  }
}

@keyframes ambient-stream-drift {
  0% {
    opacity: 0.12;
    transform: translateX(-90px) rotate(var(--stream-angle));
  }

  40%,
  62% {
    opacity: 0.46;
  }

  100% {
    opacity: 0.12;
    transform: translateX(90px) rotate(var(--stream-angle));
  }
}

@keyframes ambient-stream-flow {
  from {
    background-position: 180% 0;
  }

  to {
    background-position: -80% 0;
  }
}

@keyframes ambient-stream-glint {
  0%,
  100% {
    opacity: 0.32;
    transform: scale(0.82);
  }

  50% {
    opacity: 0.78;
    transform: scale(1);
  }
}