.observer-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #050505;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 0.18s ease;
}

.observer-transition-overlay.is-running {
  opacity: 1;
}

.observer-transition-noise {
  position: absolute;
  inset: 0;
  opacity: .12;
  background-image:
    repeating-radial-gradient(circle at 17% 32%, rgba(255,255,255,.25) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.04), rgba(255,255,255,.04) 1px, transparent 1px, transparent 4px);
  animation: observerNoise .28s steps(2) infinite;
}

@keyframes observerNoise {
  0% { transform: translate(0,0); }
  50% { transform: translate(2%, -1%); }
  100% { transform: translate(-1%, 1%); }
}

.observer-transition-core {
  position: relative;
  display: grid;
  place-items: center;
  width: min(74vw, 420px);
  aspect-ratio: 1;
  color: #f2f2f2;
}

.observer-transition-eye {
  margin: 0;
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(7px, 1.55vw, 12px);
  line-height: .62;
  white-space: pre;
  text-shadow: 0 0 10px rgba(255,255,255,.28), 0 0 34px rgba(255,59,59,.24);
  transform: scale(1);
  opacity: 1;
}

.observer-transition-symbol {
  position: absolute;
  font-size: clamp(88px, 18vw, 180px);
  line-height: 1;
  opacity: 0;
  transform: scale(.2) rotate(0deg);
  text-shadow: 0 0 36px rgba(255,255,255,.2);
}

.observer-transition-label {
  position: absolute;
  top: calc(100% + 20px);
  color: rgba(242,242,242,.72);
  font: 12px/1.4 "Courier New", Courier, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.observer-transition-purocaos.is-running .observer-transition-eye {
  animation: observerEyeToYin 1.14s cubic-bezier(.77, 0, .175, 1) forwards;
}

.observer-transition-purocaos.is-running .observer-transition-symbol {
  animation: observerYinAppear 1.14s cubic-bezier(.77, 0, .175, 1) forwards;
}

@keyframes observerEyeToYin {
  0% { opacity: 1; transform: scale(1) rotate(0deg); filter: blur(0); }
  38% { opacity: .95; transform: scale(.82) rotate(100deg); filter: blur(.4px); }
  62% { opacity: .35; transform: scale(.28) rotate(390deg); filter: blur(2px); }
  100% { opacity: 0; transform: scale(.08) rotate(720deg); filter: blur(8px); }
}

@keyframes observerYinAppear {
  0%, 32% { opacity: 0; transform: scale(.12) rotate(0deg); }
  54% { opacity: 1; transform: scale(.85) rotate(360deg); }
  100% { opacity: 1; transform: scale(1.45) rotate(720deg); }
}

.observer-transition-archive.is-running .observer-transition-eye {
  animation: observerEyeToArchive 1s cubic-bezier(.77, 0, .175, 1) forwards;
}

.observer-transition-archive.is-running .observer-transition-symbol {
  animation: observerArchiveAppear 1s cubic-bezier(.77, 0, .175, 1) forwards;
}

@keyframes observerEyeToArchive {
  0% { opacity: 1; transform: scale(1); letter-spacing: 0; filter: blur(0); }
  45% { opacity: .52; transform: scale(.9); letter-spacing: .04em; filter: blur(.6px); }
  100% { opacity: 0; transform: scale(.72); letter-spacing: .18em; filter: blur(6px); }
}

@keyframes observerArchiveAppear {
  0%, 34% { opacity: 0; transform: scale(.5) rotate(45deg); }
  100% { opacity: 1; transform: scale(1.3) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .observer-transition-overlay { display: none; }
}

@media (hover: none), (pointer: coarse), (max-width: 700px) {
  .observer-transition-archive {
    display: none !important;
  }

  .observer-transition-noise {
    animation: none;
    opacity: .045;
  }
}