/**
 * Ambient marks behind the content — framing brackets, crosshairs, a sprocket
 * strip. Fixed, so they read as glass the page moves behind rather than as
 * objects sitting in any one section.
 */
.Drift__layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.Drift__mark {
  position: absolute;
  color: var(--grey-2);
  /* Faint enough to be atmosphere. Anything brighter and they start competing
     with the content, which the 40%-empty rule exists to protect. */
  opacity: 0.13;
  will-change: transform;
}

/**
 * Linear, and the third place on the site that is — see the credits note that
 * used to live in EndCard, and the crossfade in the character player. A
 * continuous drift with an eased curve visibly stalls and surges once per
 * cycle; constant velocity is the whole point of ambient motion.
 *
 * Long periods and small distances: this should be almost subliminal. If it
 * ever reads as movement, halve the distances rather than slowing it down.
 */
@keyframes drift-a {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(4vw, -7vh, 0);
  }
}

@keyframes drift-b {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-5vw, 5vh, 0);
  }
}

@keyframes drift-c {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(3vw, 6vh, 0);
  }
}

.Drift__a {
  top: 14%;
  left: 8%;
  animation: drift-a 71s linear infinite alternate;
}

.Drift__b {
  top: 62%;
  left: 76%;
  animation: drift-b 89s linear infinite alternate;
}

.Drift__c {
  top: 33%;
  left: 61%;
  animation: drift-c 63s linear infinite alternate;
}

.Drift__d {
  top: 78%;
  left: 22%;
  animation: drift-b 97s linear infinite alternate;
}

.Drift__e {
  top: 8%;
  left: 44%;
  animation: drift-c 83s linear infinite alternate;
}

@media (max-width: 720px) {
  /* Fewer marks on a small screen: at this width they crowd the content
     instead of framing it. */
  .Drift__c,
  .Drift__d,
  .Drift__e {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .Drift__mark {
    animation: none;
    will-change: auto;
  }
}