/* Шрифт — свой, без Google. Geist Mono (SIL OFL 1.1, лицензия рядом), латиница. */
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;
  --bg: #05080e;
  --fg: #e9ecf0;
  --muted: #8d9cb0;
  --accent: #dec696;
  --line: rgba(141, 156, 176, 0.32);
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  /* Тёмный ореол держит буквы читаемыми поверх сцены. */
  --dark-shadow: 0 0 18px rgba(5, 8, 14, 0.95), 0 0 6px rgba(5, 8, 14, 0.9);
}
html, body { margin: 0; height: 100%; background: var(--bg); }
body { overflow: hidden; -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }

.page {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
}

/* Слои сцены: дно со светом и средой, дальние галактики, тень на дне, галактика, нити и код, свечение. */
.layer {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
/* Свечение — холст в четверть разрешения, растянутый CSS: мягкий ореол без blur в кадре. */
.glow, .body { mix-blend-mode: screen; }

.inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.column {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ── Имя ─────────────────────────────────────────────────────────────
   Переменные задаёт name.js по сцене: --lx/--ly/--lit — свет ядра галактики (направление и сила),
   --fx/--fy/--fa — вспышка сверхновой. Без JS все четыре сила-переменные нулевые, остаётся тёмный ореол. */
.name {
  margin: 0;
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(28px, 8.4vw, 72px);
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--fg);
  text-shadow:
    calc(var(--lx, 0) * 1.2px) calc(var(--ly, 0) * 1.2px) 0.5px rgba(255, 216, 160, calc(var(--lit, 0) * 0.4)),
    calc(var(--lx, 0) * 4px) calc(var(--ly, 0) * 4px) 12px rgba(255, 186, 110, calc(var(--lit, 0) * 0.1)),
    calc(var(--fx, 0) * 1.8px) calc(var(--fy, 0) * 1.8px) 0.5px rgba(255, 246, 228, calc(var(--fa, 0) * 0.95)),
    calc(var(--fx, 0) * 5px) calc(var(--fy, 0) * 5px) 14px rgba(190, 214, 255, calc(var(--fa, 0) * 0.55)),
    var(--dark-shadow);
}
.w { white-space: nowrap; }
.ch {
  display: inline-block;
  transition: opacity 0.55s ease-out, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), color 1.5s ease-out;
}

/* Появление (только при включённом JS и без reduced motion): буква проявляется, когда в неё сели частицы.
   Без JS и при reduced motion правило не действует, текст виден сразу. rescue — запасной выход на случай,
   если скрипт не отработал: через 10 с всё показывается само. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .ch:not(.on) {
    opacity: 0;
    transform: translateY(0.14em);
    color: #fff1d6;
    animation: rescue 0.01s 12s forwards;
  }
  .tg:not(.on) {
    opacity: 0;
    transform: translateY(10px);
    animation: rescue 0.01s 12s forwards;
  }
}
@keyframes rescue { to { opacity: 1; transform: none; } }
html.fx-still .ch { transition: none; }
html.fx-still .tg { transition: color 0.2s, background-color 0.2s; }

/* Блик: по буквам слева направо проходит мягкий звёздный свет. */
.name.shine .ch { animation: shine 1.5s ease-in-out both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes shine {
  0%, 100% { color: var(--fg); }
  45% { color: #fbfdff; text-shadow: 0 0 12px rgba(196, 218, 255, 0.5), var(--dark-shadow); }
}

/* ── Ник ─────────────────────────────────────────────────────────────── */
.tg {
  position: relative;
  display: inline-block;
  margin-top: 18px;
  padding: 6px 10px;
  border-radius: 6px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(15px, 1.5vw, 18px);
  color: var(--muted);
  text-decoration: none;
  text-shadow: 0 0 12px rgba(5, 8, 14, 0.95), 0 0 4px rgba(5, 8, 14, 0.9);
  transition: color 0.2s, background-color 0.2s, opacity 1.3s ease-out, transform 1.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Подчёркивание — хвост кометы: растёт слева направо, голова светится на правом конце. */
.tg::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 3px;
  height: 1.5px;
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(141, 156, 176, 0), rgba(190, 214, 255, 0.55) 72%, #fff3dc);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  filter: drop-shadow(0 0 3px rgba(255, 236, 196, 0.75));
  transition: background-size 0.55s cubic-bezier(0.25, 0.7, 0.2, 1);
}
/* Звезда у «@»: две тонкие лучевые линии и ядро. */
.at { position: relative; }
.at::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 52%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(circle, #fff6e0 0, rgba(255, 226, 170, 0.8) 2px, rgba(255, 226, 170, 0) 7px),
    linear-gradient(90deg, rgba(255, 240, 212, 0), rgba(255, 240, 212, 0.9) 50%, rgba(255, 240, 212, 0)) center / 100% 1px no-repeat,
    linear-gradient(0deg, rgba(255, 240, 212, 0), rgba(255, 240, 212, 0.9) 50%, rgba(255, 240, 212, 0)) center / 1px 100% no-repeat;
}
.tg.on .at::before { animation: spark 1.3s 0.5s ease-out both; }
@keyframes spark {
  0% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  25% { opacity: 1; transform: scale(1.1) rotate(25deg); }
  100% { opacity: 0; transform: scale(0.8) rotate(60deg); }
}
@keyframes spark2 {
  0% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  25% { opacity: 1; transform: scale(1.15) rotate(25deg); }
  100% { opacity: 0; transform: scale(0.8) rotate(60deg); }
}
@media (hover: hover) {
  .tg:hover { color: var(--fg); background: rgba(255, 255, 255, 0.06); }
  .tg:hover::after { background-size: 100% 100%; }
  .tg:hover .at::before { animation: spark2 0.8s ease-out both; }
}
.tg:focus-visible { color: var(--fg); background: rgba(255, 255, 255, 0.06); outline: 2px solid var(--accent); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(222, 198, 150, 0.16); }
.tg:focus-visible::after { background-size: 100% 100%; }
.tg:focus-visible .at::before { animation: spark2 0.8s ease-out both; }

/* ── Управление ──────────────────────────────────────────────────────── */
.ui {
  font: 500 12px/1 var(--mono);
  color: var(--muted);
  background: rgba(5, 8, 14, 0.66);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
}
.ui:hover { color: var(--fg); }
.ui:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pause { position: absolute; right: 16px; bottom: 16px; z-index: 2; }
.err { position: absolute; left: 16px; right: 16px; bottom: 60px; z-index: 2; margin: 0; text-align: center; font: 13px/1.4 var(--mono); color: #e3a27f; }

@media (prefers-reduced-motion: reduce) {
  .tg, .tg::after { transition: none; }
  .at::before, .tg.on .at::before { animation: none; }
  .name.shine .ch { animation: none; }
}

/* ── 404: статичный фон без скриптов ─────────────────────────────────── */
.nf {
  background:
    radial-gradient(ellipse 38% 30% at 68% 26%, rgba(222, 198, 150, 0.22), rgba(222, 198, 150, 0) 70%),
    radial-gradient(ellipse 60% 48% at 66% 28%, rgba(98, 128, 182, 0.22), rgba(98, 128, 182, 0) 72%),
    radial-gradient(ellipse 80% 70% at 16% 6%, rgba(38, 54, 84, 0.5), rgba(38, 54, 84, 0) 70%),
    var(--bg);
}
.nf-code { margin: 0; font: 500 clamp(15px, 1.5vw, 18px) / 1 var(--mono); letter-spacing: 0.3em; color: var(--accent); }
.nf-title { margin: 14px 0 0; font: 600 clamp(24px, 6vw, 44px) / 1.1 var(--mono); letter-spacing: -0.03em; color: var(--fg); text-shadow: var(--dark-shadow); }
.nf .tg { margin-top: 22px; }