.font-pending main,
.font-pending .transmission {
  visibility: hidden;
}

html.font-legacy-frame body,
html.font-legacy-frame body * {
  font-family: LegacySignal, Adventure, "Arial Narrow", sans-serif;
}

.is-legacy-glitch {
  font-family: LegacySignal, Adventure, "Arial Narrow", sans-serif;
  text-shadow: -4px 0 #0075bb, 4px 0 #a33a57;
  animation: legacy-fracture 180ms steps(2, end);
}

html.font-mutating main {
  animation: font-mutation 150ms steps(2, end) infinite;
}

.watcher-entity {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("dd84c00e3653bb180994.png?ver=8.9.50-sweep2-20261010") center / contain no-repeat;
  opacity: .46;
  filter: saturate(1.16) contrast(1.08);
  transform: translateZ(0);
  transform-origin: center;
  transition:
    opacity 50ms steps(1, end),
    filter 50ms steps(1, end),
    transform 50ms steps(1, end);
  will-change: opacity, filter, transform;
}

html.font-pending:not(.font-mutating) .watcher-entity {
  opacity: 0;
}

html.font-mutating.font-legacy-frame .watcher-entity {
  opacity: .06;
  filter: saturate(.55) contrast(1.65) brightness(.55);
  transform: translateX(-.8%) scaleY(.994);
}

html.font-mutating:not(.font-legacy-frame) .watcher-entity {
  opacity: .78;
  filter: saturate(1.55) contrast(1.42) brightness(1.18);
  transform: translateX(.45%) scaleY(1.004);
}

html.watcher-glitch .watcher-entity {
  animation: watcher-regression var(--watcher-glitch-ms, 180ms) steps(2, end);
}

@keyframes legacy-fracture {
  0% { transform: translateX(-2px); filter: blur(0); }
  40% { transform: translateX(3px); filter: blur(.35px); }
  70% { transform: translateX(-1px); filter: blur(0); }
  100% { transform: none; }
}

@keyframes font-mutation {
  0%, 100% { filter: none; }
  50% { filter: contrast(1.18) brightness(1.08); }
}

@keyframes watcher-regression {
  0% {
    opacity: .12;
    filter: saturate(.4) contrast(1.8) brightness(.55);
    transform: translateX(-1.2%) scaleY(.99);
    clip-path: inset(0);
  }
  34% {
    opacity: .84;
    filter: saturate(1.75) contrast(1.55) brightness(1.3);
    transform: translateX(.9%) scaleY(1.008);
    clip-path: inset(8% 0 54% 0);
  }
  58% {
    opacity: .04;
    transform: translateX(-.45%);
    clip-path: inset(37% 0 28% 0);
  }
  78% {
    opacity: .7;
    filter: saturate(1.35) contrast(1.28) brightness(1.1);
    transform: translateX(.3%);
    clip-path: inset(0);
  }
  100% {
    opacity: .46;
    filter: saturate(1.16) contrast(1.08);
    transform: none;
    clip-path: inset(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .is-legacy-glitch,
  html.font-mutating main {
    animation: none;
  }

  .watcher-entity {
    transition: none;
  }

  html.watcher-glitch .watcher-entity {
    animation: none;
  }
}
