/* The demo site's sign-in page (app/gate.js) and the opening after it (app/intro.js). */

/* ── The page: a psychrometric chart behind a glass card ─────────────────────────── */
.gate {
  position: relative; isolation: isolate;
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  overflow: hidden;
  background: radial-gradient(90% 70% at 50% 40%, var(--bg-1) 0%, var(--bg-0) 70%);
}
.gate-chart { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; display: block; }
/* Fine scan lines, and a vignette that lets the chart fade out toward the edges and behind the card. */
.gate-scan {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(34% 46% at 50% 50%, color-mix(in srgb, var(--bg-0) 72%, transparent) 0%, transparent 100%),
    radial-gradient(120% 95% at 50% 50%, transparent 55%, var(--bg-0) 100%),
    repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in srgb, var(--line) 55%, transparent) 3px 4px);
}
/* The air state under the pointer (app/intro.js attachBackdrop). */
.gate-readout {
  position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none;
  padding: 8px 10px; border-radius: var(--r-sm);
  white-space: pre; font-family: var(--font-mono); font-size: var(--fs-11); line-height: 1.55; color: var(--text-2);
  background: color-mix(in srgb, var(--bg-0) 86%, transparent);
  box-shadow: inset 0 0 0 1px var(--accent-line), var(--shadow-2);
}
.gate-readout::first-line { color: var(--accent-hi); letter-spacing: .08em; }
.gate-readout[hidden] { display: none; }

.gate-main { position: relative; width: 100%; display: grid; place-items: center; padding: 40px 16px; }

/* ── The card ──────────────────────────────────────────────────────────────────── */
.gate-card {
  position: relative;
  width: min(408px, 100%);
  display: grid; gap: 18px;
  padding: 24px 26px 20px;
  border-radius: var(--r-lg);
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: var(--shadow-3), 0 0 0 1px var(--line-2);
  animation: rise-in var(--dur-3) var(--ease) both;
}
/* A measuring line along the top edge, sweeping like a scope trace. */
.gate-card::before {
  content: ''; position: absolute; left: 18px; right: 18px; top: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%) no-repeat;
  background-size: 40% 100%;
  animation: gate-trace 4.2s var(--ease) infinite;
}
@keyframes gate-trace { 0% { background-position: -60% 0; } 60%, 100% { background-position: 160% 0; } }
/* Registration marks at the corners, as on a drawing. */
.gate-corner { position: absolute; width: 12px; height: 12px; pointer-events: none; border: 0 solid var(--accent-line); }
.gate-corner.tl { top: -7px; left: -7px; border-top-width: 2px; border-left-width: 2px; }
.gate-corner.tr { top: -7px; right: -7px; border-top-width: 2px; border-right-width: 2px; }
.gate-corner.bl { bottom: -7px; left: -7px; border-bottom-width: 2px; border-left-width: 2px; }
.gate-corner.br { bottom: -7px; right: -7px; border-bottom-width: 2px; border-right-width: 2px; }

.gate-head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.gate-mark { width: 44px; height: 44px; border-radius: 14px; }
.gate-brand { min-width: 0; }
.gate-brand .b1 { font-family: var(--font-display); font-size: var(--fs-18); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; color: var(--text-1); }
.gate-brand .b2 { font-size: var(--fs-10); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-hi); }
.gate-chip {
  margin-left: auto; flex: none;
  padding: 3px 9px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: var(--fs-10); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3);
  box-shadow: inset 0 0 0 1px var(--line-2);
}

.gate-title { margin: 0; font-family: var(--font-display); font-size: var(--fs-24); font-weight: 700; letter-spacing: -.015em; color: var(--text-1); }
.gate-lede { margin: 4px 0 0; font-size: var(--fs-13); line-height: 1.45; color: var(--text-3); }

.gate-field { display: grid; gap: 6px; }
.gate-label { font-family: var(--font-mono); font-size: var(--fs-11); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
/* 16 px text: phones do not zoom into the field. */
.gate-field .input { height: var(--control-h-lg); font-size: var(--fs-16); }
.gate-pw { position: relative; }
.gate-pw .input { padding-right: 48px; }
.gate-eye {
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: var(--r-sm); color: var(--text-3);
}
.gate-eye:hover { color: var(--text-1); background: var(--accent-softer); }
.gate-eye:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.gate-error {
  display: flex; gap: 8px; align-items: flex-start;
  margin: 0; padding: 10px 12px; border-radius: var(--r-sm);
  font-size: var(--fs-13); line-height: 1.4; color: var(--text-1);
  background: var(--bad-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 45%, transparent);
}
.gate-error .icon { flex: none; margin-top: 1px; color: var(--bad); }

.gate-submit { --btn-h: var(--control-h-lg); font-size: var(--fs-15); }
.gate-note { display: flex; gap: 6px; align-items: center; margin: 0; font-size: var(--fs-12); color: var(--text-3); }
.gate-note .icon { flex: none; }
.gate-spec {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  padding-top: 12px; border-top: 1px dashed var(--line-2);
  font-family: var(--font-mono); font-size: var(--fs-10); letter-spacing: .06em; text-transform: uppercase; color: var(--text-4);
}
/* The square nodes of the opening's wireframe. */
.gate-spec span::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 7px; vertical-align: 1px; background: var(--accent); }

@media (max-width: 420px) {
  .gate-main { padding: 28px 16px; }
  .gate-card { padding: 20px 18px 16px; gap: 16px; }
  .gate-title { font-size: var(--fs-20); }
}
@media (pointer: coarse) {
  .gate-eye { width: 44px; height: 44px; right: 0; }
}

/* ── The opening ───────────────────────────────────────────────────────────────── */
/* A slate drafting sheet with light, fine line work: its colours do not follow the theme. */
.intro { position: fixed; inset: 0; z-index: 2147483000; cursor: pointer; }
/* While it plays, the navigation's own brand stays hidden under the one being drawn, then takes over from it. */
.rail-brand { transition: opacity .45s ease; }
.intro-on .rail-brand { opacity: 0; }
.intro-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.intro-skip {
  position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  height: 36px; padding: 0 14px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: .1em; text-transform: uppercase;
  color: #f2f5f8; background: rgba(33, 44, 57, .82);
  box-shadow: inset 0 0 0 1px rgba(196, 214, 232, .32);
}
.intro-skip:hover { box-shadow: inset 0 0 0 1px rgba(247, 163, 99, .75); }
.intro-skip:focus-visible { outline: none; box-shadow: inset 0 0 0 1px rgba(247, 163, 99, .9), 0 0 0 3px rgba(247, 163, 99, .45); }
@media (pointer: coarse) { .intro-skip { height: 44px; } }

@media (prefers-reduced-motion: reduce) {
  .gate-card, .gate-card::before { animation: none; }
}