/* Цвета и шрифты — из бренда Dusk (brand/palette.json). Менять синхронно с приложением. */
@font-face {
  font-family: "Fraunces Soft";
  src: url("/assets/fonts/FrauncesSoft-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces Soft";
  src: url("/assets/fonts/FrauncesSoft-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

:root {
  --night: #1f1b1a;
  --surface: #2e2622;
  --text: #e3d8c3;
  --text-secondary: #a79e90;
  --light: #e9b872;
  --headline: #f1e9db;
  --moon: #ede3cc;
  --serif: "Fraunces Soft", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { color-scheme: dark; background: var(--night); }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: transparent;
  color: var(--text);
  font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--light); text-underline-offset: 0.2em; }
a:hover { color: var(--headline); }
a:focus-visible { outline: 2px solid var(--light); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: 40rem; margin: 0 auto; padding: 0 1.25rem; }

/* ——— Шапка подстраниц ——— */
.top { padding: 1.5rem 0; }
.top a { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.top img { width: 2rem; height: 2rem; }
.top span { font: 600 1.125rem/1 var(--serif); color: var(--headline); }

/* ——— Главная: coming soon ——— */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.25rem 2rem;
}

.logo { position: relative; margin-bottom: 2rem; }
.logo::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -42%;
  background: radial-gradient(closest-side, rgba(233, 184, 114, 0.2200) 0%, rgba(233, 184, 114, 0.2085) 8%, rgba(233, 184, 114, 0.1776) 17%, rgba(233, 184, 114, 0.1358) 25%, rgba(233, 184, 114, 0.0933) 33%, rgba(233, 184, 114, 0.0576) 42%, rgba(233, 184, 114, 0.0320) 50%, rgba(233, 184, 114, 0.0159) 58%, rgba(233, 184, 114, 0.0071) 67%, rgba(233, 184, 114, 0.0029) 75%, rgba(233, 184, 114, 0.0010) 83%, rgba(233, 184, 114, 0.0003) 92%, rgba(233, 184, 114, 0.0001) 100%);
}
.mark { display: block; width: clamp(8rem, 34vw, 11.5rem); height: auto; }

/* Ночное небо: звёзды двумя слоями (второй мигает) и луна-полумесяц. Всё декор, под содержимым. */
.hero::before, .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero::before {
  background:
    radial-gradient(1.5px 1.5px at 8% 14%, var(--moon), transparent),
    radial-gradient(1px 1px at 18% 62%, var(--moon), transparent),
    radial-gradient(1.5px 1.5px at 27% 28%, var(--moon), transparent),
    radial-gradient(1px 1px at 36% 82%, var(--moon), transparent),
    radial-gradient(1px 1px at 63% 12%, var(--moon), transparent),
    radial-gradient(1.5px 1.5px at 72% 74%, var(--moon), transparent),
    radial-gradient(1px 1px at 85% 46%, var(--moon), transparent),
    radial-gradient(1.5px 1.5px at 93% 88%, var(--moon), transparent);
  opacity: 0.55;
}
.hero::after {
  background:
    radial-gradient(2px 2px at 14% 40%, var(--moon), transparent),
    radial-gradient(1.5px 1.5px at 44% 8%, var(--moon), transparent),
    radial-gradient(2px 2px at 58% 90%, var(--moon), transparent),
    radial-gradient(1.5px 1.5px at 79% 26%, var(--moon), transparent),
    radial-gradient(2px 2px at 96% 62%, var(--moon), transparent);
  animation: twinkle 10s ease-in-out 2s infinite both;
}
@keyframes twinkle { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.7; } }

.moon {
  position: absolute;
  top: clamp(1.5rem, 6vw, 3.5rem);
  right: clamp(1.5rem, 8vw, 6rem);
  z-index: -1;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  box-shadow: -0.7rem 0.35rem 0 0 var(--moon);
  filter: drop-shadow(0 0 1rem rgba(237, 227, 204, 0.35));
}
/* ——— Открытие страницы ———
   Страница стартует тёмной. Окно зажигается одним плавным движением (≈2,8 с, без паузы на старте, как в приложении:
   свет не быстрее 0,8 с, без мерцания и вспышек), вместе с ним теплеет фон, потом выплывают
   луна, звёзды и текст. Начальное состояние задаёт сама анимация (fill-mode both). */
:root { --dawn: #141110; --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --ease-light: cubic-bezier(0.22, 0.6, 0.3, 1); }

/* Завеса: тёмный слой над фоном, прозрачность которого уходит в ноль. Анимируется только opacity
   (композитор, без перерисовки экрана): анимация background-color и filter давала рывки. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--dawn); opacity: 0;
  animation: veil-out 3s var(--ease-light) both;
}
@keyframes veil-out { from { opacity: 1; } to { opacity: 0; } }

/* Дизеринг: едва заметный шум поверх всего ломает ступеньки (banding) в тёмных градиентах. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background: url("/assets/img/noise.png"); opacity: 0.012;
}

.aura {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60rem 36rem at 50% 38%, rgba(233, 184, 114, 0.1000) 0%, rgba(233, 184, 114, 0.0961) 8%, rgba(233, 184, 114, 0.0854) 17%, rgba(233, 184, 114, 0.0702) 25%, rgba(233, 184, 114, 0.0533) 33%, rgba(233, 184, 114, 0.0374) 42%, rgba(233, 184, 114, 0.0242) 50%, rgba(233, 184, 114, 0.0145) 58%, rgba(233, 184, 114, 0.0080) 67%, rgba(233, 184, 114, 0.0041) 75%, rgba(233, 184, 114, 0.0020) 83%, rgba(233, 184, 114, 0.0009) 92%, rgba(233, 184, 114, 0.0003) 100%);
  animation: fade-in 3.2s var(--ease-light) both;
}

.logo::before { animation: fade-in 2.8s var(--ease-light) both; }
.mark .halo { animation: fade-in 2.8s var(--ease-light) both; }
/* Окно зажигается, затем «дышит» 5,5 раза в минуту с глубиной 6 % (как в приложении). */
.mark .pane { animation: fade-in 2.8s var(--ease-light) both, breathe 10.9s ease-in-out 3s infinite; }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.94; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
/* Текст появляется двумя независимыми анимациями: проявление (opacity) долгое и мягкое, подъём (transform)
   короткий и заканчивается раньше. Одна общая кривая на 1,8 с давала бесконечный хвост: последние пиксели
   текст проходил ступеньками (пиксельная сетка), и это выглядело как прыжки. Размытие (filter) убрано:
   оно квантуется и в конце резко пропадает. Задержки (animation-delay) ниже действуют на обе анимации. */
@keyframes rise-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise-move { from { transform: translateY(0.75rem); } to { transform: none; } }
.hero h1, .hero .tagline, .hero .soon, .hero .social li, .hero .contact, .foot {
  animation: rise-fade 1.8s var(--ease-soft) both, rise-move 1.1s cubic-bezier(0.25, 0.6, 0.35, 1) both;
}
.hero h1 { animation-delay: 1.2s; }
.hero .tagline { animation-delay: 1.6s; }
.hero .soon { animation-delay: 2s; }
.hero .social li:nth-child(1) { animation-delay: 2.40s; }
.hero .social li:nth-child(2) { animation-delay: 2.56s; }
.hero .social li:nth-child(3) { animation-delay: 2.72s; }
.hero .social li:nth-child(4) { animation-delay: 2.88s; }
.hero .social li:nth-child(5) { animation-delay: 3.04s; }
.hero .social li:nth-child(6) { animation-delay: 3.20s; }
.hero .social li:nth-child(7) { animation-delay: 3.36s; }
.hero .social li:nth-child(8) { animation-delay: 3.52s; }
.hero .social li:nth-child(9) { animation-delay: 3.68s; }
.hero .contact { animation-delay: 4.2s; }
.foot { animation-delay: 4.6s; }
@keyframes stars-in { from { opacity: 0; } to { opacity: 0.55; } }
.hero .moon { animation: fade-in 3.5s var(--ease-soft) 0.8s both; }
.hero::before { animation: stars-in 3.5s var(--ease-soft) 0.8s both; }

h1 {
  margin: 0;
  font: 600 clamp(2.5rem, 9vw, 4rem)/1.1 var(--serif);
  color: var(--headline);
  letter-spacing: -0.01em;
}

.tagline { margin: 0.75rem 0 0; font: 500 clamp(1.125rem, 3.5vw, 1.375rem)/1.4 var(--serif); color: var(--text); }

.soon {
  margin: 2rem 0 0;
  padding: 0.5rem 1.25rem;
  border: 1px solid rgba(233, 184, 114, 0.45);
  border-radius: 999px;
  color: var(--light);
  font-size: 0.875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.social { list-style: none; margin: 3rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; max-width: 30rem; }
.social a {
  display: block;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.9375rem;
  text-decoration: none;
}
.social a:hover { color: var(--night); background: var(--light); }

.contact { margin: 1.5rem 0 0; color: var(--text-secondary); font-size: 0.9375rem; }
.contact a { margin: 0 0.5rem; }

/* ——— Подстраницы: privacy, terms, support ——— */
.doc { flex: 1; padding-block: 2rem 4rem; }
.doc h1 { font-size: clamp(2rem, 7vw, 2.75rem); margin-bottom: 0.5rem; }
.doc h2 { margin: 2.25rem 0 0.5rem; font: 600 1.375rem/1.3 var(--serif); color: var(--headline); }
.doc p, .doc li { color: var(--text); }
.doc .meta { color: var(--text-secondary); font-size: 0.9375rem; margin: 0 0 2rem; }
.doc .note { padding: 1rem 1.25rem; border-radius: 0.75rem; background: var(--surface); }

/* ——— Подвал ——— */
.foot { padding: 1.5rem 0 2rem; text-align: center; color: var(--text-secondary); font-size: 0.875rem; }
.foot nav { margin-bottom: 0.5rem; }
.foot nav a { margin: 0 0.75rem; color: var(--text-secondary); }
.foot nav a:hover { color: var(--light); }

/* Повторный заход в сессии (см. assets/intro.js): интро не играем, остаются только тихие фоновые
   «дыхание» окна и мерцание звёзд. Только при разрешённой анимации, иначе исключения перебили бы reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  html.seen, html.seen *, html.seen *::before, html.seen *::after { animation: none !important; }
  html.seen .mark .pane { animation: breathe 10.9s ease-in-out infinite !important; }
  html.seen .hero::after { animation: twinkle 10s ease-in-out infinite both !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}