/* ==========================================================================
   gate.css — access page only. Typography, rules and CSS geometry. No images.
   ========================================================================== */
:root {
  --g-ink: #101216;
  --g-ink-2: #171A20;
  --g-line: rgba(232, 229, 220, 0.10);
  --g-line-2: rgba(232, 229, 220, 0.20);
  --g-fg: #E8E5DC;
  --g-mute: #7C8695;
  --g-signal: #4557F0;
  --g-error: #E0765A;
  --g-ok: #6FBF9A;
  --g-sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --g-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--g-ink);
  color: var(--g-fg);
  font-family: var(--g-sans);
  font-size: 16px;
  line-height: 1.6;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--g-signal); outline-offset: 3px; }

/* ---- Architectural substrate ------------------------------------------- */
.gate {
  position: relative;
  min-height: 100%;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(1.1rem, 5vw, 3rem);
  isolation: isolate;
}

/* Fine plan grid */
.gate::before {
  content: "";
  position: absolute; inset: -80px;
  z-index: -2;
  background-image:
    linear-gradient(to right, var(--g-line) 0 1px, transparent 1px 100%),
    linear-gradient(to bottom, var(--g-line) 0 1px, transparent 1px 100%);
  background-size: 76px 76px;
  opacity: 0.55;
  animation: drift 44s linear infinite;
}

/* Soft mineral wash so the grid never reads as a flat pattern */
.gate::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background:
    radial-gradient(72% 58% at 50% 42%, rgba(69, 87, 240, 0.16), transparent 68%),
    radial-gradient(120% 90% at 50% 50%, transparent 34%, var(--g-ink) 88%);
  pointer-events: none;
}

@keyframes drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(76px, 76px, 0); }
}

/* Crosshair axes */
.gate__axis {
  position: absolute;
  background: var(--g-line-2);
  z-index: -1;
  pointer-events: none;
}
.gate__axis--h {
  left: 0; right: 0; top: 50%; height: 1px;
  transform: scaleX(0); transform-origin: center;
  animation: drawX 1.5s var(--g-ease) 0.15s forwards;
}
.gate__axis--v {
  top: 0; bottom: 0; left: 50%; width: 1px;
  transform: scaleY(0); transform-origin: center;
  animation: drawY 1.5s var(--g-ease) 0.3s forwards;
}
@keyframes drawX { to { transform: scaleX(1); } }
@keyframes drawY { to { transform: scaleY(1); } }

/* ---- Frame --------------------------------------------------------------- */
.gate__frame {
  position: relative;
  width: min(100%, 460px);
  background: rgba(16, 18, 22, 0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--g-line-2);
  padding: clamp(1.8rem, 5.5vw, 3.1rem);
  opacity: 0;
  transform: translateY(14px);
  animation: rise 0.9s var(--g-ease) 0.42s forwards;
  transition: opacity 0.45s var(--g-ease), transform 0.45s var(--g-ease);
}
@keyframes rise { to { opacity: 1; transform: none; } }

.gate__frame.is-open { opacity: 0; transform: translateY(-8px) scale(0.985); }

/* Register marks at the corners */
.gate__frame span.tick {
  position: absolute;
  width: 9px; height: 9px;
  border: 0;
}
.gate__frame span.tick::before, .gate__frame span.tick::after {
  content: ""; position: absolute; background: var(--g-signal);
}
.gate__frame span.tick::before { width: 9px; height: 1px; top: 0; left: 0; }
.gate__frame span.tick::after  { width: 1px; height: 9px; top: 0; left: 0; }
/* Positioned explicitly rather than mirrored, so each mark lands on its own
   corner regardless of how the browser resolves the transform origin. */
.tick--tl { top: -1px; left: -1px; }

.tick--tr { top: -1px; right: -1px; }
.tick--tr::before, .tick--tr::after { left: auto; right: 0; }

.tick--bl { bottom: -1px; left: -1px; }
.tick--bl::before, .tick--bl::after { top: auto; bottom: 0; }

.tick--br { bottom: -1px; right: -1px; }
.tick--br::before, .tick--br::after { top: auto; bottom: 0; left: auto; right: 0; }

/* Error shake */
.gate__frame.is-wrong { animation: shake 0.45s var(--g-ease); }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-8px); }
  32% { transform: translateX(7px); }
  50% { transform: translateX(-5px); }
  68% { transform: translateX(4px); }
  85% { transform: translateX(-2px); }
}

/* ---- Content ------------------------------------------------------------- */
.gate__eyebrow {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.665rem; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--g-mute);
}
.gate__eyebrow i { display: block; width: 26px; height: 1px; background: var(--g-signal); flex: none; }

.gate__title {
  margin: clamp(1.5rem, 4vw, 2.2rem) 0 0.65rem;
  font-size: clamp(1.35rem, 4.4vw, 1.75rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--g-fg);
}

.gate__sub {
  margin: 0 0 clamp(1.8rem, 4.5vw, 2.4rem);
  font-size: 0.83rem;
  line-height: 1.65;
  color: var(--g-mute);
  max-width: 34ch;
}

.gate__field { position: relative; margin-bottom: 1.4rem; }
.gate__label {
  display: block;
  font-size: 0.665rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--g-mute);
  margin-bottom: 0.85rem;
}

.gate__input {
  display: block;
  width: 100%;
  padding: 0.55rem 0 0.85rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--g-line-2);
  color: var(--g-fg);
  font-size: 1.05rem;
  letter-spacing: 0.34em;
  border-radius: 0;
  transition: border-color 0.3s var(--g-ease);
}
.gate__input::placeholder { color: rgba(124, 134, 149, 0.5); letter-spacing: 0.26em; font-size: 0.9rem; }
.gate__input:focus { outline: none; border-bottom-color: transparent; }
.gate__input::-ms-reveal, .gate__input::-ms-clear { display: none; }

.gate__underline {
  position: absolute; left: 0; bottom: 0;
  height: 1px; width: 100%;
  background: var(--g-signal);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.42s var(--g-ease);
  pointer-events: none;
}
.gate__input:focus ~ .gate__underline { transform: scaleX(1); }

.gate__actions { display: flex; align-items: center; gap: 1rem; }

.gate__submit {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.8rem;
  padding: 0.9rem 1.5rem;
  border: 1px solid var(--g-line-2);
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--g-fg);
  overflow: hidden;
  transition: color 0.35s var(--g-ease), border-color 0.35s var(--g-ease);
}
.gate__submit span { position: relative; z-index: 1; }
.gate__submit::before {
  content: ""; position: absolute; inset: 0;
  background: var(--g-signal);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.42s var(--g-ease);
}
.gate__submit:hover:not(:disabled) { color: #fff; border-color: var(--g-signal); }
.gate__submit:hover:not(:disabled)::before { transform: scaleX(1); }
.gate__submit:disabled { opacity: 0.45; cursor: not-allowed; }

.gate__arrow { width: 22px; height: 1px; background: currentColor; position: relative; flex: none; }
.gate__arrow::after {
  content: ""; position: absolute; right: 0; top: -2.5px;
  width: 6px; height: 6px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

.gate__msg {
  min-height: 2.6em;
  margin: 1.3rem 0 0;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--g-mute);
  transition: color 0.25s var(--g-ease);
}
.gate__msg[data-tone="error"] { color: var(--g-error); }
.gate__msg[data-tone="ok"] { color: var(--g-ok); }

.gate__foot {
  margin-top: clamp(1.4rem, 3.5vw, 2rem);
  padding-top: 1.2rem;
  border-top: 1px solid var(--g-line);
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(124, 134, 149, 0.62);
}
.gate__dot { display: inline-flex; align-items: center; gap: 0.5rem; }
.gate__dot::before {
  content: ""; width: 5px; height: 5px; background: var(--g-signal);
  border-radius: 50%; flex: none;
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.28; } }

@media (max-height: 560px) {
  .gate { align-items: start; }
  .gate__frame { padding: 1.6rem; }
  body { overflow: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .gate__frame { opacity: 1; transform: none; }
  .gate__axis--h { transform: scaleX(1); }
  .gate__axis--v { transform: scaleY(1); }
}