/* ============================================================================
   VIVARIUM — THRESHOLD (power-on diagnostic entry)
   ========================================================================== */

.threshold {
  position: fixed; inset: 0;
  z-index: var(--z-threshold);
  display: grid; place-items: center;
  padding: var(--gutter);
  background:
    radial-gradient(80% 60% at 50% 50%, oklch(15% 0.02 235 / 0.9), oklch(8% 0.01 250) 75%),
    var(--void);
  transition: opacity var(--d-slow) var(--e-in), visibility var(--d-slow);
}
.threshold.is-dismissed { opacity: 0; visibility: hidden; pointer-events: none; }

.threshold__inner {
  width: min(680px, 100%);
  display: flex; flex-direction: column;
  gap: var(--sp-6);
}

/* boot log */
.threshold__boot {
  font-family: var(--f-mono);
  font-size: clamp(0.7rem, 0.62rem + 0.4vw, 0.84rem);
  line-height: 1.85;
  color: var(--ink-mute);
  white-space: pre-wrap;
  min-height: 11.5em;
  letter-spacing: 0.02em;
  margin: 0;
}
.threshold__boot .ok   { color: var(--live); text-shadow: 0 0 12px oklch(80% 0.145 214 / 0.35); }
.threshold__boot .warn { color: var(--amber); }
.threshold__boot .dim  { color: var(--ink-faint); }
.threshold__boot .caret {
  display: inline-block; width: 0.6em; height: 1.05em;
  background: var(--live); vertical-align: -0.18em; margin-left: 0.1em;
  animation: caretBlink 1s steps(1) infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }

/* reveal */
.threshold__reveal {
  opacity: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--sp-2);
}
.threshold__reveal.is-shown { opacity: 1; }

/* staggered entrance — each line rises into place, not all-at-once */
.threshold__reveal .threshold__eyebrow,
.threshold__reveal .threshold__sub,
.threshold__reveal .threshold__line,
.threshold__reveal .enter,
.threshold__reveal .threshold__hint {
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.55s var(--e-out), transform 0.7s var(--e-out);
}
.threshold__reveal .is-in { opacity: 1; transform: none; }

.threshold__eyebrow {
  font-size: var(--t-micro); letter-spacing: 0.34em; color: var(--ink-mute);
}
.threshold__title {
  position: relative;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 0.3rem + 6.2vw, 8.5rem);
  letter-spacing: -0.015em;
  line-height: 0.9;
  white-space: nowrap;
  color: var(--ink);
  text-shadow: 0 0 60px oklch(80% 0.145 214 / 0.18);
}
/* bright scan-line that sweeps the title once as it decodes */
.threshold__title::after {
  content: ""; position: absolute; left: -2%; right: -2%; top: 0; height: 3px;
  background: oklch(92% 0.16 214);
  box-shadow: 0 0 22px 3px oklch(82% 0.15 214 / 0.7);
  opacity: 0; pointer-events: none;
}
.threshold__reveal.is-scanning .threshold__title {
  animation: titleFlicker 1.1s steps(36);
  text-shadow: 0 0 70px oklch(80% 0.145 214 / 0.4);
  white-space: nowrap;            /* hold one line while wide glyphs decode */
}
.threshold__reveal.is-scanning .threshold__title::after {
  animation: titleScan 1.15s var(--e-soft);
}
@keyframes titleScan {
  0%   { opacity: 0; transform: translateY(-0.05em); }
  14%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(0.82em); }
}
@keyframes titleFlicker {
  0%, 100% { opacity: 1; } 7% { opacity: 0.55; } 11% { opacity: 1; }
  39% { opacity: 0.8; } 42% { opacity: 1; } 64% { opacity: 0.7; } 67% { opacity: 1; }
}
.threshold__sub {
  font-size: var(--t-label); letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink-soft); margin-top: -0.2em;
}
.threshold__line {
  margin-top: var(--sp-2);
  font-size: var(--t-body); color: var(--ink-mute); line-height: 1.7;
}

/* matches the site's primary buttons (filled cyan, dark text, glow, lift) */
.enter {
  margin-top: var(--sp-3);
  display: inline-flex; align-items: center; gap: 0.8em;
  padding: 1em 1.7em;
  border-radius: 2px;
  background: var(--live); color: var(--void-deep);
  font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: 0.16em; font-weight: 700;
  box-shadow: var(--glow-live);
  transition: transform var(--d-fast) var(--e-out), box-shadow var(--d-mid);
}
.enter:hover { transform: translateY(-2px); }
.enter__arrow { transition: transform var(--d-fast) var(--e-out); }
.enter:hover .enter__arrow { transform: translateX(4px); }

.threshold__hint {
  margin-top: var(--sp-2);
  font-size: var(--t-micro); letter-spacing: 0.26em; color: var(--ink-faint);
  text-transform: uppercase;
}

@media (max-width: 560px) {
  .threshold__boot { min-height: 13em; }
}