/* ============================================================
   RTS — дизайн-токены.
   Палитра и метрики взяты из фирменного экспорта Figma:
   figma/design-system/Group 4833.png (основная пятёрка)
   figma/design-system/Frame 36..58.png (расширенные свотчи)
   ============================================================ */

@import url("../fonts/fonts.css");

:root {
  /* --- Основная палитра --- */
  --acid-green: #bbff2c;
  --purple-space: #792aff;
  --deep-purple: #200153;
  --black: #000000;
  --white: #ffffff;

  /* --- Расширенная палитра --- */
  --red-magma: #fc2d00;
  --volcanic-orange: #ff6a00;
  --golden-gate: #f7c000;
  --sunny-yellow: #ffe603;
  --alien-green: #def535;
  --pure-green: #04c800;
  --ocean-green: #00c7a3;
  --amethyst-violet: #51508e;
  --lilac-garden: #d2d0f7;
  --digital-blue: #0f3ae0;
  --aqua-blue: #0090ff;
  --morning-blue: #7893ff;
  --moon-light: #f2ecff;
  --purple-planet: #9a7bff;
  --dark-side: #2b2d35;
  --dusty-grey: #dbd9dd;
  --fafafa: #fafafa;
  --boring-grey: #777b84;
  --rose-flame: #ff3e9a;
  --gentle-rose: #ffc6f2;

  /* --- Типографика --- */
  --font-pixel: "Press Start 2P", ui-monospace, monospace;
  --font-display: "Unbounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* --- Геометрия ретро-окна --- */
  --bd: 3px;                 /* толщина чёрной обводки */
  --shadow-off: 8px;         /* смещение жёсткой тени */
  --radius: 10px;
  --bar-h: 34px;             /* высота тайтл-бара */

  /* --- Тайминги --- */
  --t-fast: 120ms;
  --t-med: 260ms;
  --t-slow: 450ms;
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   База
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--white);
  background: var(--deep-purple);
  /* Пиксельный курсор из фирменного набора — hotspot в кончике пальца. */
  cursor: url("../img/ui/cursor.png") 6 2, auto;
  overflow-x: hidden;
}

button,
a,
label,
input,
[role="button"] {
  cursor: url("../img/ui/cursor.png") 6 2, pointer;
}

img {
  max-width: 100%;
}

/* Весь пиксель-арт масштабируем без сглаживания — иначе каша. */
.px {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

:focus-visible {
  outline: 3px solid var(--acid-green);
  outline-offset: 3px;
}

/* ============================================================
   Утилиты
   ============================================================ */

.pixel-label {
  font-family: var(--font-pixel);
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Фон: звёздное поле + CRT-развёртка.
   Слои лежат под контентом и не перехватывают клики.
   ============================================================ */

.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 15% 0%, #3b0f8f 0%, transparent 60%),
    radial-gradient(100% 80% at 90% 100%, #4a1391 0%, transparent 55%),
    var(--deep-purple);
}

/* Звёзды рисуем повторяющимся градиентом-точками в три слоя разной
   плотности и скорости — получается параллакс без единой картинки.
   --speed множится ареной: чем чаще голоса, тем быстрее летят звёзды. */
.bg__stars {
  position: absolute;
  inset: -100% 0 0 0;
  height: 300%;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff 50%, transparent 50%),
    radial-gradient(1px 1px at 70% 10%, #fff 50%, transparent 50%),
    radial-gradient(2px 2px at 40% 70%, var(--acid-green) 50%, transparent 50%),
    radial-gradient(1px 1px at 90% 50%, #fff 50%, transparent 50%),
    radial-gradient(2px 2px at 10% 85%, var(--purple-planet) 50%, transparent 50%);
  background-size: 220px 220px, 340px 340px, 500px 500px, 180px 180px, 420px 420px;
  opacity: 0.55;
  animation: star-drift calc(90s / var(--speed, 1)) linear infinite;
}

.bg__stars--far {
  opacity: 0.28;
  background-size: 160px 160px, 260px 260px, 380px 380px, 140px 140px, 300px 300px;
  animation-duration: calc(160s / var(--speed, 1));
}

@keyframes star-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, 33.333%, 0); }
}

/* Плавающие пиксельные планеты. */
.bg__planet {
  position: absolute;
  width: var(--size, 90px);
  opacity: 0.35;
  animation: float-y var(--dur, 14s) ease-in-out infinite alternate;
}

@keyframes float-y {
  from { transform: translateY(-14px) rotate(-4deg); }
  to   { transform: translateY(14px) rotate(4deg); }
}

/* Развёртка ЭЛТ — очень слабая, только чтобы фон «дышал» как экран. */
.bg__scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.16) 0 1px,
    transparent 1px 3px
  );
  opacity: 0.5;
  mix-blend-mode: multiply;
}

/* ============================================================
   Уважаем настройку «меньше движения»: гасим всё декоративное
   движение, оставляя мгновенную смену состояний.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .bg__stars,
  .bg__planet {
    animation: none !important;
  }
}