.bg-layer{
  position:fixed;inset:0;z-index:-1;overflow:hidden;
  pointer-events:none;background:var(--bg);
}
.bg-svg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.orbit{
  fill:none;stroke-linecap:round;
  stroke-dasharray:5 11;
  animation:dashflow 12s linear infinite;
}
.orbit-1{stroke:#cd1133;stroke-width:1.2;stroke-opacity:.26;animation-duration:12s}
.orbit-2{stroke:#e8385a;stroke-width:1.1;stroke-opacity:.20;animation-duration:15s;animation-direction:reverse}
.orbit-3{stroke:#a50d28;stroke-width:1;stroke-opacity:.16;animation-duration:9s}
.orbit-4{stroke:#cd1133;stroke-width:.9;stroke-opacity:.11;animation-duration:7s;animation-direction:reverse}
@keyframes dashflow{to{stroke-dashoffset:-64}}
.sat{filter:drop-shadow(0 0 3px rgba(205,17,51,.28))}
.star{animation:twinkle 6s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.3}}
.cross line{stroke:rgba(92,76,80,.5);stroke-width:.5}
.cross{animation:twinkle 6s ease-in-out infinite}
.hud{font-family:var(--font-mono);transition:opacity .45s var(--ease)}
body.scrolled .hud{opacity:0}
.hud path{stroke:#cd1133;stroke-opacity:.50;stroke-width:1;fill:none;
  stroke-dasharray:6 6;animation:scan 4.4s linear infinite}
.hud text{
  fill:#cd1133;
  font-size:9.5px;letter-spacing:.2em;font-weight:500;
}
.hud text.dim{fill:#7a6468}
@keyframes scan{to{stroke-dashoffset:-48}}
.bg-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(28,18,21,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(28,18,21,.05) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 90% 72% at 50% 100%,#000 0%,transparent 74%);
  -webkit-mask-image:radial-gradient(ellipse 90% 72% at 50% 100%,#000 0%,transparent 74%);
}
.bg-glow{position:absolute;border-radius:50%;will-change:transform;animation:glow-drift 30s ease-in-out infinite alternate}
.bg-glow-1{
  width:780px;height:780px;top:-360px;left:-280px;
  background:radial-gradient(circle,
    rgba(205,17,51,.045) 0%,rgba(205,17,51,.020) 30%,
    rgba(205,17,51,.007) 52%,transparent 72%);
}
.bg-glow-2{
  width:720px;height:720px;top:-140px;right:-300px;animation-delay:-9s;
  background:radial-gradient(circle,
    rgba(165,13,40,.032) 0%,rgba(165,13,40,.014) 32%,
    rgba(165,13,40,.005) 54%,transparent 74%);
}
.bg-glow-3{
  width:820px;height:820px;bottom:-460px;left:16%;
  animation:glow-drift-2 38s ease-in-out infinite alternate;
  background:radial-gradient(circle,
    rgba(232,56,90,.026) 0%,rgba(232,56,90,.011) 34%,
    rgba(232,56,90,.004) 56%,transparent 72%);
}
@keyframes glow-drift{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(68px,56px) scale(1.13)}
}
@keyframes glow-drift-2{
  from{transform:translate(0,0) scale(1.06)}
  to{transform:translate(-58px,-44px) scale(.94)}
}
.bg-vignette{display:none}
.bg-topfade{display:none}
@media (max-width:680px){
  .hud{display:none}
  .bg-grid{background-size:56px 56px}
  .orbit-1{stroke-opacity:.16}
  .orbit-2{stroke-opacity:.12}
  .orbit-3{stroke-opacity:.10}
  .orbit-4{stroke-opacity:.07}
  .sats .sat:nth-child(n+4){display:none}
  .bg-glow{animation:none;will-change:auto}
  .bg-glow-1{width:520px;height:520px;top:-260px;left:-200px}
  .bg-glow-2{width:480px;height:480px;top:-120px;right:-210px}
  .bg-glow-3{width:560px;height:560px;bottom:-340px;left:8%}
}
@media (prefers-reduced-motion:reduce){
  .orbit,.sat,.star,.cross,.hud path,.bg-glow{animation:none}
  .hud{transition:none}
}