/* Stopovia — placeholder site
   Язык бренда — язык проездных документов: бумага, штемпельная краска,
   машиночитаемая строка. Имя означает страну, поэтому страница ведёт себя
   как её паспорт. */

:root {
  --paper:     #EDEFF2;
  --surface:   #F8F9FB;
  --line:      #D2D7DF;
  --line-soft: #E1E5EB;
  --ink:       #0F1319;
  --ink-2:     #39404C;
  --ink-dim:   #6C7484;
  --stamp:     #57379F;   /* фиолетовая штемпельная краска */
  --stamp-sk:  #E7E1F6;
  --entry:     #1B6A57;   /* зелёный штамп въезда */
  --danger:    #A8362B;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --mrz:     "Share Tech Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --measure: 34rem;
  --page:    70rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:     #0C0F14;
    --surface:   #141922;
    --line:      #263041;
    --line-soft: #1C2431;
    --ink:       #E9ECF2;
    --ink-2:     #B4BCCA;
    --ink-dim:   #79839A;
    --stamp:     #A692EC;
    --stamp-sk:  #221B3B;
    --entry:     #4FBF9F;
    --danger:    #E38477;
  }
}

:root[data-theme="dark"] {
  --paper:     #0C0F14;
  --surface:   #141922;
  --line:      #263041;
  --line-soft: #1C2431;
  --ink:       #E9ECF2;
  --ink-2:     #B4BCCA;
  --ink-dim:   #79839A;
  --stamp:     #A692EC;
  --stamp-sk:  #221B3B;
  --entry:     #4FBF9F;
  --danger:    #E38477;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  font-weight: 400;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Слабая сетка защитной печати — как на странице паспорта. */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(115deg, transparent 0 7px, color-mix(in srgb, var(--stamp) 5%, transparent) 7px 8px),
    repeating-linear-gradient(-115deg, transparent 0 7px, color-mix(in srgb, var(--entry) 4%, transparent) 7px 8px);
}

.masthead, main, footer { position: relative; z-index: 1; }

/* ---------- шапка ---------- */

.masthead {
  width: min(100% - 3rem, var(--page));
  margin-inline: auto;
  padding-block: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
}

.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}

.wordmark:hover { color: var(--stamp); }
.wordmark:focus-visible { outline: 2px solid var(--stamp); outline-offset: 4px; border-radius: 2px; }

/* Статус набран как графа документа. */
.status {
  font-family: var(--mrz);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stamp);
  border: 1.5px solid var(--stamp);
  padding: 0.25rem 0.7rem;
  white-space: nowrap;
  transform: rotate(-1.5deg);
}

/* ---------- герой ---------- */

main {
  flex: 1;
  width: min(100% - 3rem, var(--page));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 7vw, 5.5rem);
  padding-block: clamp(2.5rem, 6vw, 4.5rem) 3.5rem;
}

.hero {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 46rem;
}

.headline {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.3rem + 4.2vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin: 0;
  color: var(--ink);
}

.lede {
  margin: 0;
  max-width: var(--measure);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  line-height: 1.65;
  color: var(--ink-dim);
}

/* ---------- форма ---------- */

.waitlist {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.625rem;
  max-width: 30rem;
  margin-top: 0.5rem;
}

.waitlist input {
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.8rem 0.95rem;
  min-width: 0;
  transition: border-color 140ms ease;
}

.waitlist input::placeholder { color: color-mix(in srgb, var(--ink-dim) 70%, transparent); }
.waitlist input:hover { border-color: var(--ink-dim); }

.waitlist input:focus-visible {
  outline: none;
  border-color: var(--stamp);
  box-shadow: 0 0 0 3px var(--stamp-sk);
}

.waitlist button {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--surface);
  background: var(--stamp);
  border: 1px solid var(--stamp);
  border-radius: 3px;
  padding: 0.8rem 1.4rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 140ms ease, transform 120ms ease;
}

.waitlist button:hover { background: color-mix(in srgb, var(--stamp) 85%, var(--ink)); }
.waitlist button:active { transform: translateY(1px); }
.waitlist button:focus-visible { outline: 2px solid var(--entry); outline-offset: 3px; }

.waitlist .note {
  grid-column: 1 / -1;
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-dim);
}

.waitlist .note[data-state="ok"]    { color: var(--entry); }
.waitlist .note[data-state="error"] { color: var(--danger); }

.waitlist[data-done="true"] input,
.waitlist[data-done="true"] button { display: none; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- маршрут ---------- */

.route {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.route svg { width: 100%; height: auto; overflow: visible; }

.route .arc {
  stroke: var(--stamp);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 950;
  stroke-dashoffset: 950;
  animation: draw 2.6s cubic-bezier(0.33, 0, 0.2, 1) 0.3s forwards;
}

.route .stops circle {
  fill: var(--paper);
  stroke: var(--stamp);
  stroke-width: 1.5;
  opacity: 0;
  animation: pop 0.5s ease forwards;
}

.route .stops circle:nth-child(1) { animation-delay: 0.30s; }
.route .stops circle:nth-child(2) { animation-delay: 0.88s; }
.route .stops circle:nth-child(3) { animation-delay: 1.10s; }
.route .stops circle:nth-child(4) { animation-delay: 1.33s; }
.route .stops circle:nth-child(5) { animation-delay: 2.90s; }

.route .codes text {
  font-family: var(--mrz);
  font-size: 15px;
  letter-spacing: 0.1em;
  fill: var(--ink-dim);
  text-anchor: middle;
  opacity: 0;
  animation: pop 0.6s ease forwards;
}

.route .codes text:nth-child(1) { animation-delay: 0.42s; }
.route .codes text:nth-child(2) { animation-delay: 1.00s; }
.route .codes text:nth-child(3) { animation-delay: 1.22s; }
.route .codes text:nth-child(4) { animation-delay: 1.45s; }
.route .codes text:nth-child(5) { animation-delay: 3.02s; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop  { to { opacity: 1; } }

.route-caption {
  margin: 0;
  max-width: var(--measure);
  font-size: 0.9375rem;
  color: var(--ink-dim);
}

/* ---------- три состояния: графы документа ---------- */

.states {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2.25rem 3rem;
  border-top: 1px solid var(--line);
  padding-top: 2.75rem;
}

.states article { display: flex; flex-direction: column; gap: 0.7rem; }

.states h2 {
  margin: 0;
  font-family: var(--mrz);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--entry);
}

.states p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink-dim);
  max-width: 24rem;
}

/* ---------- подвал ---------- */

footer {
  width: min(100% - 3rem, var(--page));
  margin-inline: auto;
  padding-block: 2rem 2.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  font-size: 0.875rem;
}

.footrow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}

footer p { margin: 0; }

footer a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--stamp);
  padding-bottom: 1px;
}

footer a:hover { color: var(--stamp); }
footer a:focus-visible { outline: 2px solid var(--stamp); outline-offset: 3px; border-radius: 2px; }

.colophon { color: var(--ink-dim); }

.langs { display: flex; flex-wrap: wrap; gap: 0.3rem 0.85rem; font-size: 0.8125rem; }
.langs a { color: var(--ink-dim); border-bottom-color: transparent; }
.langs a:hover { color: var(--ink); border-bottom-color: var(--stamp); }
.langs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--stamp); }

/* Машиночитаемая строка. В настоящем паспорте она всегда латиницей
   и заглавными, независимо от языка страницы, — поэтому одна на все
   двадцать языков и не переводится. */
.mrz {
  font-family: var(--mrz);
  font-size: clamp(0.6rem, 0.42rem + 0.62vw, 0.8125rem);
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--surface);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 0.7rem 0.9rem;
  overflow-x: auto;
  /* pre, а не nowrap: строк в машиночитаемой зоне всегда две,
     и переносить их по ширине экрана нельзя. */
  white-space: pre;
  margin: 0;
  user-select: all;
}

@media (max-width: 32rem) {
  .waitlist { grid-template-columns: 1fr; }
  .masthead { padding-block: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .route .arc { animation: none; stroke-dashoffset: 0; }
  .route .stops circle, .route .codes text { animation: none; opacity: 1; }
  * { transition-duration: 0.01ms !important; }
}

/* ---------- письмо справа налево ---------- */

/* Раскладка зеркалится сама. Фиксируем маршрут и машиночитаемую строку:
   коды аэропортов и MRZ читаются слева направо в любом языке. */
[dir="rtl"] .route svg,
[dir="rtl"] .route .codes text,
[dir="rtl"] .mrz { direction: ltr; }

/* Разрядка и капитель рассчитаны на латиницу: в арабском буквы
   соединяются, и letter-spacing их разрывает. */
[dir="rtl"] .status,
[dir="rtl"] .states h2,
[dir="rtl"] .wordmark {
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--body);
}

[dir="rtl"] .states h2 { font-weight: 600; font-size: 0.875rem; }
[dir="rtl"] .status { transform: none; }