/*
 * Витрина студии.
 *
 * Тёмный фон и лаймовый акцент — фирменные, те же, что на обложках игр.
 * Всё остальное подчинено одной задаче: человек с площадки за минуту должен
 * понять, что здесь студия с живыми играми, а не свалка.
 */

:root {
  /* Палитра взята с заставки игры — та же холодная ночь и тот же лайм. */
  --lime: #d7ff00;
  --ink: #05080d;
  --ink-2: #0b1420;
  --line: rgba(150, 200, 255, 0.14);
  --line-lime: rgba(215, 255, 0, 0.22);
  --text: #e9f3ee;
  --muted: #92a7bd;
  --radius: 16px;
  --wrap: 1120px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 400 17px/1.6 ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--lime);
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: rgba(215, 255, 0, 0.1);
  padding: 0.1em 0.4em;
  border-radius: 5px;
}

.wrap {
  width: min(100% - 40px, var(--wrap));
  margin-inline: auto;
}

/* ── шапка ───────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(32px, 6vw, 72px) 0 clamp(44px, 7vw, 92px);
  background:
    radial-gradient(52% 40% at 74% 46%, rgba(215, 255, 0, 0.09), transparent 72%),
    radial-gradient(70% 50% at 88% 12%, rgba(86, 108, 255, 0.16), transparent 70%),
    radial-gradient(60% 45% at 12% 88%, rgba(0, 208, 255, 0.09), transparent 72%),
    radial-gradient(120% 90% at 50% 0%, #0b1420 0%, var(--ink) 62%);
  border-bottom: 1px solid var(--line);
}

/*
 * Звёзды с заставки: два слоя точек градиентами, размноженных плиткой.
 * Поле кроет экран любого размера и весит сотни байт вместо картинки, а
 * ближний слой плывёт быстрее дальнего — отсюда глубина.
 */
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  inset: -20%;
  pointer-events: none;
}

.hero::before {
  background-image:
    radial-gradient(1px 1px at 18px 32px, rgba(223, 243, 255, 0.9), transparent),
    radial-gradient(1px 1px at 96px 12px, rgba(223, 243, 255, 0.55), transparent),
    radial-gradient(1px 1px at 152px 88px, rgba(223, 243, 255, 0.75), transparent),
    radial-gradient(1px 1px at 44px 132px, rgba(190, 220, 255, 0.5), transparent),
    radial-gradient(1px 1px at 188px 168px, rgba(223, 243, 255, 0.65), transparent);
  background-size: 220px 220px;
  animation: hero-far 42s linear infinite;
}

.hero::after {
  background-image:
    radial-gradient(1.6px 1.6px at 60px 70px, rgba(255, 255, 255, 0.95), transparent),
    radial-gradient(1.4px 1.4px at 210px 30px, rgba(215, 255, 0, 0.5), transparent),
    radial-gradient(1.4px 1.4px at 130px 200px, rgba(255, 255, 255, 0.7), transparent);
  background-size: 300px 300px;
  animation: hero-near 26s linear infinite;
}

@keyframes hero-far {
  to {
    background-position: 220px 110px;
  }
}

@keyframes hero-near {
  to {
    background-position: -300px 150px;
  }
}

.hero .wrap {
  position: relative;
  z-index: 1;
}

/* Знак выезжает вправо от текста и занимает пустоту, которая там была. */
.hero__row {
  display: flex;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
}

.hero__text {
  min-width: 0;
}

@media (max-width: 899px) {
  .hero__row {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 28px;
  }
}

/*
 * Звёзды на телефоне стоят.
 *
 * Два слоя градиентов размером в полтора экрана перерисовываются каждый кадр,
 * и на мобильном GPU это стоит дороже всего остального на странице вместе
 * взятого — вплоть до того, что встают все анимации сразу, включая знак.
 * Картинка от остановки не теряет ничего: звёзды и так неподвижны на вид.
 */
@media (max-width: 899px) {
  .hero::before,
  .hero::after {
    animation: none;
    inset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero::after {
    animation: none;
  }
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(28px, 5vw, 56px);
}

.brand__mark {
  width: 44px;
  height: 44px;
}

.brand__name {
  letter-spacing: 0.18em;
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
}

.brand__name b {
  color: var(--text);
  font-weight: 700;
}

h1 {
  margin: 0 0 20px;
  font-size: clamp(38px, 7.2vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 800;
  max-width: 15ch;
}

.lede {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(17px, 2vw, 20px);
  color: #cddeeb;
}

.facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin: 36px 0 0;
  padding: 0;
  color: var(--muted);
  font-size: 15px;
}

.facts b {
  color: var(--lime);
  font-size: 22px;
  margin-right: 6px;
}

/* ── общие секции ────────────────────────────────────────────────────── */

section {
  padding: clamp(44px, 6vw, 76px) 0;
}

section + section {
  border-top: 1px solid var(--line);
}

h2 {
  margin: 0 0 clamp(24px, 4vw, 40px);
  font-size: clamp(26px, 3.4vw, 38px);
  letter-spacing: -0.02em;
  font-weight: 700;
}

h3 {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 700;
}

/* ── игры ────────────────────────────────────────────────────────────── */

/* Подпись под заголовком секции: объясняет ряд карточек, не воюя с ним. */
.note {
  margin: -18px 0 28px;
  max-width: 58ch;
  color: var(--muted);
  font-size: 16px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: 22px;
}

.game {
  display: flex;
  flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.game:hover {
  border-color: var(--line-lime);
  transform: translateY(-2px);
}

.game__shot {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  background: #0b1420;
}

.game__body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.game__title {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.game__hook {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  flex: 1;
}

.game__play {
  align-self: start;
  display: inline-block;
  padding: 10px 20px;
  min-height: 44px;
  line-height: 24px;
  border-radius: 999px;
  background: var(--lime);
  color: #05080d;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.game__play:hover {
  filter: brightness(1.08);
}

/*
 * Шестая карточка: «скоро будет ещё».
 *
 * Стоит в том же ряду, что игры, и занимает место, которое всё равно пустует:
 * пять карточек в три колонки оставляют дыру, и дыра эта читалась как «здесь
 * что-то не загрузилось». Теперь она читается как обещание — и обещание без
 * дат, потому что дату мы держать не обязаны, а слово держать обязаны.
 */
.game--next {
  border-style: dashed;
  border-color: var(--line-lime);
  background: linear-gradient(180deg, rgba(215, 255, 0, 0.05), transparent 60%), var(--ink-2);
}

.game--next:hover {
  transform: none;
}

.game__soon {
  align-self: start;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime);
}

.game__more {
  align-self: start;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: 15px;
  color: var(--lime);
  text-decoration: none;
  border-bottom: 1px solid var(--line-lime);
}

.game__more:hover {
  border-bottom-color: var(--lime);
}

/* ── карточки и списки ───────────────────────────────────────────────── */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

/* Четыре карточки в три колонки оставляют одну сиротой — на широком экране
   раскладываем их два на два. */
@media (min-width: 860px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.cards article {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}

.cards p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

.two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px 48px;
}

.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.ticks li {
  padding-left: 30px;
  position: relative;
  color: #cddeeb;
  font-size: 16px;
}

.ticks li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  width: 12px;
  height: 7px;
  border-left: 2.5px solid var(--lime);
  border-bottom: 2.5px solid var(--lime);
  transform: rotate(-45deg);
}

.badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0;
  padding: 0;
}

.badges li {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 14px;
  color: #cddeeb;
}

.muted {
  color: var(--muted);
  margin: 0 0 4px;
}

.small {
  font-size: 15px;
}

/* ── контакт и подвал ────────────────────────────────────────────────── */

.contact .lede {
  max-width: 54ch;
}

.mail {
  margin: 22px 0 0;
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
}

.mail a {
  text-decoration: none;
  border-bottom: 2px solid var(--line-lime);
}

footer {
  border-top: 1px solid var(--line);
  padding: 28px 0 40px;
  color: var(--muted);
  font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .game {
    transition: none;
  }
}

/*
 * Знак студии в движении — тот же, что встречает игрока на заставке игры.
 *
 * Перенесён с неё почти дословно и нарочно: человек, пришедший с площадки,
 * должен увидеть на сайте ровно то, что видел перед игрой. Разные знаки в двух
 * местах — это два разных бренда, как бы похоже они ни выглядели по отдельности.
 *
 * Приём тот же: бегунок не лежит поверх шкалы, а зажигает сегменты, над
 * которыми проходит. Шкала стоит, движется маска; позади сегменты гаснут,
 * отсюда хвост. Ни картинок, ни скриптов — только разметка и анимация.
 *
 * Отличий от заставки два, и оба вынужденные: здесь нет финала (странице не с
 * чем «заканчиваться») и нет звёздного поля — оно живёт на самой шапке, чтобы
 * закрывать её целиком, а не квадрат вокруг знака.
 */

@property --scan {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@property --lit {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.emblem {
  --size: 200px;
  --ring: 11px;
  /* Оборот бегунка. Число то же, что на заставке: спокойные две секунды. */
  --turn: 2.1s;
  position: relative;
  width: var(--size);
  height: var(--size);
  display: grid;
  place-items: center;
  perspective: calc(var(--size) * 3.4);
  flex: none;
}

/*
 * Орбита из двух вложенных частей: наклон и вращение обязаны жить порознь.
 * Внешняя держит наклон, внутренняя крутится в уже наклонённой плоскости —
 * в одном элементе они не уживаются, `transform` один на всех.
 */
.emblem__orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-style: preserve-3d;
}

.emblem__ring {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(150, 200, 255, 0.18);
  position: relative;
}

/* Спутник: без него поворот круга неотличим от покоя. */
.emblem__moon {
  position: absolute;
  top: calc(var(--size) * -0.019);
  left: 50%;
  width: calc(var(--size) * 0.038);
  height: calc(var(--size) * 0.038);
  margin-left: calc(var(--size) * -0.019);
  border-radius: 50%;
  background: #dff3ff;
  box-shadow: 0 0 calc(var(--size) * 0.06) rgba(200, 230, 255, 0.9);
}

.emblem__orbit--a {
  width: calc(var(--size) * 1.58);
  height: calc(var(--size) * 1.58);
  margin: calc(var(--size) * -0.79) 0 0 calc(var(--size) * -0.79);
  transform: rotateX(72deg);
}

.emblem__orbit--b {
  width: calc(var(--size) * 1.34);
  height: calc(var(--size) * 1.34);
  margin: calc(var(--size) * -0.67) 0 0 calc(var(--size) * -0.67);
  transform: rotateX(64deg) rotateY(24deg);
}

.emblem__orbit--a .emblem__ring {
  animation: emblem-spin 15s linear infinite;
}

.emblem__orbit--b .emblem__ring {
  border-color: rgba(215, 255, 0, 0.16);
  animation: emblem-spin 11s linear infinite reverse;
}

.emblem__orbit--b .emblem__moon {
  width: calc(var(--size) * 0.032);
  height: calc(var(--size) * 0.032);
  margin-left: calc(var(--size) * -0.016);
  top: calc(var(--size) * -0.016);
  background: #d7ff00;
  box-shadow: 0 0 calc(var(--size) * 0.06) rgba(215, 255, 0, 0.8);
}

.emblem__dial {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(
    rgba(215, 255, 0, 0.18) 0deg 2.4deg,
    transparent 2.4deg 10deg
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--ring)),
    #000 calc(100% - var(--ring))
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--ring)),
    #000 calc(100% - var(--ring))
  );
}

/*
 * Горячий слой: те же сегменты в полную яркость, подрезанные бегущей маской.
 * Пересечение двух масок — кольцо и комета — и даёт зажигание. Хвост тает
 * по-люминофорному: круто у головы, дольше в конце.
 */
.emblem__dial--hot {
  background: repeating-conic-gradient(#d7ff00 0deg 2.4deg, transparent 2.4deg 10deg);
  -webkit-mask-image:
    radial-gradient(
      farthest-side,
      transparent calc(100% - var(--ring)),
      #000 calc(100% - var(--ring))
    ),
    conic-gradient(
      from var(--scan),
      transparent 0deg 226deg,
      rgba(0, 0, 0, 0.1) 268deg,
      rgba(0, 0, 0, 0.26) 302deg,
      rgba(0, 0, 0, 0.52) 330deg,
      rgba(0, 0, 0, 0.86) 348deg,
      #000 355deg 360deg
    );
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(
      farthest-side,
      transparent calc(100% - var(--ring)),
      #000 calc(100% - var(--ring))
    ),
    conic-gradient(
      from var(--scan),
      transparent 0deg 226deg,
      rgba(0, 0, 0, 0.1) 268deg,
      rgba(0, 0, 0, 0.26) 302deg,
      rgba(0, 0, 0, 0.52) 330deg,
      rgba(0, 0, 0, 0.86) 348deg,
      #000 355deg 360deg
    );
  mask-composite: intersect;
  filter: drop-shadow(0 0 4px rgba(215, 255, 0, 0.55));
  animation: emblem-scan var(--turn) linear infinite;
}

.emblem__comet {
  position: absolute;
  inset: 0;
  animation: emblem-spin var(--turn) linear infinite;
}

/*
 * Голова — свет, а не фигура: почти белое ядро, лаймовый спад,
 * растворяющийся край. Вытянута по касательной к кольцу, оттого читается
 * смазом, а не бусиной, надетой на орбиту.
 */
.emblem__comet i {
  position: absolute;
  top: calc(var(--ring) * -0.8);
  left: 50%;
  width: calc(var(--ring) * 4.4);
  height: calc(var(--ring) * 2.6);
  margin-left: calc(var(--ring) * -2.2);
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(250, 255, 228, 0.95) 0%,
    rgba(233, 255, 140, 0.72) 18%,
    rgba(215, 255, 0, 0.4) 46%,
    rgba(215, 255, 0, 0.14) 66%,
    rgba(215, 255, 0, 0) 100%
  );
}

.emblem__mark {
  position: relative;
  width: calc(var(--size) * 0.387);
  height: calc(var(--size) * 0.387);
  color: #d7ff00;
  filter: drop-shadow(0 0 calc(var(--size) * 0.13) rgba(215, 255, 0, 0.35));
  /*
   * Удар вдвое чаще оборота — 1,05 с, то есть 57 в минуту: спокойный пульс
   * здорового человека. На обороте выходило 28 в минуту, и тело читает такое
   * мгновенно, даже когда глаз не понимает, что не так.
   */
  animation: emblem-beat calc(var(--turn) / 2) ease-in-out infinite;
}

.emblem__mark svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/*
 * Отблеск на знаке от бегущей головы: вторая, почти белая копия, подрезанная
 * направленным градиентом. Освещена та сторона, с которой сейчас голова, —
 * и угол маски крутится с тем же периодом. Это не похожая анимация рядом, а
 * то же самое движение.
 */
.emblem__mark-lit {
  color: #f7ffdc;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(calc(var(--lit) + 180deg), #000 0%, rgba(0, 0, 0, 0) 62%);
  mask-image: linear-gradient(calc(var(--lit) + 180deg), #000 0%, rgba(0, 0, 0, 0) 62%);
  animation: emblem-lit var(--turn) linear infinite;
}

@keyframes emblem-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes emblem-scan {
  to {
    --scan: 360deg;
  }
}

@keyframes emblem-lit {
  to {
    --lit: 360deg;
  }
}

@keyframes emblem-beat {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 calc(var(--size) * 0.13) rgba(215, 255, 0, 0.28));
  }
  8% {
    transform: scale(1.045);
    filter: drop-shadow(0 0 calc(var(--size) * 0.22) rgba(215, 255, 0, 0.48));
  }
  17% {
    transform: scale(1.012);
    filter: drop-shadow(0 0 calc(var(--size) * 0.16) rgba(215, 255, 0, 0.34));
  }
  25% {
    transform: scale(1.028);
    filter: drop-shadow(0 0 calc(var(--size) * 0.19) rgba(215, 255, 0, 0.4));
  }
  42%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 calc(var(--size) * 0.13) rgba(215, 255, 0, 0.28));
  }
}

/* Просили не двигать — не двигаем. Картинка остаётся осмысленной и стоя. */
@media (prefers-reduced-motion: reduce) {
  .emblem__ring,
  .emblem__dial--hot,
  .emblem__comet,
  .emblem__mark,
  .emblem__mark-lit {
    animation: none;
  }
}

/*
 * Телефон: знак меньше и дешевле.
 *
 * Размер объявлен здесь, а не в вёрстке страницы, потому что стиль знака
 * склеивается последним — правило из другого файла он бы просто затёр.
 *
 * Пульс на телефоне отдаёт только масштаб: `drop-shadow` пересчитывается на
 * каждом кадре по всей площади знака, и на мобильном GPU именно он съедает
 * кадры. Свечение остаётся, но статикой — глаз разницы не видит, а частота
 * кадров видит.
 */
@media (max-width: 899px) {
  .emblem {
    --size: 148px;
    --ring: 8px;
    margin-inline: auto;
  }

  .emblem__mark {
    animation-name: emblem-beat-lite;
  }
}

@keyframes emblem-beat-lite {
  0% {
    transform: scale(1);
  }
  8% {
    transform: scale(1.045);
  }
  17% {
    transform: scale(1.012);
  }
  25% {
    transform: scale(1.028);
  }
  42%,
  100% {
    transform: scale(1);
  }
}