/* ═══════════ entry gate ═══════════
   The panel that covers the wait between "Begin interview" and the first
   question.

   It is shared because that wait spans two documents: it opens on the setup
   page the moment the button is pressed, and the interview room raises the same
   panel again before its own first paint. Two copies of these rules would mean
   two subtly different panels, and the navigation between them — which is the
   thing this exists to hide — would show.

   Deliberately quiet: one status, one action, no progress theatre. It reports
   only what the candidate can act on: connecting, then connected. Everything it
   needs is defined here, including its button, so a page can raise the gate by
   linking this file and nothing else. */

.gate {
  position: fixed; inset: 0; z-index: 400; display: grid; place-items: center;
  padding: 24px; background: rgba(6,6,12,.95); backdrop-filter: blur(20px);
  transition: opacity .42s ease, backdrop-filter .42s ease;
}
.gate[hidden] { display: none; }
.gate-panel {
  width: min(392px, 100%); text-align: center; padding: 40px 36px 34px;
  border-radius: 18px; background: #12121a;
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 30px 80px -32px rgba(0,0,0,.95);
  transition: transform .42s cubic-bezier(.3,.8,.3,1), opacity .3s ease;
  animation: gate-in .34s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes gate-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }

/* Leaving: the panel lifts toward the room opening behind it. */
.gate.leaving { opacity: 0; backdrop-filter: blur(0); pointer-events: none; }
.gate.leaving .gate-panel { transform: scale(1.06) translateY(-6px); opacity: 0; }

/* ── the mark, and the one moving part ── */
.gate-mark { position: relative; width: 54px; height: 54px; margin: 0 auto 22px; display: block; }
.gate-mark img { position: absolute; inset: 9px; width: 36px; height: 36px; object-fit: contain; }
/* One arc, turning. It stops and goes green the moment the room is ready,
   which is the whole of the progress reporting. */
.gate-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.08);
  border-top-color: #a78bfa;
  animation: gate-spin 1s linear infinite;
}
@keyframes gate-spin { to { transform: rotate(360deg); } }
.gate.ready .gate-ring { animation: none; border-color: rgba(52,211,153,.5); }

.gate-tick {
  position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px;
  border-radius: 50%; background: #10b981; border: 2px solid #12121a;
  display: grid; place-items: center; opacity: 0; transform: scale(.4);
  transition: opacity .2s ease, transform .3s cubic-bezier(.2,1.5,.4,1);
}
.gate-tick svg { width: 11px; height: 11px; color: #fff; }
.gate.ready .gate-tick { opacity: 1; transform: scale(1); }

/* ── words ── */
.gate-panel h2 {
  margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.02em;
  color: var(--ink, #f0eef7);
}
.gate-sub { margin: 9px 0 0; font-size: 13.5px; color: var(--muted, #918ca6); line-height: 1.5; }
.gate-state {
  display: inline-flex; align-items: center; gap: 8px; margin: 20px 0 0;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03);
  font: 500 10.5px/1 var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted, #918ca6);
}
.gate-state i {
  width: 6px; height: 6px; border-radius: 50%; background: #a78bfa;
  animation: gate-blink 1.3s infinite;
}
@keyframes gate-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.gate.ready .gate-state { border-color: rgba(52,211,153,.28); color: #34d399; }
.gate.ready .gate-state i { background: #34d399; animation: none; }
.gate.failed .gate-state { border-color: rgba(251,191,36,.3); color: #fbbf24; }
.gate.failed .gate-state i { background: #fbbf24; animation: none; }
.gate.failed .gate-ring { animation: none; border-color: rgba(251,191,36,.4); }

/* ── the one action ──
   Its own class rather than the host page's button style: the gate has to look
   the same on both pages, and those pages style their buttons differently. */
.gate-go {
  margin-top: 26px; width: 100%; justify-content: center;
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  font: 700 14px/1 var(--font, inherit); color: #fff; border: none; border-radius: 10px;
  padding: 15px 24px;
  background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
  box-shadow: 0 10px 30px -8px rgba(124,58,237,.55);
  animation: gate-in .3s cubic-bezier(.2,.7,.3,1) both;
  transition: filter .15s;
}
.gate-go:hover { filter: brightness(1.08); }
.gate-go[hidden] { display: none; }
.gate-go svg { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
  .gate, .gate-panel, .gate-ring, .gate-tick, .gate-go, .gate-state i {
    transition: none; animation: none;
  }
}