/* Haunting sequence: overlay, input lock and fake cursor (see specs/haunt-spec). */

#haunt {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

#haunt[hidden] {
  display: none;
}

#haunt.white {
  background: #fff;
}

/* Input lock. overflow:hidden on <html> keeps the visitor's scroll position. */
html.haunt-lock,
html.haunt-lock body {
  overflow: hidden;
  overscroll-behavior: none;
}

/* Keep the scrollbar's space when scrolling locks, so the page doesn't widen and reflow. */
html.haunt-lock {
  scrollbar-gutter: stable;
}

/* Once the page is gone there's nothing to reflow: let the overlay have the full width. */
html.haunt-lock.haunt-white {
  scrollbar-gutter: auto;
}

html.haunt-nocursor,
html.haunt-nocursor * {
  cursor: none !important;
}

/* The frozen heart: same art and click point (13,10) as the site's real cursor. */
.haunt-cursor {
  position: fixed;
  z-index: 2147483647;
  width: 27px;
  height: 24px;
  margin: -10px 0 0 -13px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='24' viewBox='0 0 9 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23050405' d='M0 1h1v1H0zM0 2h1v1H0zM0 3h1v1H0zM0 4h1v1H0zM1 0h1v1H1zM1 1h1v1H1zM1 4h1v1H1zM1 5h1v1H1zM2 0h1v1H2zM2 5h1v1H2zM2 6h1v1H2zM3 0h1v1H3zM3 6h1v1H3zM3 7h1v1H3zM4 0h1v1H4zM4 1h1v1H4zM4 7h1v1H4zM5 0h1v1H5zM5 6h1v1H5zM5 7h1v1H5zM6 0h1v1H6zM6 5h1v1H6zM6 6h1v1H6zM7 0h1v1H7zM7 1h1v1H7zM7 4h1v1H7zM7 5h1v1H7zM8 1h1v1H8zM8 2h1v1H8zM8 3h1v1H8zM8 4h1v1H8z'/%3E%3Cpath fill='%23d10a2a' d='M1 2h1v1H1zM1 3h1v1H1zM2 1h1v1H2zM2 2h1v1H2zM2 3h1v1H2zM2 4h1v1H2zM3 1h1v1H3zM3 2h1v1H3zM3 3h1v1H3zM3 4h1v1H3zM3 5h1v1H3zM4 2h1v1H4zM4 3h1v1H4zM4 4h1v1H4zM4 5h1v1H4zM4 6h1v1H4zM5 1h1v1H5zM5 2h1v1H5zM5 3h1v1H5zM5 4h1v1H5zM5 5h1v1H5zM6 1h1v1H6zM6 2h1v1H6zM6 3h1v1H6zM6 4h1v1H6zM7 2h1v1H7zM7 3h1v1H7z'/%3E%3C/svg%3E") no-repeat;
}

.haunt-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Phase 1: collapse ---------- */

.haunt-fall {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.haunt-fall > * {
  position: absolute;
  margin: 0;
  white-space: pre;
  transform-origin: center;
  will-change: transform, opacity;
}

/* Originals stay in place (no reflow) but their text goes invisible; clones do the falling. */
.haunt-gone {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

.haunt-gone-before::before {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

#page {
  position: relative;
}

/* White wash over the whole page: fades out the background, boxes and lines. */
#page::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2147483000;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

.haunt-going #page,
.haunt-going .sign-button,
.haunt-going .haunt-fall {
  transition: filter var(--haunt-grey-ms, 3s) ease-in, opacity var(--haunt-grey-ms, 3s) ease-in;
}

/* Timings come from haunt/config.js (set as variables on <html>). */
.haunt-going #page::after {
  transition: opacity var(--haunt-wash-ms, 3.5s) ease-in var(--haunt-wash-delay, 1.5s);
}

.haunt-grey #page,
.haunt-grey .sign-button,
.haunt-grey .haunt-fall {
  filter: grayscale(1);
}

.haunt-grey #page::after {
  opacity: 1;
}

.haunt-grey .sign-button {
  opacity: 0;
}

/* Reduced motion: no falling, the page just fades to white over 1s. */
.haunt-fade #page,
.haunt-fade .sign-button {
  transition: opacity 1s ease-in;
  opacity: 0;
}

html.haunt-white,
html.haunt-white body {
  background: #fff;
}

/* ---------- Phase 3: terminal prompt ---------- */

.haunt-term {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 24px;
  font: 18px/1.5 "Courier New", Courier, monospace;
  color: #000;
  white-space: pre-wrap;
}

.haunt-term > div {
  min-height: 1.5em;
}

/* 1Hz block cursor. A CSS animation, so it pauses with the haunt clock when the tab is hidden. */
.haunt-caret {
  animation: haunt-blink 1s steps(1) infinite;
}

@keyframes haunt-blink {
  50% { opacity: 0; }
}

/* Touch: Y/N buttons below the prompt, the only things on the overlay that take a tap. */
.haunt-yn {
  position: absolute;
  top: calc(24px + 3 * 1.5em);
  left: 24px;
  display: flex;
  gap: 16px;
  font: 18px "Courier New", Courier, monospace;
}

.haunt-yn button {
  min-width: 88px;
  min-height: 44px;
  padding: 0 8px;
  font: inherit;
  color: #000;
  background: none;
  border: 0;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 600px) {
  .haunt-term,
  .haunt-yn {
    font-size: 16px;
  }
}

/* ---------- Phase 4: dithered scene ---------- */

#haunt {
  overflow: hidden; /* the scene canvas rounds up to whole dither pixels */
}

.haunt-scene {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ---------- Phase 5: ending + revisit ---------- */

.haunt-next {
  position: absolute;
  inset: 0;
  font: bold 32px/1.15 "Courier New", Courier, monospace;
  color: #d00000;
  white-space: pre;
}

.haunt-next > span,
.haunt-next-row {
  position: absolute;
}

.haunt-soon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font: bold 40px "Courier New", Courier, monospace;
  color: #d00000;
  text-align: center;
  white-space: pre;
}