/* The private preview gate: a cosmetic password over the board, branded for Identity Labs.
   The board renders underneath, blurred, so the reviewer can see there is something to open.
   The unlock is choreographed in js/gate.js; this file holds the resting states. */
.gate {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center;
  padding: 16px;
}
.gate[hidden] { display: none; }
.gate.is-opening { pointer-events: none; }
@keyframes gate-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes gate-shell-in { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }
/* Nothing of the site's own chrome shows while the gate is up. */
body.has-gate .trail, body.has-gate .chrome { visibility: hidden; }

/* The scrim is its own layer so the reveal can clear it under the card. Nothing
   above it in the gate may carry opacity or a filter, or the blur would stop seeing the board.
   The entrances are one shot keyframes, so they never wait on script or a frame callback: a tab
   opened in the background still shows the gate, and never an invisible layer over the board. */
.gate-scrim {
  position: absolute; inset: 0;
  animation: gate-in 320ms var(--ease-out) both;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(26px) saturate(140%);
  backdrop-filter: blur(26px) saturate(140%);
}

.gate-shell {
  position: relative;
  width: min(440px, 100%);
  padding: 7px;
  border-radius: 30px;
  background: var(--slot);
  box-shadow: 0 0 0 1px var(--line);
  animation: gate-shell-in 420ms var(--ease-out) both;
}

.gate-card {
  margin: 0;
  border-radius: 23px;
  background: var(--panel);
  box-shadow: var(--panel-shadow);
  padding: 58px 40px 30px;
  text-align: center;
}

.gate-mark {
  margin: 0 0 16px;
  font-family: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.018em;
  color: var(--text);
}
.gate-mark em { font-style: italic; }

.gate-lead {
  margin: 0 0 34px;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.003em;
  color: var(--text-2);
}

/* ---------- the field ---------- */
.gate-field {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  height: 56px;
  padding: 0 7px 0 24px;
  border-radius: 999px;
  background: var(--slot);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  cursor: text;
}
/* The hairline wakes in two steps: a little on focus, fully once something is typed. */
.gate-field::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--edge-hot);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease-out);
}
.gate-field:focus-within::after { opacity: 0.45; }
.gate.has-value .gate-field::after { opacity: 1; }
.gate.is-wrong .gate-field { animation: gate-nudge 280ms var(--ease-out); }
@keyframes gate-nudge {
  0% { transform: translateX(0); }
  30% { transform: translateX(-5px); }
  60% { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

/* A plain text field, masked by the page, so password managers have nothing to latch onto.
   Without script it masks with discs where the browser supports it, and shows the letters
   where it does not. */
.gate-field input {
  flex: 1; min-width: 0; height: 100%;
  background: none; border: 0; outline: 0; padding: 0;
  font: inherit; font-size: 17px;
  color: var(--text);
  letter-spacing: 0.08em;
  -webkit-text-security: disc;
}
/* With script, the typed characters are drawn as dots that arrive one by one. */
.gate.has-dots .gate-field input { color: transparent; caret-color: transparent; }
.gate.has-dots .gate-field input::selection { background: transparent; }
.gate-dots {
  position: absolute; left: 24px; right: 60px; top: 0; bottom: 0;
  display: none; align-items: center; gap: 9px;
  overflow: hidden;
  pointer-events: none;
}
.gate.has-dots .gate-dots { display: flex; }
.gate-dot {
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text);
}
.gate-caret {
  flex: none;
  width: 1.5px; height: 20px;
  margin-left: -3px;
  border-radius: 1px;
  background: var(--text);
  opacity: 0;
}
.gate-dots .gate-caret:first-child { margin-left: 0; }
.gate-field:focus-within .gate-caret { opacity: 1; animation: gate-blink 1.1s var(--ease-in-out) 500ms infinite; }
@keyframes gate-blink {
  0%, 46% { opacity: 1; }
  54%, 100% { opacity: 0; }
}

/* The arrow sleeps until something is typed, then the fill brightens and the arrow steps forward. */
.gate-go {
  position: relative;
  flex: none;
  width: 42px; height: 42px;
  padding: 0;
  border: 0; border-radius: 50%;
  background: none;
  color: var(--text);
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform 140ms var(--ease-out);
}
.gate-go-fill {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--text);
  opacity: 0.08;
  transform: scale(0.9);
  transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out);
}
.gate-arrow {
  position: absolute; left: 50%; top: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  transition: opacity 200ms var(--ease-out), transform 260ms var(--ease-out);
}
.gate-arrow.is-idle { color: var(--text-3); transform: translateX(-2px); }
.gate-arrow.is-awake { color: var(--bg); opacity: 0; transform: translateX(-2px); }
.gate.has-value .gate-go-fill { opacity: 1; transform: none; }
.gate.has-value .gate-arrow.is-idle { opacity: 0; transform: none; }
.gate.has-value .gate-arrow.is-awake { opacity: 1; transform: none; }
.gate-go:active { transform: scale(0.94); }
.gate-go:focus-visible { outline: 2px solid var(--edge-hot); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .gate.has-value .gate-go:hover .gate-arrow.is-awake { transform: translateX(2px); }
}

.gate-note {
  min-height: 20px;
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--text-3);
}

/* ---------- the loading wheel: shown until the wordmark's font is in ---------- */
.gate-spin {
  position: absolute; left: 50%; top: 50%;
  width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  border-top-color: var(--text-2);
  animation: gate-spin 820ms linear infinite;
  transition: opacity 160ms var(--ease-out);
  pointer-events: none;
}
@keyframes gate-spin { to { transform: rotate(360deg); } }
.gate.is-ready .gate-spin { opacity: 0; animation-play-state: paused; }
.gate-card > * { opacity: 0; }
.gate.is-ready .gate-card > * { opacity: 1; transition: opacity 240ms var(--ease-out); }

@media (max-width: 560px) {
  .gate-card { padding: 48px 22px 24px; }
  .gate-mark { font-size: 40px; }
  .gate-lead { margin-bottom: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .gate-scrim, .gate-shell { animation: none; }
  .gate.is-wrong .gate-field { animation: none; }
  .gate-field:focus-within .gate-caret { animation: none; }
  .gate-arrow, .gate-go-fill { transition: opacity 160ms ease-out; }
}
@media (prefers-reduced-transparency: reduce) {
  .gate-scrim { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}