/*
 * palimpsest.css
 *
 * Chrome/return affordances match decay.css and mutate.css exactly (same
 * fixed-corner, low-opacity monospace convention). The rest is deliberately
 * small: this piece works by *real* DOM mutation — swapped text, swapped
 * images, removed nodes — not by CSS transition or opacity blending. The
 * only animation here is a short, hard flash used to mark the instant a
 * mutation lands, the opposite of a fade: a jolt, not a dissolve.
 */
.px-chrome{
  position:fixed;bottom:14px;left:16px;z-index:9998;
  font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.1em;
  color:#5a564f;opacity:.4;text-transform:lowercase;pointer-events:none;
}
.px-return{
  position:fixed;bottom:14px;right:16px;z-index:9998;
  font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.12em;
  color:#5a564f;opacity:.35;text-decoration:none;text-transform:lowercase;
  transition:opacity .4s;
}
.px-return:hover{opacity:.8}

/* A single mutated element gets this for ~260ms right after it changes:
   a hard invert-and-settle, not a fade in. */
@keyframes px-jolt{
  0%{filter:invert(1) saturate(2)}
  100%{filter:none}
}
.px-jolt{animation:px-jolt .26s steps(3) 1}

/* A full-viewport flash fires once per visit, but only on a visit that
   actually lands a mutation — silence on every other refresh is part of
   the point. Hard cut in, hard cut out; no easing. */
.px-event-flash{
  position:fixed;inset:0;z-index:9999;background:#fff;
  opacity:0;pointer-events:none;
}
.px-event-flash.px-firing{opacity:.9;animation:px-flash-out .18s steps(2) 1}
@keyframes px-flash-out{
  0%{opacity:.9}
  60%{opacity:.9}
  100%{opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .px-jolt{animation:none}
  .px-event-flash.px-firing{animation:none;opacity:0}
}

/* Stage 5: the page narrows toward the real page's own 500px table width. */
body.px-narrow main,
body.px-narrow .hero-content,
body.px-narrow section{
  max-width:500px;margin-left:auto;margin-right:auto;
}

/* Terminal state: whatever of the original page remains has just been
   replaced wholesale by the real grafted markup — kill the modern chrome
   effects that would otherwise sit on top of it. */
body.px-converged .cursor-glow,
body.px-converged .hero-canvas{display:none}
body.px-converged{cursor:default;background:#000}