/* ============================================================
   Cherry Design System — единые токены темы.
   Используется и в лаунчере, и на сайте.
   ============================================================ */
@import url("./assets/font.css");   /* Monocraft (пиксельный, data-URL) */

:root {
  /* ---- Палитра (вытянута пипеткой из референса) ---- */
  --c-bg-0: #050006;          /* почти чёрный — края */
  --c-bg-1: #08010a;          /* фон-середина */
  --c-bg-2: #12060f;          /* приподнятые поверхности */
  --c-panel: #150810;         /* карточки/инпуты (чуть светлее фона) */
  --c-panel-hi: #1e0b18;      /* hover карточек */

  --c-accent: #e0408a;        /* основной малиново-розовый (с реф) */
  --c-accent-hi: #ff5ca0;     /* ярче (hover) */
  --c-accent-2: #ff3d7f;      /* розовый для градиентов */
  --c-accent-deep: #8c1442;   /* тёмный малиновый край градиента кнопки */
  --c-violet: #b53bd6;        /* фиолетовый акцент (кристаллы) */

  --c-text: #f6eef2;          /* основной текст */
  --c-text-dim: #9c8090;      /* приглушённый */
  --c-border: #2e1622;        /* рамки (тёмные) */
  --c-border-hi: #5a2540;     /* рамка hover */

  --c-ok: #5ad06a;
  --c-err: #ff6b6b;

  /* ---- Свечения ---- */
  --glow-accent: 0 0 24px rgba(224, 64, 138, 0.5);
  --glow-soft: 0 0 40px rgba(224, 64, 138, 0.18);

  /* ---- Градиенты ---- */
  --grad-accent: linear-gradient(135deg, var(--c-accent-2) 0%, var(--c-accent) 55%, var(--c-accent-deep) 100%);
  --grad-logo: linear-gradient(100deg, var(--c-accent) 0%, #ff8fc0 45%, #ffffff 100%);
  /* фон почти чёрный; центральный glow вынесен в отдельный анимированный слой */
  --grad-bg: radial-gradient(ellipse 100% 80% at 50% 40%, #1a0612 0%, var(--c-bg-1) 50%, var(--c-bg-0) 100%);

  /* ---- Радиусы / тени ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.5);
  --shadow-pop: 0 18px 50px rgba(0, 0, 0, 0.6);

  /* ---- Тайминги анимаций ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.16s;
  --t-mid: 0.32s;
  --t-slow: 0.6s;

  /* ---- Типографика (пиксельный Monocraft) ---- */
  --font-ui: "Monocraft", "Segoe UI", system-ui, sans-serif;
  --font-display: "Monocraft", "Segoe UI", system-ui, sans-serif;
}

/* нормализация */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  font-family: var(--font-ui);
  color: var(--c-text);
  background: var(--c-bg-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Фон сцены с паралаксом ---- */
.scene {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: var(--grad-bg);
  isolation: isolate;
}

/* слой частиц/объектов (заполняется JS/разметкой) */
.scene-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* анимированный центральный glow (мягко дышит, "отвешивает темноту") */
.scene::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  width: 90vw;
  height: 90vh;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at center,
    rgba(224, 64, 138, 0.22) 0%,
    rgba(224, 64, 138, 0.10) 28%,
    rgba(120, 20, 70, 0.05) 48%,
    transparent 68%
  );
  filter: blur(20px);
  animation: glow-breathe 9s ease-in-out infinite;
}
@keyframes glow-breathe {
  0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.12); }
}

/* контент поверх сцены */
.scene-content {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* виньетка по краям для глубины */
.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 70% at 50% 45%, transparent 55%, rgba(0,0,0,0.55) 100%);
}

/* ---- Утилита: градиентный текст ---- */
.grad-text {
  background: var(--grad-logo);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---- Базовая кнопка ---- */
.btn {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 15px;
  border: none;
  border-radius: var(--r-md);
  padding: 14px 22px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-mid) var(--ease),
              background var(--t-mid) var(--ease),
              filter var(--t-fast) var(--ease);
}
.btn:active { transform: translateY(1px) scale(0.99); }

.btn-primary {
  background: var(--grad-accent);
  color: #fff;
  box-shadow: var(--glow-accent);
}
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 0 30px rgba(232,74,111,0.6); transform: translateY(-1px); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; filter: none; transform: none; }

.btn-outline {
  background: rgba(255,255,255,0.02);
  color: var(--c-text);
  border: 1px solid var(--c-border);
}
.btn-outline:hover { border-color: var(--c-accent); color: var(--c-accent); background: rgba(232,74,111,0.06); }

/* ---- Поле ввода ---- */
.field-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-accent);
  margin-bottom: 8px;
  letter-spacing: 0.2px;
}
.input {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 0 16px;
  transition: border-color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.input:focus-within {
  border-color: var(--c-accent);
  box-shadow: var(--glow-soft);
}
.input input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--c-text);
  font-size: 16px;
  font-family: var(--font-ui);
  padding: 14px 0;
}
.input input::placeholder { color: var(--c-text-dim); }
.input .input-icon { color: var(--c-text-dim); display: flex; }

/* ---- Карточка/панель ---- */
.card {
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}

/* ---- Появление контента ---- */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rise { animation: rise var(--t-slow) var(--ease) both; }
.rise-1 { animation-delay: 0.05s; }
.rise-2 { animation-delay: 0.12s; }
.rise-3 { animation-delay: 0.19s; }
.rise-4 { animation-delay: 0.26s; }

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