#backdrop{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  contain:strict;
  background:var(--bd-base);
  transition:background-color .5s ease;
}
#backdrop::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--u) * 3.4px),
    var(--bd-scan) calc(var(--u) * 3.4px),
    var(--bd-scan) calc(var(--u) * 5.1px),
    transparent calc(var(--u) * 5.1px),
    transparent calc(var(--u) * 9px)
  );
}

.ring{
  --size:calc(var(--d) * var(--u) * 1px);
  position:absolute;
  left:0;
  top:0;
  width:var(--size);
  height:var(--size);
  border:calc(var(--b) * var(--u) * 1px) solid var(--bd-ring);
  border-radius:50%;
  box-sizing:border-box;
  opacity:var(--o,1);
  will-change:transform;
  animation:drift var(--t) linear var(--s) infinite;
  animation-direction:var(--dir,normal);
  transition:border-color .5s ease;
}

.is-covered #backdrop{visibility:hidden}

@keyframes drift{
  from{transform:translate3d(calc(var(--size) * -1),var(--y0),0)}
  to{transform:translate3d(100vw,var(--y1),0)}
}

@media (prefers-reduced-motion:reduce){
  .ring{animation:none;transform:translate3d(var(--xs),var(--y0),0)}
}