/* style.css — неоновые стили и фон (этап neon-style). */

:root {
  --bg: #0a0a12;
  --bg-2: #120a1e;
  --neon: #0ff;
  --neon-accent: #ff2bd6;
  --neon-glow: rgba(0, 255, 255, 0.75);
  --tagline: #ff2bd6;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { color-scheme: dark; }

body {
  /* dvh — корректная высота на мобильных с динамической адресной строкой. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Учитываем «чёлки»/закруглённые углы на мобильных. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  font-family: "Segoe UI", Tahoma, sans-serif;
  color: var(--neon);
  /* Тёмный фон с лёгким радиальным «заревом» под надписью.
     fixed на body (а не background-attachment: fixed) — последнее
     тормозит/глючит при скролле на мобильных. */
  background:
    radial-gradient(ellipse 80% 60% at 50% 45%, rgba(255, 43, 214, 0.12), transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(0, 255, 255, 0.14), transparent 70%),
    linear-gradient(160deg, var(--bg) 0%, var(--bg-2) 100%);
  overflow: hidden;
}

/* Тонкая сетка-«перспектива» на фоне для атмосферы ретро-неона. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}

.stage {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 2rem;
}

/* Неоновая надпись: цвет + многослойное свечение через text-shadow. */
.neon {
  font-size: clamp(3rem, 15vw, 10rem);
  letter-spacing: 0.12em;
  font-weight: 700;
  color: #eafdff;
  /* На очень узких экранах слово не должно ломаться по буквам. */
  white-space: nowrap;
  text-shadow:
    0 0 4px #fff,
    0 0 11px var(--neon),
    0 0 22px var(--neon),
    0 0 42px var(--neon-glow),
    0 0 80px var(--neon-glow);
  animation: neon-flicker 4.5s infinite alternate;
}

/* Буквы — отдельные inline-блоки под по-буквенную анимацию (этап animation). */
.neon__letter {
  display: inline-block;
  /* Плавный возврат после интерактива с курсором (JS правит transform/shadow). */
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1),
              text-shadow 0.35s ease;
  will-change: transform;
}

/* При включённой анимации (JS добавляет .is-animated) буквы «зажигаются»
   по очереди, затем у каждой свой ритм лёгкого мерцания. */
.neon.is-animated .neon__letter {
  animation:
    letter-on 0.5s ease both,
    letter-flicker 3.6s steps(1) infinite;
  /* --i и --flicker-delay выставляет JS для каждой буквы. */
  animation-delay:
    calc(var(--i, 0) * 0.12s),
    calc(0.9s + var(--flicker-delay, 0s));
}

/* Розжиг буквы: из тусклой и слегка смещённой — в полный неон. */
@keyframes letter-on {
  from { opacity: 0; transform: translateY(0.25em) scale(0.92); }
  to   { opacity: 1; transform: none; }
}

/* Едва заметное по-буквенное мерцание (поверх общего .neon flicker). */
@keyframes letter-flicker {
  0%, 92%, 100% { opacity: 1; }
  94%           { opacity: 0.72; }
  96%           { opacity: 1; }
  98%           { opacity: 0.85; }
}

/* Подпись — в контрастном розовом неоне. */
.tagline {
  margin-top: 1.4rem;
  color: #ffe6fb;
  font-size: clamp(0.9rem, 3vw, 1.4rem);
  letter-spacing: 0.5em;
  text-transform: uppercase;
  text-shadow:
    0 0 4px #fff,
    0 0 10px var(--neon-accent),
    0 0 20px var(--neon-accent),
    0 0 38px rgba(255, 43, 214, 0.6);
}

/* Лёгкое мерцание неона — едва заметная пульсация яркости. */
@keyframes neon-flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    opacity: 1;
  }
  20%, 24%, 55% {
    opacity: 0.78;
  }
}

/* ── Адаптивность ─────────────────────────────────────────────────────── */

/* Узкие экраны: уменьшаем межбуквенный интервал и трекинг подписи,
   чтобы слово гарантированно помещалось без переноса/обрезки. */
@media (max-width: 480px) {
  .neon { letter-spacing: 0.06em; }
  .tagline { letter-spacing: 0.35em; margin-top: 1.1rem; }
  .stage { padding: 1.25rem; }
}

/* Низкие/альбомные экраны (телефон лёжа): уменьшаем шрифт по высоте,
   чтобы надпись и подпись не упирались в края. */
@media (max-height: 480px) and (orientation: landscape) {
  .neon { font-size: clamp(2.4rem, 18vh, 6rem); }
  .tagline { margin-top: 0.8rem; }
}

/* Сенсорные устройства без точного указателя: интерактив с курсором там
   не нужен — JS его и не вешает, но на всякий случай гасим will-change,
   чтобы не держать лишние слои композитинга. */
@media (hover: none) and (pointer: coarse) {
  .neon__letter { will-change: auto; }
}

/* Очень большие экраны — слегка добавляем «воздуха» вокруг сцены. */
@media (min-width: 1600px) {
  .stage { padding: 3rem; }
}

/* ── Доступность ──────────────────────────────────────────────────────── */

/* Уважаем настройку «уменьшить движение». */
@media (prefers-reduced-motion: reduce) {
  .neon,
  .neon.is-animated .neon__letter { animation: none; }
  .neon__letter { transition: none; opacity: 1; transform: none; }
}

/* Режим высокой контрастности: усиливаем читаемость надписи. */
@media (prefers-contrast: more) {
  .neon { color: #fff; }
  .tagline { color: #fff; }
}