/* =====================================================================
   FLYTE RUN CLUB — MEMBERS ONLY ENTRY SCREEN
   Uses the same tokens as styles.css, so it inherits the brand exactly.
   Nothing in here touches the main site's styles.
   ===================================================================== */

/* Keep the scrollbar's space reserved at all times. The entry screen locks
   scrolling, which would otherwise remove the scrollbar and shift the whole
   layout sideways the moment the site is revealed. */
html { scrollbar-gutter: stable; }

.gate {
  position: fixed; inset: 0;
  z-index: 9000;                    /* under the grain overlay (9998) */
  display: none;                    /* shown only when html has .gate-on */
  place-items: center;
  background: var(--bg);
  overflow: hidden;
  padding: calc(var(--nav-h) * 0.5) 0;
}
html.gate-on .gate { display: grid; }
/* Hold the page still behind the entry screen */
html.gate-on, html.gate-on body { overflow: hidden; }

/* ---------- faint route lines drifting behind the form ---------- */
.gate__lines {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.gate__lines path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.16;
}

/* ---------- content ---------- */
.gate__inner {
  position: relative; z-index: 2;
  width: min(100% - 40px, 520px);
  margin-inline: auto;
}

.gate__label {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-head);
  font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 20px;
}
.gate__label::before { content: ""; width: 28px; height: 2px; background: var(--accent); }

.gate__title {
  font-family: var(--font-head);
  margin-top: 0;
  font-size: clamp(2.7rem, 12vw, 4.2rem);
  font-weight: 900; line-height: 0.88; letter-spacing: -0.04em;
  margin: 0 0 18px;
}

.gate__sub {
  font-size: 1.02rem; line-height: 1.5;
  color: var(--ink-soft);
  max-width: 34ch;
  margin: 0 0 30px;
}

.gate__free {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-head);
  font-size: 0.82rem; font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin: -18px 0 28px;
}
.gate__free::before {
  content: "";
  flex: 0 0 auto;
  width: 7px; height: 7px;
  background: var(--accent);
  border-radius: 50%;
}

/* ---------- form ---------- */
.gate__form { margin: 0; }
.gate__row { display: flex; flex-direction: column; gap: 10px; }

.gate__input {
  box-sizing: border-box;
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;                  /* 16px stops iOS zooming on focus */
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 15px 16px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.gate__input::placeholder { color: var(--ink-faint); }
.gate__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.gate__input.is-invalid { border-color: var(--accent-dark); }

.gate__submit { width: 100%; padding: 16px 24px; position: relative; }
.gate__submit[disabled] { opacity: 1; cursor: default; }
.gate__submit[disabled]:hover { background: var(--accent); border-color: var(--accent); transform: none; box-shadow: none; }

/* loading state: a small spinner replaces the label */
.gate__spinner {
  display: none;
  width: 17px; height: 17px;
  border: 2px solid rgba(255,255,255,0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: gate-spin 0.6s linear infinite;
}
.gate__submit.is-loading .gate__submit-label { display: none; }
.gate__submit.is-loading .gate__spinner { display: block; }
@keyframes gate-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .gate__spinner { animation-duration: 1.4s; }
}

/* honeypot — off-screen, never shown to a person */
.gate__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.gate__error {
  margin: 12px 0 0;
  font-size: 0.88rem; font-weight: 500;
  color: var(--accent-dark);
}
.gate__error[hidden] { display: none; }

.gate__fine {
  margin: 14px 0 0;
  font-size: 0.78rem; line-height: 1.45;
  color: var(--ink-faint);
}

/* ---------- skip: deliberately quiet ---------- */
.gate__skip {
  display: inline-block;
  margin-top: 26px;
  padding: 6px 0;
  background: none; border: 0;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--ink-faint);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.gate__skip:hover { color: var(--ink-soft); border-bottom-color: var(--line); }
.gate__skip:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- access granted ---------- */
.gate__granted {
  position: absolute; inset: 0;
  z-index: 3;
  display: grid; place-items: center;
  opacity: 0;
  pointer-events: none;
  padding: 0 20px;
}
.gate__granted-text {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 7vw, 3rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-align: center;
  white-space: nowrap;
}
.gate__granted-rule {
  display: block;
  height: 2px; width: 0;
  background: var(--accent);
  margin: 18px auto 0;
}

/* ---------- the sweep that wipes the screen away ---------- */
.gate__sweep {
  position: absolute; left: 0; right: 0; top: 50%;
  z-index: 4;
  height: 3px;
  margin-top: -1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
  pointer-events: none;
}

@media (min-width: 620px) {
  .gate__row { flex-direction: row; }
  .gate__input { flex: 1 1 auto; }
  .gate__submit { width: auto; flex: 0 0 auto; }
}