/* exit.css — the "exit" experience: site fades away, background goes black, a
   timestamped conversation plays out, then the tab crashes out to about:blank. */

#exit-stage {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-color: transparent;   /* starts clear (tiled bg shows through) */
  transition: background-color 1s ease;
  overflow: hidden;                /* older messages scroll off the top */
  cursor: default;
}
#exit-stage.black { background-color: #000; }

/* The moving thread. Absolutely positioned; exit.js scrolls it upward at a constant
   rate so time passes, and each message sits at a Y set by its `at` (time-point). */
.exit-convo {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--width);
  max-width: 100%;
  transform: translateX(-50%);     /* JS overrides with translate(-50%, scrollY) */
  will-change: transform;
}

/* Each message is pinned to its point in time (top set inline); left = receiver,
   right = sender. Two messages sharing an `at` land on the same line. */
.exit-msg {
  position: absolute;
  max-width: 65%;
  padding: 0 14px;
  font-family: pixel;              /* the original regular.ttf */
  font-size: 18px;                 /* 2x the pixel font's native size = crisp */
  line-height: 1.4;
  color: #cacaca;
  overflow-wrap: break-word;
  image-rendering: pixelated;
}
.exit-receiver { left: 0;  text-align: left; }
.exit-sender   { right: 0; text-align: right; color: #fff; }
.exit-time { color: #5f5f5f; margin: 0 6px; }

/* Brief pre-crash glitch, then exit.js navigates the tab away. */
#exit-stage.exit-crash { animation: exitGlitch 0.22s steps(2) 3; }
@keyframes exitGlitch {
  0%   { filter: none;                 transform: none; }
  25%  { filter: invert(1);            transform: translateX(-5px); }
  50%  { filter: none;                 transform: translate(6px, -2px) skewX(4deg); }
  75%  { filter: invert(1) contrast(2);transform: translateX(-3px); }
  100% { filter: none;                 transform: none; }
}