/* THE SIGNAL LOCK — the entrance. A human before the slogans.
   Dark, restrained signal-room. The portrait is the dominant object; the
   XFINALE mark stays small. Motion is subtle and compositor-only (transform/
   opacity/filter). No marquees, no background video, no particle fields, no
   fake scanning delays. Everything honors prefers-reduced-motion. */

#signal-lock {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--s-3);
  padding: clamp(0.9rem, 2vw, 1.6rem);
  background:
    radial-gradient(120% 90% at 50% 12%, rgba(255, 176, 32, 0.06), transparent 55%),
    radial-gradient(140% 120% at 50% 120%, rgba(255, 80, 48, 0.05), transparent 60%),
    var(--space-void);
  color: var(--ink);
  font-family: var(--font-mono);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
#signal-lock[hidden] { display: none; }
#signal-lock.is-leaving { opacity: 0; transition: opacity 0.44s var(--ease-out-expo); pointer-events: none; }

/* a single, slow, compositor-only breath of light — not a loop of "work" */
#signal-lock::before {
  content: "";
  position: absolute;
  inset: -20% -20% auto -20%;
  height: 70%;
  background: radial-gradient(60% 60% at 50% 0%, rgba(255, 208, 138, 0.10), transparent 70%);
  opacity: 0.7;
  animation: sl-breathe 9s var(--ease-out-expo) infinite alternate;
  pointer-events: none;
}
@keyframes sl-breathe { from { opacity: 0.45; transform: translateY(-2%); } to { opacity: 0.8; transform: translateY(0); } }

/* ── top bar: small mark + skip ── */
.sl__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); position: relative; z-index: 2;
}
.sl__mark {
  font-family: var(--font-display);
  font-weight: 700; letter-spacing: var(--tracking-wide);
  font-size: var(--text-sm); color: var(--ink-dim);
}
.sl__mark b { color: var(--neon-cyan); }
.sl__skip {
  appearance: none; background: transparent; cursor: pointer;
  border: 1px solid var(--space-line-bright); border-radius: 999px;
  color: var(--ink-dim); font-family: var(--font-mono);
  font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
  padding: 0.42rem 0.9rem; transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.sl__skip:hover, .sl__skip:focus-visible { color: var(--ink); border-color: var(--neon-cyan); background: rgba(255, 176, 32, 0.08); }

/* ── stage ── */
.sl__stage {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(0.8rem, 2.4vh, 1.8rem); text-align: center;
  min-height: 0;
}
.sl__prompt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 0.9rem + 1.6vw, 1.9rem);   /* present, not a giant slogan */
  letter-spacing: 0.02em; line-height: 1.15; color: var(--ink);
  max-width: 22ch; text-wrap: balance;
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo);
}
#signal-lock.is-ready .sl__prompt { opacity: 1; transform: none; }

/* ── the trio ── */
.sl__trio {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(0.5rem, 1.8vw, 1.3rem);
  width: 100%; max-width: 760px;
}
.sl__portrait {
  --hold: 0;
  position: relative; flex: 1 1 0; min-width: 0;
  max-width: 240px;
  appearance: none; background: transparent; padding: 0; cursor: pointer;
  border: none; color: inherit; font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  opacity: 0; transform: translateY(10px) scale(0.98);
  transition: opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo), filter var(--dur);
}
#signal-lock.is-ready .sl__portrait { opacity: 1; transform: none; }
/* the primary (recognized) resolves first + sits a touch larger */
.sl__portrait[data-role="recognized"] { flex-grow: 1.18; transition-delay: 0s; }
.sl__portrait[data-role="fresh"]      { transition-delay: 0.35s; }
.sl__portrait[data-role="hidden"]     { transition-delay: 0.5s; }

.sl__frame {
  position: relative; width: 100%; aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden; background: var(--space-panel);
  border: 1px solid var(--space-line);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4), 0 10px 30px rgba(0,0,0,0.5);
  transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur) var(--ease-out-expo);
}
.sl__frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(0.55) contrast(1.02) brightness(0.82);
  transition: filter var(--dur), transform var(--dur-slow) var(--ease-out-expo);
}
.sl__frame::after {   /* signal vignette so the face reads on dark */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,6,4,0.85), transparent 45%);
  pointer-events: none;
}
/* fallback when the portrait asset fails: initials on a signal tile */
.sl__frame[data-fallback] { display: grid; place-items: center; }
.sl__frame[data-fallback] img { display: none; }
.sl__frame[data-fallback]::before {
  content: attr(data-initials);
  font-family: var(--font-display); font-weight: 700; font-size: 2.4rem;
  color: var(--phosphor); opacity: 0.8; z-index: 1;
}

.sl__role {
  font-size: 0.62rem; letter-spacing: var(--tracking-wide);
  color: var(--ink-faint); text-transform: uppercase;
}
.sl__name {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-sm); color: var(--ink);
  opacity: 0; transition: opacity var(--dur);
}
.sl__sig {
  font-size: 0.66rem; line-height: 1.3; color: var(--ink-dim);
  min-height: 2.1em; max-width: 24ch;
  opacity: 0; transition: opacity var(--dur);
}
.sl__sig b { color: var(--phosphor); font-weight: 400; }

/* focus / hover: the chosen signal comes forward, the others recede */
.sl__portrait:hover, .sl__portrait:focus-visible { outline: none; }
.sl__portrait:hover .sl__frame,
.sl__portrait:focus-visible .sl__frame {
  border-color: var(--neon-cyan);
  box-shadow: var(--glow-cyan), 0 12px 34px rgba(0,0,0,0.55);
  transform: translateY(-4px);
}
.sl__portrait:hover .sl__frame img,
.sl__portrait:focus-visible .sl__frame img { filter: grayscale(0) contrast(1.05) brightness(1); }
.sl__portrait:hover .sl__name, .sl__portrait:focus-visible .sl__name,
.sl__portrait:hover .sl__sig,  .sl__portrait:focus-visible .sl__sig,
.sl__portrait.is-active .sl__name, .sl__portrait.is-active .sl__sig { opacity: 1; }
.sl__portrait:focus-visible .sl__frame { outline: 2px solid var(--phosphor); outline-offset: 3px; }
#signal-lock.is-holding .sl__portrait:not(.is-active) { opacity: 0.4; filter: saturate(0.6); }

/* the hold ring — drawn only while a hold is in progress */
.sl__ring { position: absolute; inset: -6px; pointer-events: none; opacity: 0; transition: opacity var(--dur-fast); }
.sl__portrait.is-active .sl__ring { opacity: 1; }
.sl__ring circle { fill: none; stroke-width: 3; }
.sl__ring .sl__ring-track { stroke: rgba(255,176,32,0.18); }
.sl__ring .sl__ring-run {
  stroke: var(--neon-cyan); stroke-linecap: round;
  stroke-dasharray: var(--circ); stroke-dashoffset: calc(var(--circ) * (1 - var(--hold)));
  transform: rotate(-90deg); transform-origin: center;
  filter: drop-shadow(0 0 6px rgba(255,176,32,0.6));
}

/* the lock stamp */
.sl__stamp {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 2px;
  opacity: 0; transform: scale(0.9); pointer-events: none;
}
.sl__portrait.is-locked .sl__stamp { opacity: 1; transform: none; transition: opacity var(--dur), transform var(--dur) var(--ease-snap); }
.sl__stamp b { font-family: var(--font-display); font-size: 0.8rem; letter-spacing: var(--tracking-wide); color: var(--phosphor); }
.sl__stamp span { font-size: 0.6rem; letter-spacing: var(--tracking-wide); color: var(--ink-dim); }

/* ── bottom: hint + honest build note ── */
.sl__bottom { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: var(--s-2); text-align: center; }
.sl__hint {
  font-size: var(--text-xs); letter-spacing: var(--tracking-wide); color: var(--ink-dim);
  animation: sl-hint 2.6s ease-in-out infinite;
}
@keyframes sl-hint { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }
.sl__build {
  font-size: 0.6rem; letter-spacing: 0.1em; color: var(--ink-faint);
  text-transform: uppercase;
}
.sl__build b { color: var(--neon-violet); font-weight: 700; }

/* ── the post-lock card ── */
.sl__card {
  position: relative; z-index: 3;
  width: min(94vw, 460px);
  background: linear-gradient(180deg, var(--space-deep), var(--space-void));
  border: 1px solid var(--space-line-bright); border-radius: var(--radius-lg);
  box-shadow: 0 24px 70px rgba(0,0,0,0.6), var(--glow-soft);
  padding: clamp(1rem, 3vw, 1.6rem);
  display: none; flex-direction: column; gap: var(--s-3); text-align: left;
}
#signal-lock.is-locked .sl__stage { display: none; }
#signal-lock.is-locked .sl__card { display: flex; }
.sl__card-head { display: flex; align-items: center; gap: var(--s-3); }
.sl__card-portrait { width: 66px; height: 66px; border-radius: var(--radius-sm); object-fit: cover; border: 1px solid var(--space-line-bright); flex: none; }
.sl__card-name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--ink); line-height: 1; }
.sl__card-domain { font-size: var(--text-xs); letter-spacing: var(--tracking-wide); color: var(--ink-faint); text-transform: uppercase; margin-top: 4px; }
.sl__row { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s-2) var(--s-3); align-items: baseline; }
.sl__row dt { font-size: 0.62rem; letter-spacing: var(--tracking-wide); color: var(--neon-cyan); text-transform: uppercase; padding-top: 2px; }
.sl__row dd { margin: 0; font-size: var(--text-xs); line-height: 1.4; color: var(--ink-dim); }
.sl__row dd a { color: var(--phosphor); text-decoration: none; border-bottom: 1px dotted rgba(255,208,138,0.4); }
.sl__row dd a:hover { border-bottom-style: solid; }
.sl__connected { display: flex; flex-direction: column; gap: 3px; }
.sl__receipts b { color: var(--phosphor); font-weight: 700; }
.sl__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-1); }
.sl__act {
  appearance: none; cursor: pointer; flex: 1 1 auto;
  border: 1px solid var(--space-line-bright); border-radius: 999px;
  background: rgba(255,176,32,0.06); color: var(--ink);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em;
  padding: 0.6rem 0.7rem; text-align: center; text-decoration: none;
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.sl__act--primary { background: var(--neon-cyan); color: #1a0f04; border-color: var(--neon-cyan); font-weight: 700; }
.sl__act:hover, .sl__act:focus-visible { border-color: var(--neon-cyan); transform: translateY(-1px); outline: none; }
.sl__act:focus-visible { outline: 2px solid var(--phosphor); outline-offset: 2px; }

/* ── return visit ── */
.sl__return { position: relative; z-index: 3; display: none; flex-direction: column; align-items: center; gap: var(--s-3); text-align: center; }
#signal-lock.is-return .sl__stage, #signal-lock.is-return .sl__card { display: none; }
#signal-lock.is-return .sl__return { display: flex; }
.sl__welcome { font-size: var(--text-xs); letter-spacing: var(--tracking-mega); color: var(--ink-faint); text-transform: uppercase; }
.sl__last { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); color: var(--phosphor); }
.sl__return-acts { display: flex; gap: var(--s-2); flex-wrap: wrap; justify-content: center; }

/* ── mobile ── */
@media (max-width: 560px) {
  #signal-lock { gap: var(--s-2); }
  .sl__trio { gap: 0.45rem; }
  .sl__portrait { max-width: none; }
  .sl__portrait[data-role="recognized"] { flex-grow: 1.35; }
  .sl__sig { font-size: 0.6rem; min-height: 2.4em; }
  .sl__name { font-size: var(--text-xs); }
}

/* ── reduced motion: no drift, no pulses, instant reveals ── */
@media (prefers-reduced-motion: reduce) {
  #signal-lock::before { animation: none; }
  .sl__hint { animation: none; opacity: 0.8; }
  .sl__prompt, .sl__portrait { transition: none !important; opacity: 1 !important; transform: none !important; }
  .sl__frame, .sl__frame img { transition: none; }
  .sl__frame img { filter: grayscale(0) brightness(1); }
}