/* Фон сайта: тёмно-синий, мигающие вертикальные полосы засвета, зерно 35мм, пыль, виньетка.
   Значения подобраны в strip.html. */
.bg {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: hsl(200, 40%, 3%);
}
.bg > * { position: absolute; }

.bg-leak { inset: 0; mix-blend-mode: screen; }
.bg-strip {
  position: absolute; top: 47%; height: 160%;
  left: calc(var(--sx) * 1%); width: calc(var(--sw) * 3.5vw);
  transform: translate(-50%, -50%); opacity: 0;
}
.bg-strip i { position: absolute; display: block; top: 0; bottom: 0; }
.bg-strip .halo {
  left: 0; right: 0;
  background: radial-gradient(ellipse 50% 60% at 50% 45%, hsla(62, 50%, 10%, .35), transparent 70%);
}
.bg-strip .core {
  left: 50%; width: calc(var(--sw) * 1vw); transform: translateX(-50%);
  background: linear-gradient(90deg,
    transparent,
    hsla(62, 50%, 10%, .55) 25%,
    hsla(62, 50%, 28%, .9) 50%,
    hsla(62, 50%, 10%, .55) 75%,
    transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 80%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 80%, transparent);
}

.bg-grain {
  inset: -100%; width: 300%; height: 300%; opacity: .105;
  background-size: 256px;
  animation: bg-grain .9s steps(6) infinite;
}
@keyframes bg-grain {
  0%   { transform: translate(0, 0); }
  17%  { transform: translate(-7%, 4%); }
  33%  { transform: translate(5%, -9%); }
  50%  { transform: translate(-3%, 11%); }
  67%  { transform: translate(9%, 2%); }
  83%  { transform: translate(-10%, -5%); }
  100% { transform: translate(2%, 8%); }
}
.bg-dust { inset: 0; width: 100%; height: 100%; }
.bg-vig { inset: 0; background: radial-gradient(ellipse at 60% 45%, transparent 40%, rgba(3,5,9,.5) 100%); }

@media (prefers-reduced-motion: reduce) {
  .bg-grain { animation: none; }
}