/* ===== Tunables ===== */
:root{
  --blue-0:#07122b;   /* darkest corners */
  --blue-1:#0a1c3d;   /* base */
  --blue-2:#0f2b6a;   /* mid */
  --cyan  :#22c1ff;   /* sweep color core */
  --accent:#4aa8ff;   /* edge tint */

  --vignette: rgba(0,0,0,.55);
  --grain: rgba(255,255,255,.02);

  /* motion */
  --dur-1: 9s;   /* main bar */
  --dur-2: 12s;  /* secondary bar */
  --dur-3: 16s;  /* wide soft bar */
  --dur-4: 20s;  /* long faint bar */
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; overflow:hidden; background:var(--blue-1)}

/* ===== Base background + glow + vignette ===== */
.bg{
  position:fixed; inset:0; isolation:isolate;
  background:
    radial-gradient(120% 85% at 50% 60%, var(--blue-2) 0%, var(--blue-1) 46%, var(--blue-0) 100%);
}
.bg::before{
  content:""; position:absolute; inset:-10%;
  background: radial-gradient(48% 42% at 50% 55%,
    rgba(74,168,255,.9) 0%,
    rgba(74,168,255,.18) 22%,
    rgba(20,75,154,.12) 42%,
    rgba(10,28,61,.06) 60%,
    rgba(7,18,43,0) 72%);
  filter: blur(8px) saturate(110%);
  z-index:0;
}
.bg::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 100% at 50% 55%, transparent 55%, var(--vignette) 100%),
    radial-gradient(100% 100% at 8% 8%, transparent 55%, rgba(0,0,0,.42) 100%),
    radial-gradient(100% 100% at 92% 92%, transparent 55%, rgba(0,0,0,.42) 100%);
  z-index:3;
}

/* ===== Sweeping light bars =====
   Each .sweep is a long, blurred, semi-transparent gradient that
   oscillates horizontally. Mix-blend 'screen' to glow over the blues. */
.sweep{
  position:absolute; inset:-10% -20%; /* give extra room for travel */
  mix-blend-mode:screen; pointer-events:none; z-index:1;
  opacity:.65; filter: blur(18px) saturate(115%);
  transform: translateX(-40%); /* start off-screen left */
  background:
    linear-gradient(90deg,
      rgba(0,0,0,0) 0%,
      rgba(255,255,255,.06) 34%,
      var(--accent) 46%,
      var(--cyan) 50%,
      var(--accent) 54%,
      rgba(255,255,255,.06) 66%,
      rgba(0,0,0,0) 100%);
  /* the bar itself is tall, we shape width via scale */
}

/* Different personalities per sweep */
.s1{
  animation: sweepX var(--dur-1) ease-in-out infinite alternate,
             breathe 6s ease-in-out infinite;
  transform-origin: 50% 50%;
}
.s2{
  animation: sweepX var(--dur-2) ease-in-out infinite alternate-reverse,
             tilt 14s ease-in-out infinite;
  opacity:.5; transform: rotate(6deg) translateX(-60%);
}
.s3{
  animation: sweepX var(--dur-3) ease-in-out infinite alternate;
  opacity:.35; transform: rotate(-7deg) translateX(-60%) scaleY(1.2);
}
.s4{
  animation: sweepX var(--dur-4) ease-in-out infinite alternate-reverse;
  opacity:.28; transform: rotate(12deg) translateX(-60%) scaleY(1.35);
}

/* Keyframes: back-and-forth horizontal travel */
@keyframes sweepX{
  0%   { transform: translateX(-60%) }
  50%  { transform: translateX(20%) }
  100% { transform: translateX(140%) }
}

/* Subtle breathing brightness */
@keyframes breathe{
  0%,100% { opacity:.62; filter: blur(18px) saturate(115%); }
  50%     { opacity:.78; filter: blur(14px) saturate(125%); }
}

/* Gentle tilt/rock */
@keyframes tilt{
  0%,100% { transform: rotate(6deg) translateX(-60%); }
  50%     { transform: rotate(2deg) translateX(-60%); }
}

/* Optional animated grain for life */
body::before{
  content:""; position:fixed; inset:-10%;
  background: repeating-radial-gradient(circle at 50% 50%, var(--grain) 0 .7px, transparent .7px 2px);
  opacity:.10; mix-blend-mode:soft-light; filter: blur(.4px);
  animation: grain 1.8s steps(6) infinite; z-index:2; pointer-events:none;
}
@keyframes grain{
  to { transform: translate(2%, -2%) }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .sweep, body::before{ animation: none !important; }
}