/* THIN BLUE LINE — a slow, distant wash of emergency light behind the sequence. */
.thin-blue-line-collection {
  background:#020307;
  isolation:isolate;
}

.thin-blue-line-collection > main {
  position:relative;
  z-index:1;
}

.thin-blue-line-atmosphere {
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:#020307;
  contain:strict;
}

.thin-blue-line-atmosphere::before {
  content:"";
  position:absolute;
  inset:-24%;
  z-index:0;
  background:
    radial-gradient(ellipse at 19% 24%,rgba(68,72,79,.28) 0%,rgba(20,22,27,.16) 31%,transparent 61%),
    radial-gradient(ellipse at 81% 73%,rgba(57,60,68,.22) 0%,rgba(15,17,21,.12) 34%,transparent 64%),
    linear-gradient(128deg,#010205 0%,#0b0d11 32%,#020307 61%,#111216 100%);
  transform:translate3d(-2.5%,-1.5%,0) scale(1.08);
  animation:thin-blue-line-shadow-drift 38s cubic-bezier(.45,0,.55,1) infinite alternate;
  will-change:transform;
}

.thin-blue-line-atmosphere::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:
    radial-gradient(ellipse at center,transparent 19%,rgba(0,0,0,.18) 68%,rgba(0,0,0,.48) 100%),
    linear-gradient(180deg,rgba(0,0,0,.17),transparent 24%,transparent 72%,rgba(0,0,0,.24));
}

.thin-blue-line-light-field {
  position:absolute;
  inset:-8%;
  z-index:1;
  overflow:hidden;
}

.thin-blue-line-glow {
  position:absolute;
  display:block;
  left:0;
  top:8%;
  width:55%;
  height:78%;
  border-radius:50%;
  opacity:0;
  filter:blur(24px);
  mix-blend-mode:screen;
  will-change:transform,opacity;
}

.thin-blue-line-glow-blue {
  background:radial-gradient(ellipse at center,rgba(35,98,255,.98) 0%,rgba(19,61,222,.72) 18%,rgba(9,31,119,.34) 42%,transparent 72%);
}

.thin-blue-line-glow-red {
  background:radial-gradient(ellipse at center,rgba(255,26,66,.96) 0%,rgba(221,15,52,.7) 18%,rgba(104,8,29,.34) 42%,transparent 72%);
}

@keyframes thin-blue-line-shadow-drift {
  0% { transform:translate3d(-2.5%,-1.5%,0) scale(1.08); }
  48% { transform:translate3d(2.2%,1.2%,0) scale(1.12); }
  100% { transform:translate3d(-.5%,3%,0) scale(1.09); }
}

@media (max-width:700px) {
  .thin-blue-line-glow {
    filter:blur(18px);
  }
}

@media (prefers-reduced-motion:reduce) {
  .thin-blue-line-atmosphere::before {
    animation:none!important;
  }
  .thin-blue-line-glow { display:none; }
}