/* Antinode — landing.
   The app calls its own design a quiet instrument: the interface is almost invisible
   and the accent colour is taken from whatever is on screen. The page keeps that
   discipline. Thin rules, one accent, generous air, and the picture doing the talking. */

:root {
  --bg:        #000;
  --canvas:    #050507;
  --surface:   rgba(255,255,255,.045);
  --surface-hi:rgba(255,255,255,.07);
  --line:      rgba(255,255,255,.10);
  --line-hi:   rgba(255,255,255,.18);
  --t1:        rgba(255,255,255,.94);
  --t2:        rgba(255,255,255,.60);
  --t3:        rgba(255,255,255,.34);
  --accent:    #7ec8e7;
  --accent-ink:#04141c;
  --radius:    14px;
  --gutter:    clamp(20px, 5vw, 40px);
  --measure:   62ch;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter,
          system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--t1);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }

h1, h2, h3 { font-weight: 300; letter-spacing: -0.02em; margin: 0; }
h1 { font-size: clamp(2.6rem, 7.4vw, 5.4rem); line-height: 1.02; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.9rem); line-height: 1.12; }
h3 { font-size: 1.14rem; font-weight: 400; letter-spacing: -0.01em; }

p { margin: 0 0 1.1em; max-width: var(--measure); color: var(--t2); }
p strong { color: var(--t1); font-weight: 400; }

section { padding: clamp(72px, 11vw, 152px) var(--gutter); }
.wrap { max-width: 1120px; margin: 0 auto; }

/* The small tracked capitals the app uses for every label. */
.eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--t3);
  margin: 0 0 18px;
}

/* ── hero ─────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: end;
  /* Боковые поля нужны здесь так же, как в секциях: без них на телефоне
     заголовок и строка «Two hundred procedural worlds…» упираются в края. */
  padding: 0 var(--gutter) clamp(48px, 8vh, 96px);
  overflow: hidden;
}

/* The canvas sits behind everything and is never interactive except for the tap
   that fires a hit — the same gesture the app uses. */
#hero-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  background: var(--canvas);
  cursor: crosshair;
}

/* A pool of shade under the words, so text stays legible whatever the world does. */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 0%, transparent 40%, rgba(0,0,0,.55) 100%),
    linear-gradient(to top, rgba(0,0,0,.86) 0%, rgba(0,0,0,.34) 38%, transparent 68%);
}

.hero > .wrap { position: relative; z-index: 2; width: 100%; }

.hero h1 { max-width: 15ch; }
.hero .lede {
  font-size: clamp(1.05rem, 2vw, 1.32rem);
  max-width: 46ch;
  margin-top: 22px;
  color: rgba(255,255,255,.72);
}

.hero-actions {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  margin-top: 34px;
}

/* Letters arrive one at a time — restrained, and skipped entirely when the visitor
   has asked for less motion. */
.reveal-word { display: inline-block; white-space: nowrap; }
.reveal-letter { opacity: 0; display: inline-block; animation: letter .5s forwards; }
@keyframes letter { to { opacity: 1; } }

.scroll-hint {
  position: absolute; left: 50%; bottom: 18px; z-index: 2;
  transform: translateX(-50%);
  font-family: var(--mono); font-size: 9px; letter-spacing: .18em;
  color: var(--t3); text-transform: uppercase;
  animation: breathe 3.4s ease-in-out infinite;
}
@keyframes breathe { 0%,100% { opacity:.35 } 50% { opacity:.8 } }

/* ── controls ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 24px;
  border: 1px solid var(--line-hi); border-radius: var(--radius);
  background: var(--surface);
  color: var(--t1); text-decoration: none; font-size: 15px;
  cursor: pointer; transition: background .18s, border-color .18s, transform .18s;
}
.btn:hover { background: var(--surface-hi); border-color: rgba(255,255,255,.30); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .4; cursor: not-allowed; }

.btn-primary {
  background: var(--accent); color: var(--accent-ink);
  border-color: transparent; font-weight: 500;
}
.btn-primary:hover { background: #96d6ef; border-color: transparent; }

.btn-listen[data-live="1"] { border-color: var(--accent); color: var(--accent); }

/* ── proofs ───────────────────────────────────────────────────────────────── */

.grid-3 {
  display: grid; gap: clamp(20px, 3vw, 34px);
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  margin-top: 52px;
}
.card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px 24px;
  background: linear-gradient(rgba(255,255,255,.03), rgba(255,255,255,0));
}
.card p { font-size: 15px; margin-bottom: 0; }
.card h3 { margin-bottom: 10px; }
.card .num {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  color: var(--accent); display: block; margin-bottom: 14px;
}

/* ── the warp figure ──────────────────────────────────────────────────────── */

.figure {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; margin-top: 40px; background: rgba(255,255,255,.02);
}
.figure svg { width: 100%; height: auto; display: block; }
.figure figcaption {
  font-size: 13px; color: var(--t3); margin-top: 16px; max-width: var(--measure);
}

/* ── worlds ───────────────────────────────────────────────────────────────── */

.worlds {
  display: grid; gap: 6px; margin-top: 46px;
  grid-template-columns: repeat(auto-fill, minmax(clamp(96px, 12vw, 168px), 1fr));
}
.worlds img {
  /* Атрибуты width/height на теге стоят намеренно — они резервируют место и
     убирают скачок вёрстки при загрузке. Но явная высота бьёт aspect-ratio,
     поэтому её здесь надо отпустить, иначе плитка растягивается в портрет. */
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  border-radius: 5px; opacity: 0;
  filter: saturate(.86);
  transition: opacity .7s ease, transform .35s ease, filter .35s ease;
}
.worlds img.in { opacity: .84; }
.worlds img:hover { opacity: 1; transform: scale(1.045); filter: saturate(1.1); }

.worlds-more { margin-top: 22px; }

/* ── shots ────────────────────────────────────────────────────────────────── */

.shots {
  display: flex; gap: 18px; margin-top: 44px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 12px; scrollbar-width: thin;
}
.shots img {
  height: clamp(360px, 52vh, 560px); width: auto; flex: 0 0 auto;
  border-radius: 18px; border: 1px solid var(--line);
  scroll-snap-align: center;
}

/* ── pricing ──────────────────────────────────────────────────────────────── */

.plans {
  display: grid; gap: 16px; margin-top: 48px;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
}
.plan {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; position: relative;
}
.plan.pick { border-color: var(--accent); }
.plan .tag {
  position: absolute; top: -9px; left: 22px;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--mono); font-size: 9px; letter-spacing: .13em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 4px;
}
.plan .price { font-size: 2.1rem; font-weight: 300; letter-spacing: -.03em; }
.plan .per { color: var(--t3); font-size: 14px; }
.plan ul { list-style: none; margin: 18px 0 0; padding: 0; }
.plan li { font-size: 14px; color: var(--t2); padding: 5px 0 5px 20px; position: relative; }
.plan li::before {
  content: ""; position: absolute; left: 2px; top: 13px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--t3);
}
.plan.pick li::before { background: var(--accent); }
.fineprint { font-size: 12.5px; color: var(--t3); margin-top: 26px; max-width: var(--measure); }

/* ── forms ────────────────────────────────────────────────────────────────── */

.form { margin-top: 34px; max-width: 560px; }
.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--t3);
}
.field input, .field textarea {
  width: 100%; padding: 13px 15px;
  background: var(--surface); color: var(--t1);
  border: 1px solid var(--line); border-radius: var(--radius);
  font: inherit; font-size: 15px;
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
}
.field textarea { min-height: 118px; resize: vertical; }
.consent { font-size: 12.5px; color: var(--t3); margin: 0 0 18px; }
.form-note { font-size: 14px; margin-top: 14px; min-height: 1.4em; }
.form-note.ok { color: var(--accent); }
.form-note.bad { color: #e0796f; }
/* Bait for form-filling robots: a real person never sees it, never fills it. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.two-col { display: grid; gap: clamp(28px, 5vw, 64px); grid-template-columns: 1fr; }
@media (min-width: 860px) { .two-col { grid-template-columns: 1fr 1fr; } }

/* ── footer ───────────────────────────────────────────────────────────────── */

footer {
  border-top: 1px solid var(--line);
  padding: 46px var(--gutter) 60px;
  color: var(--t3); font-size: 14px;
}
footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 30px; align-items: baseline; }
footer a { color: var(--t2); text-decoration: none; }
footer a:hover { color: var(--t1); }
footer .spacer { flex: 1; }

/* ── entrances ────────────────────────────────────────────────────────────── */

.rise { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.rise.in { opacity: 1; transform: none; }

/* The app ships a whole screen about light sensitivity. A page that ignored the
   system setting would contradict it, so everything that moves stops here. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, .worlds img { opacity: 1; transform: none; transition: none; }
  .reveal-letter { opacity: 1; animation: none; }
  .scroll-hint { animation: none; }
}