/* The gate of this brand: always dark (the page carries the `dark` class, so the dark accents of brand.css apply), set on the
   left, with the mark and a field of pixel squares on the right. The accent comes from brand.css (linked after this file). */
:root {
  color-scheme: dark;
  --gate-bg: #020617;
  --gate-navy: #001840;
  --gate-fg: #f1f5f9;
  --gate-dim: #94a3b8;
  --gate-faint: #8391a7;
  --gate-line: rgba(148, 163, 184, 0.2);
  --gate-panel: rgba(6, 12, 30, 0.8);
  --gate-input-bg: rgba(2, 6, 23, 0.78);
  --gate-error: #fda4af;
  --gate-amber: #ffa00f;
  --gate-gutter: clamp(22px, 6vw, 96px);
  /* The height of the header (30px of padding above and below the logo): the content never starts above it. */
  --gate-top: 112px;
  --gate-font: "Avenir Next", Avenir, "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
  --gate-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

[hidden] {
  display: none !important;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--gate-bg);
  color: var(--gate-fg);
  font-family: var(--gate-font);
}

.gate-root {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(1100px 720px at 76% 46%, rgba(0, 24, 64, 0.95) 0%, rgba(0, 24, 64, 0) 70%),
    linear-gradient(180deg, #020617 0%, #030a1d 100%);
}

#gate-field {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* The warm light behind the mark, and the darkening of the left side that keeps the text readable over the squares. */
.gate-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(520px 380px at 76% 48%, rgba(249, 115, 22, 0.2) 0%, rgba(249, 115, 22, 0) 70%),
    linear-gradient(90deg, rgba(2, 6, 23, 0.88) 0%, rgba(2, 6, 23, 0.55) 42%, rgba(2, 6, 23, 0) 68%),
    linear-gradient(0deg, rgba(2, 6, 23, 0.7) 0%, rgba(2, 6, 23, 0) 22%);
}

.gate-art {
  position: absolute;
  top: 50%;
  right: 1.5vw;
  width: min(47vw, 800px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 34px 70px rgba(249, 115, 22, 0.32));
  transform: translateY(-50%);
  animation: gate-float 9s ease-in-out infinite alternate;
}

@keyframes gate-float {
  to {
    transform: translateY(calc(-50% - 14px)) rotate(-1.2deg);
  }
}

.gate-top {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px var(--gate-gutter);
}

.gate-logo {
  display: block;
  width: 12rem;
  max-width: 52vw;
  height: auto;
}

.gate-lang {
  min-width: 44px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--gate-line);
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.6);
  color: var(--gate-dim);
  font: 700 12px/1 var(--gate-mono);
  letter-spacing: 0.12em;
  cursor: pointer;
  backdrop-filter: blur(6px);
}

.gate-lang:hover,
.gate-lang:focus-visible {
  color: var(--gate-fg);
  border-color: var(--hyperaven-accent);
}

.gate-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
}

.gate-scene {
  position: absolute;
  top: 50%;
  left: var(--gate-gutter);
  z-index: 1;
  width: min(680px, 52vw);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-22px, -50%);
  transition:
    opacity 320ms ease,
    transform 460ms cubic-bezier(0.2, 1, 0.3, 1),
    visibility 320ms ease;
}

html[data-stage="hero"] .gate-hero,
html[data-stage="form"] .gate-card {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(0, -50%);
}

/* Until the script has run, the intro shows. */
html:not([data-stage]) .gate-hero {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
}

.gate-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  color: var(--hyperaven-accent);
  font: 700 12px/1 var(--gate-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.gate-pip {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--hyperaven-accent);
  box-shadow:
    13px -9px 0 -2px rgba(249, 115, 22, 0.55),
    13px 8px 0 -3px rgba(249, 115, 22, 0.3);
  margin-right: 10px;
}

.gate-title {
  margin: 0;
  font-size: clamp(38px, 4.7vw, 78px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.gate-title span {
  display: block;
}

.gate-title-accent {
  background: linear-gradient(95deg, var(--gate-amber) 0%, var(--hyperaven-accent) 52%, #ff5a1f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.gate-sub {
  max-width: 54ch;
  margin: 26px 0 0;
  color: var(--gate-dim);
  font-size: 17px;
  line-height: 1.62;
}

.gate-cta,
.gate-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 0;
  border-radius: 12px;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font: 800 15px/1 var(--gate-font);
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 18px 46px -14px rgba(249, 115, 22, 0.6);
  transition:
    transform 160ms ease,
    background 160ms ease;
}

.gate-cta {
  height: 58px;
  margin-top: 34px;
  padding: 0 30px 0 28px;
}

.gate-cta svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 160ms ease;
}

.gate-cta:hover,
.gate-submit:not(:disabled):hover {
  background: var(--btn-primary-bg-hover);
  transform: translateY(-2px);
}

.gate-cta:hover svg {
  transform: translateX(4px);
}

.gate-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
  margin: 46px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--gate-line);
  list-style: none;
  color: var(--gate-dim);
  font: 600 12.5px/1.3 var(--gate-mono);
  letter-spacing: 0.04em;
}

.gate-facts li {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.gate-fact-no {
  color: var(--hyperaven-accent);
  font-weight: 700;
}

.gate-card {
  width: min(500px, calc(100vw - 2 * var(--gate-gutter)));
  /* Centred on the screen, the card keeps the header's height above and below it, and scrolls inside when it is taller. */
  max-height: calc(100vh - 2 * var(--gate-top));
  max-height: calc(100dvh - 2 * var(--gate-top));
  overflow-y: auto;
  padding: 34px 34px 28px;
  border: 1px solid var(--gate-line);
  border-radius: 20px;
  background: var(--gate-panel);
  box-shadow:
    0 44px 120px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(249, 115, 22, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
}

.gate-card::after {
  content: "";
  position: absolute;
  top: 26px;
  right: 30px;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--hyperaven-accent);
  box-shadow:
    -15px 8px 0 -2px rgba(249, 115, 22, 0.55),
    -4px 20px 0 -3px rgba(249, 115, 22, 0.3);
}

.gate-card .gate-eyebrow {
  margin-bottom: 18px;
}

.gate-card h2 {
  margin: 0;
  font-size: 38px;
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.gate-roles {
  display: grid;
  gap: 10px;
  margin-top: 26px;
}

.gate-role {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--gate-line);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.6);
  color: var(--gate-fg);
  text-align: left;
  font: 700 15px/1.2 var(--gate-font);
  cursor: pointer;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    transform 150ms ease;
}

.gate-role-no {
  color: var(--gate-faint);
  font: 700 12px/1 var(--gate-mono);
  letter-spacing: 0.1em;
}

.gate-role-name,
.gate-role-note {
  display: block;
}

.gate-role-note {
  margin-top: 5px;
  color: var(--gate-dim);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
}

.gate-role-check {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--hyperaven-accent);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 150ms ease,
    transform 150ms ease;
}

.gate-role:not(:disabled):hover {
  border-color: var(--hyperaven-accent-border);
  background: rgba(30, 41, 59, 0.7);
  transform: translateX(3px);
}

.gate-role:disabled {
  cursor: default;
}

.gate-role:disabled[aria-pressed="false"] {
  opacity: 0.45;
}

.gate-role[aria-pressed="true"] {
  border-color: var(--hyperaven-accent);
  background: linear-gradient(90deg, rgba(249, 115, 22, 0.2) 0%, rgba(249, 115, 22, 0.04) 100%);
  box-shadow: inset 3px 0 0 var(--hyperaven-accent);
}

.gate-role[aria-pressed="true"] .gate-role-no {
  color: var(--hyperaven-accent);
}

.gate-role[aria-pressed="true"] .gate-role-check {
  opacity: 1;
  transform: none;
}

.gate-form {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.gate-step {
  display: grid;
  gap: 9px;
}

.gate-form label {
  color: var(--gate-dim);
  font: 700 11px/1 var(--gate-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.gate-form input {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 12px;
  background: var(--gate-input-bg);
  color: var(--gate-fg);
  caret-color: var(--hyperaven-accent);
  font: 500 15px/1 var(--gate-font);
  outline: none;
}

.gate-form input:focus {
  border-color: var(--hyperaven-accent);
  box-shadow: 0 0 0 4px var(--hyperaven-accent-subtle);
}

.gate-form input:-webkit-autofill {
  -webkit-text-fill-color: var(--gate-fg);
  box-shadow: 0 0 0 1000px #0b1226 inset;
}

.gate-hint {
  margin: 0;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--hyperaven-accent-subtle);
  color: var(--brand-subtle-text);
  font: 600 12px/1.3 var(--gate-mono);
  letter-spacing: 0.04em;
}

.gate-error {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(253, 164, 175, 0.3);
  border-radius: 10px;
  background: rgba(244, 63, 94, 0.1);
  color: var(--gate-error);
  font-size: 13px;
  font-weight: 600;
}

.gate-submit {
  width: 100%;
  height: 52px;
  margin-top: 8px;
}

.gate-submit:disabled {
  opacity: 0.75;
  cursor: progress;
}

.gate-link {
  justify-self: start;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--gate-dim);
  font: 700 11.5px/1.4 var(--gate-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.gate-link:hover,
.gate-link:focus-visible {
  color: var(--hyperaven-accent);
}

.gate-link-center {
  display: block;
  margin: 20px 0 0;
}

/* The focus of every control is an outline, not only a change of colour. */
.gate-lang:focus-visible,
.gate-link:focus-visible,
.gate-cta:focus-visible,
.gate-role:focus-visible,
.gate-submit:focus-visible {
  outline: 2px solid var(--gate-fg);
  outline-offset: 3px;
}

@media (max-width: 1100px) {
  .gate-art {
    width: min(50vw, 560px);
  }

  /* The intro is narrower here; the card keeps its own width. */
  .gate-hero {
    width: min(560px, 54vw);
  }
}

/* Narrow screens: one column, the mark behind the text. */
@media (max-width: 899px) {
  :root {
    --gate-top: 84px;
  }

  .gate-top {
    padding: 22px var(--gate-gutter);
  }

  .gate-logo {
    width: 8.8rem;
  }

  .gate-art {
    top: 8%;
    right: -24vw;
    width: 92vw;
    opacity: 0.34;
    animation: none;
    transform: none;
    filter: none;
  }

  .gate-glow {
    background:
      radial-gradient(420px 320px at 70% 22%, rgba(249, 115, 22, 0.16) 0%, rgba(249, 115, 22, 0) 70%),
      linear-gradient(180deg, rgba(2, 6, 23, 0.1) 0%, rgba(2, 6, 23, 0.8) 46%, rgba(2, 6, 23, 0.9) 100%);
  }

  .gate-scene {
    top: auto;
    right: var(--gate-gutter);
    bottom: 36px;
    width: auto;
    transform: translate(0, 18px);
  }

  html[data-stage="hero"] .gate-hero,
  html[data-stage="form"] .gate-card,
  html:not([data-stage]) .gate-hero {
    transform: none;
  }

  .gate-title {
    font-size: clamp(36px, 11vw, 56px);
  }

  .gate-sub {
    margin-top: 20px;
    font-size: 15px;
  }

  .gate-cta {
    width: 100%;
    margin-top: 26px;
  }

  .gate-facts {
    gap: 8px 22px;
    margin-top: 30px;
    padding-top: 18px;
    font-size: 11.5px;
  }

  .gate-card {
    width: auto;
    /* Anchored 36px above the bottom edge: the card ends under the header at the most. */
    max-height: calc(100vh - var(--gate-top) - 36px);
    max-height: calc(100dvh - var(--gate-top) - 36px);
    padding: 26px 20px 22px;
    overflow-y: auto;
    border-radius: 18px;
  }

  .gate-card h2 {
    font-size: 30px;
  }
}

@media (max-width: 899px) and (max-height: 700px) {
  .gate-facts {
    display: none;
  }
}

/* Short screens. The scenes are centred on the screen only while they fit between the header's height above and below them
   (the tallest state of the card, 634px, takes 858px on a wide screen; the intro of a phone about 620px). Below that they
   go back into the flow, under the header, and the page scrolls. Where the screen is taller, nothing changes. */
@media (min-width: 900px) and (max-height: 880px), (max-width: 899px) and (max-height: 700px) {
  .gate-shell {
    display: grid;
    align-content: center;
    padding: var(--gate-top) var(--gate-gutter);
  }

  .gate-scene,
  html[data-stage="hero"] .gate-hero,
  html[data-stage="form"] .gate-card,
  html:not([data-stage]) .gate-hero {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    align-self: start;
    transform: none;
  }

  .gate-card {
    max-height: none;
    overflow-y: visible;
  }
}

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

  .gate-scene,
  .gate-cta svg {
    transition: none;
  }

  /* No hover movement either. */
  .gate-role:not(:disabled):hover,
  .gate-cta:hover,
  .gate-submit:not(:disabled):hover,
  .gate-cta:hover svg {
    transform: none;
  }
}