/* METROPOL — Gate (countdown + password)
   Two blank black screens. Departure-board language, nothing else.
   Shared by "/" (countdown) and "/enter" (password).
*/

.gate {
  min-height: 100vh;
  background: var(--m-bg);
  color: var(--m-fg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--m-gutter-mobile);
  overflow: hidden;
  position: relative;
}

/* faint grain so the black isn't dead-flat */
.gate__grain {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.30; mix-blend-mode: screen;
  background: var(--m-grain-svg);
}

.gate__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--m-s-12);
}

/* wordmark */
.gate__mark {
  font-family: var(--m-font-mono);
  font-size: var(--m-text-label);
  letter-spacing: 0.55em;
  text-transform: uppercase;
  color: var(--m-fg-dim);
  text-indent: 0.55em; /* compensate trailing tracking → optically centered */
}

/* ───── Countdown ─────────────────────────────────────── */
.gate__countdown {
  display: flex; align-items: flex-start; gap: clamp(16px, 4vw, 48px);
}
.gate__cd-unit { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.gate__cd-num {
  font-family: var(--m-font-mono);
  font-size: clamp(40px, 11vw, 104px);
  font-weight: var(--m-w-bold);
  letter-spacing: var(--m-track-tight);
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
.gate__cd-label {
  font-family: var(--m-font-mono);
  font-size: var(--m-text-micro);
  letter-spacing: 0.4em; text-indent: 0.4em;
  color: var(--m-fg-faint);
  text-transform: uppercase;
}
.gate__cd-sep {
  font-family: var(--m-font-mono);
  font-size: clamp(28px, 7vw, 72px);
  font-weight: var(--m-w-regular);
  line-height: 1; color: var(--m-fg-faint);
  align-self: flex-start;
  animation: m-blink 1.4s steps(1) infinite;
}

/* ───── Lock affordance (Screen 1 → /enter) ───────────── */
.gate__lock {
  position: relative; z-index: 1;
  margin-top: var(--m-s-16);
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--m-font-mono);
  font-size: var(--m-text-label); letter-spacing: 0.3em; text-indent: 0.3em;
  color: var(--m-fg-faint);
  text-decoration: none; text-transform: uppercase;
  border: 1px solid var(--m-border-subtle);
  padding: 12px 20px;
  transition: color var(--m-t-fast), border-color var(--m-t-fast);
}
.gate__lock:hover { color: var(--m-fg); border-color: var(--m-fg); }
.gate__lock-icon { font-size: 13px; }

/* ───── Password (Screen 2) ───────────────────────────── */
.gate__sub {
  font-family: var(--m-font-mono);
  font-size: var(--m-text-meta); letter-spacing: 0.25em; text-indent: 0.25em;
  color: var(--m-fg-faint); text-transform: uppercase;
  margin: 0;
}
.gate__form {
  display: flex; gap: var(--m-s-3); align-items: stretch;
  min-width: min(420px, 86vw);
}
.gate__form .m-input { flex: 1; }
.gate__error {
  font-family: var(--m-font-mono);
  font-size: var(--m-text-label); letter-spacing: 0.3em; text-indent: 0.3em;
  color: var(--m-fg-faint); text-transform: uppercase;
  height: 1em; opacity: 0;
  transition: opacity var(--m-t-fast);
}
.gate__error--on { opacity: 1; color: var(--m-fg-dim); }

.gate__back {
  position: relative; z-index: 1;
  margin-top: var(--m-s-10);
  font-family: var(--m-font-mono);
  font-size: var(--m-text-label); letter-spacing: 0.3em; text-indent: 0.3em;
  color: var(--m-fg-faint); text-decoration: none; text-transform: uppercase;
  transition: color var(--m-t-fast);
}
.gate__back:hover { color: var(--m-fg-dim); }

/* shake on wrong password */
.gate__form--shake { animation: gate-shake 0.4s var(--m-ease-io); }
@keyframes gate-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .gate__cd-sep, .gate__form--shake { animation: none; }
}