/* ─────────────────────────────────────────────────────────────
   gate.css — Access lock screen
   ───────────────────────────────────────────────────────────── */

.access-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--concrete-0);
  display: grid;
  place-items: stretch;
  overflow: hidden;
  isolation: isolate;
}
.access-gate.is-unlocking { pointer-events: none; }
.access-gate.is-gone { display: none; }

/* Blast-doors — start as a unified surface, split open on unlock */
.gate-door {
  position: absolute;
  left: 0; right: 0;
  height: 50%;
  background:
    linear-gradient(180deg, rgba(110,209,236,0.025), transparent 60%),
    var(--concrete-0);
  z-index: 0;
  pointer-events: none;
  transition: transform 1100ms cubic-bezier(.6,0,.4,1);
}
.gate-door--top { top: 0; }
.gate-door--bot { bottom: 0; }
/* The grid extends across the doors */
.gate-door::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,  rgba(110, 209, 236, 0.045) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(to bottom, rgba(110, 209, 236, 0.045) 1px, transparent 1px) 0 0 / 32px 32px;
  mask-image: radial-gradient(ellipse 80% 60% at center, #000 50%, transparent 95%);
}

.access-gate.is-unlocking .gate-door--top { transform: translateY(-105%); }
.access-gate.is-unlocking .gate-door--bot { transform: translateY( 105%); }

/* Slit — flash line that appears between the doors during unlock */
.gate-slit {
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 0;
  background: var(--safety);
  box-shadow: 0 0 24px var(--safety-glow), 0 0 8px var(--safety);
  transform: translateY(-50%);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  transition: opacity 200ms ease, height 200ms ease;
}
.access-gate.is-unlocking .gate-slit {
  opacity: 1;
  height: 1px;
  transition: opacity 80ms ease, height 80ms ease;
}

/* Background drawing */
.gate-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.gate-bg svg { width: 100%; height: 100%; display: block; }

/* Inner content frame */
.gate-inner {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 56px;
  gap: 24px;
  transition: opacity 380ms ease, transform 380ms ease;
}
.access-gate.is-unlocking .gate-inner {
  opacity: 0;
  transform: translateY(-12px);
}

/* ── Head row ── */
.gate-head {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--concrete-4);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.gate-head .lbl { color: var(--paper-3); display: block; margin-bottom: 4px; font-size: 9px; letter-spacing: 0.2em; }
.gate-head .val { color: var(--paper-0); }
.gate-doc { text-align: left; }
.gate-stamp { text-align: right; }
.gate-status {
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--safety);
}
.gate-status .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--safety);
  box-shadow: 0 0 0 4px var(--safety-glow);
  animation: pulse 2s ease-in-out infinite;
}

/* ── Body ── */
.gate-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  text-align: center;
  padding: 24px 0;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

.gate-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--paper-2);
}
.gate-eyebrow .line {
  width: 48px; height: 1px;
  background: var(--blueprint);
}

.gate-brand img {
  height: 56px;
  width: auto;
  filter: brightness(1.05);
}

.gate-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(48px, 7vw, 92px);
  letter-spacing: -0.035em;
  line-height: 0.96;
  color: var(--paper-0);
  margin: 0;
  text-wrap: balance;
}
.gate-title span { display: block; }
.gate-title .accent { color: var(--safety); }

.gate-sub {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--paper-2);
  max-width: 52ch;
  text-wrap: pretty;
}

/* ── Form ── */
.gate-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 480px;
  margin-top: 16px;
}

.gate-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.gate-label {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.gate-label .num { color: var(--blueprint); }
.gate-label .lbl { color: var(--paper-2); }

.gate-input-wrap {
  position: relative;
  border-bottom: 1px solid var(--concrete-4);
  transition: border-color 240ms ease;
  display: flex;
  align-items: center;
}
.gate-input-wrap::before, .gate-input-wrap::after {
  /* Drafting end-ticks on the input rule */
  content: "";
  position: absolute;
  width: 1px; height: 8px;
  background: var(--concrete-4);
  bottom: -1px;
  transition: background 240ms ease;
}
.gate-input-wrap::before { left: 0; }
.gate-input-wrap::after  { right: 0; }
.gate-input-wrap:focus-within { border-bottom-color: var(--blueprint); }
.gate-input-wrap:focus-within::before,
.gate-input-wrap:focus-within::after { background: var(--blueprint); }

#gate-name {
  flex: 1;
  appearance: none;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--paper-0);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.015em;
  padding: 14px 4px;
  caret-color: var(--safety);
}
#gate-name::placeholder {
  color: var(--paper-4);
  font-weight: 400;
  font-family: var(--f-body);
  font-size: 17px;
  letter-spacing: 0;
}

/* Blinking drafting cursor (decorative — sits to right of input rule) */
.gate-cursor {
  width: 10px;
  height: 22px;
  background: var(--blueprint);
  margin-right: 4px;
  animation: blink 1.1s steps(2, start) infinite;
  opacity: 0.7;
}
.gate-input-wrap:focus-within .gate-cursor { background: var(--safety); }
@keyframes blink { 50% { opacity: 0; } }

.gate-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px 22px;
  border: 1px solid var(--concrete-4);
  background: var(--concrete-1);
  color: var(--paper-2);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: not-allowed;
  transition: all 240ms ease;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.gate-submit:not(:disabled) {
  border-color: var(--safety);
  color: var(--paper-0);
  background: linear-gradient(180deg, rgba(224,39,64,0.22), rgba(224,39,64,0.08));
  cursor: pointer;
}
.gate-submit:not(:disabled):hover {
  background: rgba(224,39,64, 0.32);
}
.gate-submit .arr {
  display: inline-block;
  transition: transform 240ms ease;
}
.gate-submit:not(:disabled):hover .arr {
  transform: translateX(4px);
}

/* ── Foot ── */
.gate-foot {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
  gap: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--concrete-4);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-3);
}
.gate-foot .lbl { display: block; color: var(--paper-3); margin-bottom: 4px; font-size: 9px; }
.gate-foot .val { color: var(--paper-1); }
.gate-from { text-align: left; }
.gate-coord { text-align: center; color: var(--paper-3); }
.gate-rev { text-align: right; }

/* Topbar viewer stamp (filled in after unlock) */
.viewer-stamp {
  color: var(--blueprint);
}
.viewer-stamp .vn {
  color: var(--paper-0);
  margin-left: 6px;
}

/* Body lock — prevent scroll while gate is up */
body.gate-locked {
  overflow: hidden;
  height: 100vh;
}

/* Stamp animation when name appears in topbar */
@keyframes stamp-in {
  0% { opacity: 0; letter-spacing: 0.5em; }
  60% { opacity: 1; letter-spacing: 0.16em; }
  100% { opacity: 1; letter-spacing: 0.16em; }
}
.viewer-stamp.stamp-in {
  animation: stamp-in 700ms cubic-bezier(.22,1,.36,1) both;
}

/* Mobile */
@media (max-width: 720px) {
  .gate-inner { padding: 24px; }
  .gate-head, .gate-foot { grid-template-columns: 1fr; gap: 8px; text-align: left; }
  .gate-stamp, .gate-rev { text-align: left; }
  .gate-status { justify-content: flex-start; text-align: left; }
  .gate-coord { text-align: left; }
  #gate-name { font-size: 22px; }
}