/* layr0 hidden terminal easter egg (GHST-721).
   Hidden by default; summoned by a trigger (type "layr0", konami, or backtick) into a
   small CENTERED floating panel — not docked, not full-screen. Dismiss: Esc / × / scrim.
   Scoped under #layr0Terminal; reuses design-system.css tokens. */

/* ---- scrim (faint; dismiss on click) ---- */
#layr0TermScrim {
  position: fixed; inset: 0; z-index: 90;
  background: transparent;   /* resting hero panel: never dim the hero / ASCII field */
  pointer-events: none;      /* and never trap clicks on the hero */
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s var(--ease-base, ease), visibility 0.3s var(--ease-base, ease);
}
#layr0TermScrim.is-open { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  #layr0TermScrim { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ---- panel: hidden by default, centered when summoned ---- */
#layr0Terminal {
  position: fixed; z-index: 91;
  /* Resting hero panel: right open space, vertical center, gutter mirrors the left page pad. */
  top: 50%; right: var(--page-pad-x); left: auto;
  transform: translateY(-50%) scale(0.985);
  width: min(440px, 40vw);
  max-height: 78vh;
  display: flex; flex-direction: column;
  font-family: var(--font-family-base, "Recursive", ui-monospace, monospace);
  font-variation-settings: "MONO" 1, "CASL" 0;
  font-size: 12px;
  color: var(--color-ink, #d8d8d2);
  background: rgba(12, 12, 11, 0.74);
  border: 1px solid rgba(216, 216, 210, 0.16);
  border-radius: 5px;
  box-shadow:
    0 36px 95px rgba(0, 0, 0, 0.62),
    0 0 130px 36px rgba(184, 157, 106, 0.055),
    inset 0 0 0 1px rgba(184, 157, 106, 0.035);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.28s var(--ease-base, ease), transform 0.28s var(--ease-base, ease), visibility 0.28s,
              background 0.5s var(--ease-base, ease), border-color 0.5s var(--ease-base, ease),
              box-shadow 0.5s var(--ease-base, ease);
}
#layr0Terminal::before {
  content: "";
  position: absolute;
  inset: -95px -115px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(184, 157, 106, 0.16) 0%, rgba(184, 157, 106, 0.07) 28%, rgba(184, 157, 106, 0) 66%),
    radial-gradient(ellipse at center, rgba(12, 12, 11, 0) 0%, rgba(12, 12, 11, 0.22) 72%, rgba(12, 12, 11, 0.42) 100%);
  filter: blur(10px);
  opacity: 0.78;
}
#layr0Terminal.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(-50%) scale(1);
}

/* ---- CONDENSATION: the panel precipitates OUT of the character field ----
   During "gather", the panel has NO surface (transparent bg/border/shadow) — only the
   condense char-layer is visible, brightening + densifying. On "precipitate" this class is
   removed and the surface (bg/border/glow) transitions in, so the panel solidifies out of the
   gathered chars instead of fading in as a box. Placed AFTER .is-open so it wins on equal
   specificity. */
#layr0Terminal.is-condensing {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(-50%) scale(1);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* content is hidden during the gather, then fades in as the surface precipitates */
#layr0Terminal .l0t__status,
#layr0Terminal .l0t__body { transition: opacity 0.45s var(--ease-base, ease); }
#layr0Terminal.is-condensing .l0t__status,
#layr0Terminal.is-condensing .l0t__body { opacity: 0; }
/* keep panel content above the condense char-layer */
#layr0Terminal .l0t__status,
#layr0Terminal .l0t__body { position: relative; z-index: 1; }
#layr0Terminal .l0t__close { z-index: 2; }   /* keep its own absolute top-right pin */

/* the condense char-layer: a field of gold glyphs that gathers, then recedes to a faint
   field-through texture inside the settled panel. Opacity/transform are driven by JS. */
.l0t__condense {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
  border-radius: inherit;
  white-space: pre;
  font-family: var(--font-family-base, "Recursive", ui-monospace, monospace);
  font-variation-settings: "MONO" 1, "CASL" 0.2;
  font-size: 12px; line-height: 13px; letter-spacing: 0;
  color: rgba(184, 157, 106, 0.55);
  text-shadow: 0 0 8px rgba(184, 157, 106, 0.18);
  opacity: 0;
  will-change: opacity, transform;
  /* soft organic edge so the gather blends into the field instead of reading as a rectangle */
  -webkit-mask-image: radial-gradient(125% 115% at 50% 46%, #000 26%, rgba(0,0,0,0.45) 60%, transparent 86%);
          mask-image: radial-gradient(125% 115% at 50% 46%, #000 26%, rgba(0,0,0,0.45) 60%, transparent 86%);
}

/* Mobile: the right-side gutter has no room — dock the panel full-width near the bottom. */
@media (max-width: 820px) {
  #layr0Terminal {
    top: auto; bottom: 16px; right: 14px; left: 14px;
    width: auto; max-height: 60vh;
    transform: translateY(10px) scale(0.99);
  }
  #layr0Terminal.is-open { transform: translateY(0) scale(1); }
}

/* close button */
.l0t__close {
  position: absolute; top: 6px; right: 8px;
  width: 22px; height: 22px; line-height: 20px; text-align: center;
  font-family: inherit; font-size: 16px;
  color: var(--color-ink-42, rgba(216, 216, 210, 0.42));
  background: transparent; border: 0; cursor: pointer; border-radius: 3px;
  transition: color 0.2s, background 0.2s;
}
.l0t__close:hover { color: var(--color-ink, #d8d8d2); background: var(--color-surface-strong, rgba(216, 216, 210, 0.05)); }

/* status bar */
.l0t__status {
  display: flex; flex-wrap: wrap; gap: 14px;
  padding: 10px 38px 10px 15px;
  border-bottom: 1px solid var(--color-border, rgba(216, 216, 210, 0.06));
  font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--color-ink-68, rgba(216, 216, 210, 0.68));
}
.l0t__status b { color: var(--color-ink-95, rgba(216, 216, 210, 0.95)); font-weight: 560; }
.l0t__dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  margin-right: 5px; vertical-align: middle;
  background: var(--color-accent, #b89d6a); box-shadow: 0 0 6px var(--color-accent, #b89d6a);
}
.l0t__dot.is-off { background: var(--color-ink-35, rgba(216,216,210,.35)); box-shadow: none; }
@media (prefers-reduced-motion: no-preference) { .l0t__dot { animation: l0tPulse 2.4s var(--ease-base, ease) infinite; } }
@keyframes l0tPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }

.l0t__body { padding: 15px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
.l0t__label { font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-accent, #b89d6a); margin-bottom: 8px; }
.l0t__crystal .char.noise { color: rgba(184, 157, 106, 0.56); text-shadow: 0 0 8px rgba(184, 157, 106, 0.16); }
.l0t__crystal .char.resolved { color: inherit; text-shadow: none; }

/* identity */
.l0t__idrow { display: flex; align-items: baseline; gap: 10px; }
.l0t__handle { font-size: 16px; font-weight: 700; color: var(--color-ink-95, rgba(216,216,210,.95)); letter-spacing: 0.01em; }
.l0t__keyrow { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.l0t__key { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-ink-68, rgba(216,216,210,.68)); font-size: 11px; }
.l0t__reg { margin-top: 8px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-55, rgba(216,216,210,.55)); }

/* buttons */
.l0t__btn {
  font-family: inherit; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-ink-68, rgba(216,216,210,.68));
  background: transparent; border: 1px solid var(--color-border-strong, rgba(216,216,210,.12));
  border-radius: 3px; padding: 3px 8px; cursor: pointer; white-space: nowrap;
  transition: color .2s, border-color .2s, background .2s;
}
.l0t__btn:hover { color: var(--color-bg, #0c0c0b); background: var(--color-accent, #b89d6a); border-color: var(--color-accent, #b89d6a); }
.l0t__btn:active { transform: translateY(1px); }

/* connect form */
.l0t__form { display: flex; gap: 8px; }
.l0t__input {
  flex: 1; min-width: 0; font-family: inherit; font-size: 11px;
  color: var(--color-ink, #d8d8d2); background: var(--color-surface, rgba(216,216,210,.03));
  border: 1px solid var(--color-border-strong, rgba(216,216,210,.12)); border-radius: 3px; padding: 6px 8px;
}
.l0t__input::placeholder { color: var(--color-ink-35, rgba(216,216,210,.35)); text-transform: uppercase; letter-spacing: 0.04em; font-size: 10px; }
.l0t__input:focus { outline: none; border-color: var(--color-accent-35, rgba(184,157,106,.35)); }

/* output pane */
.l0t__out { border-top: 1px solid var(--color-border, rgba(216,216,210,.06)); padding-top: 12px; min-height: 84px; max-height: 180px; overflow-y: auto; font-size: 11px; line-height: 1.7; }
.l0t__empty { color: var(--color-ink-35, rgba(216,216,210,.35)); text-align: center; padding: 16px 6px; }
.l0t__empty strong { display: block; color: var(--color-ink-55, rgba(216,216,210,.55)); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 560; margin-bottom: 6px; font-size: 11px; }
.l0t__line { white-space: pre-wrap; word-break: break-word; }
.l0t__line .pfx { color: var(--color-accent, #b89d6a); }
.l0t__line.dim { color: var(--color-ink-50, rgba(216,216,210,.5)); }
.l0t__line.ok { color: var(--color-accent, #b89d6a); }

/* footer: in-character notice + human handoff */
.l0t__foot {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--color-border, rgba(216, 216, 210, 0.06));
  font-size: 10px; letter-spacing: 0.04em;
  color: var(--color-ink-50, rgba(216, 216, 210, 0.5));
}
.l0t__foot a { color: var(--color-ink-68, rgba(216, 216, 210, 0.68)); text-decoration: underline; text-underline-offset: 2px; }
.l0t__foot a:hover { color: var(--color-accent, #b89d6a); }

/* ---- discoverable click affordance: a bobbing, blinking gold prompt in the hero ---- */
.l0egg {
  position: absolute; z-index: 5;
  left: var(--page-pad-x, 32px); bottom: 9%;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-family-base, "Recursive", ui-monospace, monospace);
  font-variation-settings: "MONO" 1, "CASL" 0;
  font-size: 16px; line-height: 1;
  color: var(--color-accent, #b89d6a);
  background: none; border: 0; padding: 8px 6px; cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s var(--ease-base, ease);
}
.l0egg:hover, .l0egg:focus-visible { opacity: 1; outline: none; }
.l0egg__sym { font-weight: 600; }
.l0egg__cur { font-weight: 600; }
.l0egg__tip {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-ink-42, rgba(216, 216, 210, 0.42));
  opacity: 0; transform: translateX(-4px);
  transition: opacity 0.3s var(--ease-base, ease), transform 0.3s var(--ease-base, ease);
}
.l0egg__tip b { color: var(--color-accent, #b89d6a); font-weight: 600; }
.l0egg:hover .l0egg__tip, .l0egg:focus-visible .l0egg__tip { opacity: 1; transform: translateX(0); }
@media (prefers-reduced-motion: no-preference) {
  .l0egg { animation: l0eggBob 3.2s var(--ease-base, ease) infinite; }
  .l0egg__cur { animation: l0eggBlink 1.1s steps(1) infinite; }
}
@keyframes l0eggBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes l0eggBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ---- minimized launcher pill (chat-widget style): the terminal collapses to this; click reopens ---- */
.l0t__launcher {
  position: fixed; z-index: 92;
  right: var(--page-pad-x, 18px); bottom: 18px;
  display: none; align-items: center; gap: 8px;
  font-family: var(--font-family-base, "Recursive", ui-monospace, monospace);
  font-variation-settings: "MONO" 1, "CASL" 0;
  font-size: 12px; letter-spacing: 0.04em; line-height: 1;
  color: var(--color-ink-95, rgba(216, 216, 210, 0.95));
  background: rgba(12, 12, 11, 0.86);
  border: 1px solid rgba(184, 157, 106, 0.32);
  border-radius: 999px; padding: 10px 16px; cursor: pointer;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(184, 157, 106, 0.05);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  transition: border-color 0.2s var(--ease-base, ease), background 0.2s var(--ease-base, ease), transform 0.2s var(--ease-base, ease);
}
.l0t__launcher.is-shown { display: inline-flex; }
.l0t__launcher:hover, .l0t__launcher:focus-visible {
  outline: none; border-color: var(--color-accent, #b89d6a);
  background: rgba(12, 12, 11, 0.94); transform: translateY(-1px);
}
.l0t__launcher-cur { color: var(--color-accent, #b89d6a); font-weight: 600; }
@media (max-width: 600px) {
  .l0t__launcher { right: 14px; bottom: 14px; padding: 9px 14px; }
}