/* Extras: the living dossiers, typewritten headings, the case-board string, flashlight mode,
   the eyes in the footer. Everything here is decoration added by assets/js/fx.js; with that
   script missing, none of it appears and the site reads exactly the same. */

/* ---------- Typewritten headings ---------- */

.tw-ch { visibility: hidden; }
.tw-ch.is-typed { visibility: visible; }
.tw-ch.is-at { position: relative; }
.tw-ch.is-at::after {
  content: "";
  position: absolute;
  left: 100%;
  bottom: 0.08em;
  width: 0.08em;
  height: 0.95em;
  margin-left: 0.04em;
  background: currentColor;
  animation: tw-caret 0.9s steps(1) infinite;
}
@keyframes tw-caret { 50% { opacity: 0; } }

/* ---------- The case board: pins and red string across the steps ---------- */

.steps li { position: relative; }
.fx-pin {
  position: absolute;
  top: -7px;
  left: -5px;
  z-index: 1;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e0695c, var(--stamp) 55%, #5e1a14);
  box-shadow: 1px 2px 2px rgb(0 0 0 / 0.35);
  transform: scale(0);
  transition: transform 0.35s cubic-bezier(0.25, 1.6, 0.45, 1);
}
.steps li.is-strung .fx-pin { transform: scale(1); }
.steps li:nth-child(2) .fx-pin { transition-delay: 0.25s; }
.steps li:nth-child(3) .fx-pin { transition-delay: 0.5s; }
.steps li:nth-child(4) .fx-pin { transition-delay: 0.75s; }
.fx .steps li::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--stamp);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.1s cubic-bezier(0.3, 0.6, 0.2, 1);
}
.fx .steps li.is-strung::after { transform: scaleX(1); }
.fx .steps li:nth-child(2)::after { transition-delay: 0.25s; }
.fx .steps li:nth-child(3)::after { transition-delay: 0.5s; }
.fx .steps li:nth-child(4)::after { transition-delay: 0.75s; }

/* ---------- Living dossiers ---------- */

.fx .dossier {
  position: relative;
  isolation: isolate;
}
.fx-stamp {
  position: absolute;
  top: calc(1.4rem + var(--still, 0px));
  right: 0;
  z-index: 2;
  padding: 0.2rem 0.6rem 0.1rem;
  font-family: var(--font-type);
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stamp);
  border: 2px solid currentColor;
  border-radius: 3px;
  opacity: 0;
  transform: rotate(-8deg) scale(1.6);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.25s cubic-bezier(0.25, 1.5, 0.45, 1);
}
.dossier.is-stamped .fx-stamp { opacity: 0.9; transform: rotate(-8deg) scale(1); }

/* The Walker: a trace of every sound you make. */
.fx-wave {
  display: block;
  width: 100%;
  height: 2.25rem;
  margin-top: 1rem;
  overflow: visible;
}
.fx-wave polyline {
  fill: none;
  stroke: rgb(var(--text-rgb) / 0.55);
  stroke-width: 1.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.dossier.is-stamped .fx-wave polyline { stroke: var(--stamp); }

/* The Shade: an eye that follows you. */
.fx-eye {
  position: absolute;
  top: calc(1.85rem + var(--still, 0px));
  right: 0.25rem;
  width: 3.25rem;
  height: 1.75rem;
  overflow: visible;
  pointer-events: none;
}
.fx-eye__lid { fill: rgb(var(--text-rgb) / 0.06); stroke: rgb(var(--text-rgb) / 0.7); stroke-width: 1.5; }
.fx-eye__iris { fill: rgb(var(--text-rgb) / 0.85); }
.fx-eye__shut {
  fill: var(--sheet);
  transform-box: fill-box;
  transform-origin: center top;
  transform: scaleY(0);
  transition: transform 0.09s ease;
}
.fx-eye.is-blinking .fx-eye__shut { transform: scaleY(1); }
.dossier.is-stamped .fx-eye { opacity: 0; transition: opacity 0.2s; }

/* The Witness: it stands behind you when you're alone with the file. */
.fx-witness {
  position: absolute;
  right: 6%;
  bottom: 0;
  z-index: -1;
  width: auto;
  height: calc(82% - var(--still, 0px));
  color: rgb(var(--text-rgb) / 0.13);
  opacity: 0;
  transform: translateY(6%);
  transition: opacity 2.2s ease, transform 2.6s ease;
  pointer-events: none;
}
.dossier.is-haunted .fx-witness { opacity: 1; transform: none; }
.dossier.is-banished .fx-witness {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.dossier.is-haunted { cursor: crosshair; }

/* The Gloom: its file has faded into the dark, and only your light reads it. */
@property --gr { syntax: "<length>"; inherits: false; initial-value: 0px; }
.fx-gloom-body {
  -webkit-mask: radial-gradient(circle var(--gr) at var(--gx, 50%) var(--gy, 50%), #000 45%, rgb(0 0 0 / 0.1) 100%);
  mask: radial-gradient(circle var(--gr) at var(--gx, 50%) var(--gy, 50%), #000 45%, rgb(0 0 0 / 0.1) 100%);
  transition: --gr 0.45s ease;
}
.fx-gloom-smoke {
  position: absolute;
  inset: -1rem -2rem -1.5rem;
  z-index: -1;
  background: radial-gradient(ellipse 60% 55% at 45% 50%, rgb(var(--text-rgb) / 0.13), transparent 75%);
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.fx-gloom-hint {
  position: absolute;
  left: 0;
  bottom: 0.2rem;
  font-family: var(--font-type);
  font-size: 0.9375rem;
  color: var(--text-soft);
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.dossier.is-lit .fx-gloom-hint { opacity: 0; }
.dossier.is-lit .fx-gloom-smoke { opacity: 0.5; }

/* The Warden: how long you've been in its room. */
.fx-room {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-type);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.fx-room__bar {
  display: block;
  height: 3px;
  margin-top: 0.4rem;
  background: rgb(var(--text-rgb) / 0.12);
  overflow: hidden;
}
.fx-room__bar i {
  display: block;
  height: 100%;
  background: var(--text);
  transform-origin: left center;
  transform: scaleX(var(--stay, 0));
}
.dossier.is-stamped .fx-room__bar i { background: var(--stamp); }
.dossier.is-shaking { animation: fx-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
@keyframes fx-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

/* The withheld file: the redaction slips now and then. */
.redact.is-slipping {
  background: transparent;
  box-shadow: none;
  width: auto;
  height: auto;
  font-family: var(--font-type);
  color: var(--stamp);
  vertical-align: baseline;
}

/* ---------- Flashlight mode (press F) ---------- */

.fx-dark {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background: radial-gradient(circle var(--fr, 11rem) at var(--fx, 50%) var(--fy, 50%),
    rgb(255 226 160 / 0.07) 0, transparent 45%, rgb(5 6 5 / 0.985) 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.fx-dark.is-on { opacity: 1; }
.fx-dark.is-flickering { animation: fx-flicker 0.6s steps(2) 3; }
.fx-dark.is-dead { --fr: 2.5rem; transition: opacity 0.5s ease; }
@keyframes fx-flicker { 50% { opacity: 0.55; } }

/* ---------- Eyes in the dark, at the very bottom ---------- */

.site-footer { position: relative; }
.fx-footer-eyes {
  position: absolute;
  top: 1.25rem;
  right: clamp(1.25rem, 6vw, 4rem);
  display: flex;
  gap: 1.4rem;
  pointer-events: none;
}
.fx-footer-eyes i {
  display: block;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #fff4d6 0 18%, #d9cfb2 32%, rgb(217 207 178 / 0) 70%);
  transform: scaleY(0.05);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.6s ease;
}
.fx-footer-eyes.is-open i { transform: scaleY(0.55); opacity: 0.85; }
.fx-footer-eyes.is-blinking i { transform: scaleY(0.05); transition-duration: 0.08s; }

/* ---------- Buttons that lean toward you ---------- */

.fx-magnet { transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }

@media (prefers-reduced-motion: reduce) {
  .fx .steps li::after { transition: none; }
  .fx-witness, .fx-stamp, .fx-footer-eyes i { transition: none; }
  .dossier.is-shaking { animation: none; }
}