/* ── intro overlay — base (shared by all skins) ───────────── */
.lk-intro {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column;
  align-items: stretch; justify-content: center;
  padding: clamp(28px, 7vw, 96px);
  font-family: var(--mono);
  color: var(--cream);
  opacity: 1;
  transition: opacity .42s var(--ease);
}
.lk-intro-open { overflow: hidden; }
.lk-intro.lk-intro-out { opacity: 0; pointer-events: none; }

.lk-intro-skip {
  position: absolute; top: clamp(20px, 4vw, 40px); right: clamp(20px, 4vw, 44px);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dim); background: transparent; border: 1px solid var(--rule);
  border-radius: 999px; padding: 9px 16px; cursor: pointer;
  transition: all .3s var(--ease);
}
.lk-intro-skip span { color: var(--coral); opacity: 0.7; }
.lk-intro-skip:hover { color: var(--cream); border-color: var(--coral); }

.lk-intro-prog {
  position: absolute; bottom: clamp(20px, 4vw, 40px); right: clamp(20px, 4vw, 44px);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--coral);
}

.lk-intro-stage { max-width: 640px; width: 100%; transition: opacity .18s var(--ease); }
.lk-fade-out { opacity: 0; }

/* typed lines reserve their final space: the untyped tail of the text sits
   in an invisible in-flow span — zero reflow while typing, nothing absolute */
.lk-typewrap { display: block; }
.lk-typewrap .lk-t-rest { visibility: hidden; }

/* built-but-not-yet-revealed elements hold their final spot invisibly */
.lk-choice-hold, .lk-hold { opacity: 0; pointer-events: none; }
.lk-hold { transition: opacity .3s var(--ease); }
.lk-hold.lk-reveal { opacity: 1; pointer-events: auto; }

/* boot lines */
.lk-boot-line { font-size: clamp(13px, 1.5vw, 15px); letter-spacing: 0.06em; color: var(--cream-2); margin-bottom: 6px; }
.lk-boot-mk { color: var(--coral); }
.lk-boot-ok { color: var(--coral); opacity: 0.7; }

/* questions */
.lk-q-prompt {
  font-family: var(--body); font-weight: 500;
  font-size: clamp(24px, 3.4vw, 40px); letter-spacing: -0.015em;
  color: var(--cream); margin-bottom: clamp(20px, 3vw, 34px); min-height: 1.2em;
}
.lk-choices { display: grid; gap: 10px; }
.lk-choice {
  display: grid; grid-template-columns: 26px auto 1fr; align-items: baseline; gap: 14px;
  text-align: left; cursor: pointer;
  background: rgba(20,20,20,0.4); border: 1px solid var(--rule);
  border-radius: 12px; padding: 16px 20px;
  color: var(--cream); font-family: var(--mono);
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.lk-choice:focus-visible {
  border-color: var(--coral); background: rgba(240,168,150,0.06); transform: translateX(4px); outline: none;
}
/* hover only on devices that actually hover — a tap must never leave a
   sticky highlight on the same-position option of the NEXT question */
@media (hover: hover) and (pointer: fine) {
  .lk-choice:hover { border-color: var(--coral); background: rgba(240,168,150,0.06); transform: translateX(4px); }
}
.lk-choice:active { border-color: var(--coral); background: rgba(240,168,150,0.1); }
.lk-choice-n { color: var(--coral); font-size: 12px; letter-spacing: 0.1em; }
.lk-choice-l { font-size: clamp(15px, 1.9vw, 19px); color: var(--cream); font-family: var(--body); font-weight: 600; }
.lk-choice-s { font-size: 12.5px; color: var(--dim); letter-spacing: 0.04em; }

.lk-choice-in { opacity: 0; animation: lk-choice-rise .5s var(--ease) forwards; }
@keyframes lk-choice-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* readout */
.lk-readout-1 { font-family: var(--body); font-weight: 600; font-size: clamp(26px, 3.6vw, 44px); letter-spacing: -0.02em; color: var(--cream); min-height: 1.1em; }
.lk-readout-2 { font-family: var(--body); font-size: clamp(16px, 2vw, 22px); line-height: 1.4; color: var(--cream-2); margin-top: 12px; max-width: 34ch; min-height: 1em; }
.lk-readout-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: clamp(24px, 4vw, 40px); }
.lk-cta-lead { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--dim); text-transform: uppercase; }
.lk-cta-link { font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; color: var(--coral); }
.lk-cta-link:hover { text-decoration: underline; }
.lk-enter {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cream); background: var(--coral); border: 0; border-radius: 999px;
  padding: 11px 26px; cursor: pointer; color: #0a0a0a; font-weight: 600;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.lk-enter:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(240,168,150,0.25); }

/* inquiry / email capture */
.lk-inq { margin-top: clamp(22px, 3.5vw, 34px); }
.lk-inq-label { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; }
.lk-inq-form { display: flex; align-items: center; gap: 10px; max-width: 440px; border: 1px solid var(--rule); border-radius: 10px; padding: 4px 4px 4px 14px; transition: border-color .25s var(--ease); }
.lk-inq-form:focus-within { border-color: var(--coral); }
.lk-inq-mk { color: var(--coral); font-family: var(--mono); }
.lk-inq-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--cream); font-family: var(--mono); font-size: 14px; letter-spacing: 0.02em; padding: 10px 0; }
.lk-inq-input::placeholder { color: var(--dim); opacity: 0.6; }
.lk-inq-send { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #0a0a0a; font-weight: 600; background: var(--coral); border: 0; border-radius: 8px; padding: 11px 20px; cursor: pointer; transition: transform .2s var(--ease); }
.lk-inq-send:hover { transform: translateY(-1px); }
.lk-inq-msg { font-family: var(--mono); font-size: 12px; margin-top: 10px; min-height: 1em; color: var(--dim); }
.lk-inq-err { color: var(--coral); }
.lk-inq-done { font-family: var(--mono); font-size: clamp(14px, 1.8vw, 17px); color: var(--coral); letter-spacing: 0.04em; }
.lk-readout .lk-enter { margin-top: clamp(20px, 3vw, 30px); }
/* ghost "enter site" — a quiet link, never mistaken for the coral send button */
.lk-enter-ghost { background: transparent; color: var(--dim); font-weight: 500; padding: 8px 0; }
.lk-enter-ghost:hover { background: transparent; color: var(--coral); transform: none; box-shadow: none; }

/* scanline layer (skins opt in) */
.lk-intro-scan { position: absolute; inset: 0; pointer-events: none; opacity: 0; }

/* ════════ SKIN A — terminal boot / clearance ════════ */
.lk-intro-A { background: #060606; align-items: stretch; }
.lk-intro-A .lk-intro-scan {
  opacity: 1;
  background: repeating-linear-gradient(0deg, rgba(240,168,150,0.035) 0, rgba(240,168,150,0.035) 1px, transparent 1px, transparent 3px);
}
.lk-intro-A::before {
  content: "// GUEST ACCESS GRANTED"; position: absolute;
  top: clamp(20px, 4vw, 40px); left: clamp(28px, 7vw, 96px);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em; color: var(--dim); opacity: 0.7;
}
.lk-intro-A .lk-q-prompt, .lk-intro-A .lk-readout-1 { font-family: var(--mono); text-transform: lowercase; }
.lk-intro-A .lk-q-prompt::before { content: "> "; color: var(--coral); }
.lk-intro-A .lk-choice { border-radius: 2px; background: rgba(240,168,150,0.03); }
.lk-intro-A .lk-choice-l { font-family: var(--mono); font-weight: 500; }
.lk-intro-A .lk-enter { border-radius: 2px; }

/* ════════ SKIN B — signal handshake (minimal premium) ════════ */
.lk-intro-B { background: rgba(10,10,10,0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); align-items: stretch; }
.lk-intro-B .lk-choice { border-radius: 999px; }
.lk-intro-B .lk-boot-line { color: var(--dim); }
/* the real sphere shows faintly through the blur — nothing else needed */

/* ════════ SKIN C — HUD overlay (diegetic) ════════ */
.lk-intro-C { background: linear-gradient(120deg, rgba(10,10,10,0.55), rgba(10,10,10,0.9)); align-items: stretch; justify-content: flex-end; }
.lk-intro-C .lk-intro-scan {
  opacity: 1;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 4px);
}
.lk-intro-C::before {
  content: "◦ LK.SYS // VISITOR INTERFACE"; position: absolute;
  top: clamp(20px, 4vw, 40px); left: clamp(28px, 7vw, 96px);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; color: var(--coral); opacity: 0.85;
}
.lk-intro-C .lk-intro-stage { max-width: 560px; }
.lk-intro-C .lk-q-prompt { font-size: clamp(20px, 2.6vw, 30px); }
.lk-intro-C .lk-choice { background: rgba(20,20,20,0.55); border-radius: 8px; backdrop-filter: blur(4px); }

/* reduced motion: kill scan flicker + rise anims (handled in JS too) */
@media (prefers-reduced-motion: reduce) {
  .lk-choice-in { animation: none; opacity: 1; }
  .lk-intro, .lk-intro-stage { transition: none; }
}

/* mobile — compact + centered so the prompt + all 4 options fit above the fold */
@media (max-width: 640px) {
  /* stretch (not flex-start) so the stage is bounded to the viewport width —
     otherwise the skin's align-items:flex-start lets long lines overflow right */
  .lk-intro, .lk-intro-A, .lk-intro-B, .lk-intro-C { align-items: stretch; }
  /* top-anchored on phones: screens have different heights (boot lines,
     4/5/3 options, readout) — centering re-seats the block every screen and
     the text visibly jumps. Anchored, every prompt types at the same spot. */
  .lk-intro { padding: 14vh 18px 28px; justify-content: flex-start; }
  .lk-intro-C { justify-content: flex-start; }
  .lk-intro-stage { max-width: none; width: 100%; min-width: 0; }

  .lk-intro-skip { top: 14px; right: 14px; padding: 7px 12px; font-size: 10px; }
  .lk-intro-skip span { display: none; }              /* drop [esc] hint on touch */
  .lk-intro-prog { bottom: 14px; right: 16px; font-size: 10px; }
  .lk-intro-A::before, .lk-intro-C::before { font-size: 9px; top: 16px; }

  .lk-q-prompt { font-size: clamp(18px, 5.2vw, 24px); margin-bottom: 18px; overflow-wrap: anywhere; }
  .lk-choices { gap: 8px; }
  .lk-choice { padding: 12px 14px; grid-template-columns: 20px 1fr; gap: 4px 12px; align-items: center; }
  .lk-choice-n { grid-row: 1 / span 2; align-self: center; }
  .lk-choice-l { grid-column: 2; grid-row: 1; font-size: 16px; }
  .lk-choice-s { grid-column: 2; grid-row: 2; font-size: 12px; }

  .lk-readout-1 { font-size: clamp(22px, 6.6vw, 30px); overflow-wrap: anywhere; }
  .lk-readout-2 { font-size: clamp(15px, 4.4vw, 19px); max-width: 100% !important; }
  /* hard-bound every readout child to the viewport so nothing pushes off-right */
  .lk-readout, .lk-inq, .lk-inq-form, .lk-inq-label, .lk-readout-2, .lk-readout-1 {
    max-width: 100% !important; box-sizing: border-box;
  }
  .lk-inq-form { flex-wrap: wrap; }               /* send drops below input if tight */
  /* 16px minimum — anything smaller makes iOS Safari auto-zoom the page on
     focus, which magnifies the fixed overlay past the viewport and smears the
     screens over each other */
  .lk-inq-input { flex: 1 1 60%; font-size: 16px; }
  .lk-inq-send { padding: 11px 16px; flex: 0 0 auto; }
}