/* #БЛОК-1: СБРОС И БАЗОВЫЕ ПЕРЕМЕННЫЕ ============================== */
:root {
  --bg: #0B0C0E;
  --panel-bg: #14161A;
  --border: #23262B;
  --text-primary: #EDEAE3;
  --text-secondary: #8B8F97;
  --accent: #F2B705;
  --panther-fill: #1F2226;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

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

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  overflow: hidden;
}

body { display: flex; }

/* #БЛОК-2: ЛЕВАЯ ПАНЕЛЬ УПРАВЛЕНИЯ ================================= */
.panel {
  width: 260px;
  min-width: 260px;
  height: 100vh;
  background: var(--panel-bg);
  border-right: 1px solid var(--border);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  z-index: 10;
}

.panel__header { display: flex; align-items: center; gap: 8px; }

.panel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.panel__title {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.panel__group { display: flex; flex-direction: column; gap: 8px; }

.panel__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.panel__btn {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.panel__btn:hover { border-color: var(--accent); }

.panel__value {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
}

input[type="range"] { width: 100%; accent-color: var(--accent); }

.panel__swatches { display: flex; gap: 10px; }

.swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c);
  border: 2px solid transparent;
  cursor: pointer;
}

.swatch:hover { border-color: var(--text-primary); }

.panel__group--future { opacity: 0.5; }

.panel__hint { font-size: 12px; color: var(--text-secondary); }

.panel__footer {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
}

/* #БЛОК-3: ОСНОВНАЯ СЦЕНА ========================================== */
.stage {
  position: relative;
  flex: 1;
  height: 100vh;
  overflow: hidden;
}

.stage__content { position: relative; z-index: 2; padding: 64px 64px 0; }

.stage__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

.stage__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 40px;
  margin-bottom: 8px;
}

.stage__subtitle {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-secondary);
}

/* #ПОДБЛОК-3.1: ДОРОЖКА И АНИМАЦИЯ ПАНТЕРЫ ========================= */
.panther-track {
  position: absolute;
  bottom: 60px;
  left: 0;
  width: 100%;
  height: 110px;
  z-index: 1;
}

.panther {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 110px;
  will-change: transform;
}

/* ноги: два кадра бега переключаются через JS добавлением класса .leg-swap */
#leg-front-fwd, #leg-back-fwd { opacity: 1; }
#leg-front-back, #leg-back-back { opacity: 0; }
.leg-swap #leg-front-fwd, .leg-swap #leg-back-fwd { opacity: 0; }
.leg-swap #leg-front-back, .leg-swap #leg-back-back { opacity: 1; }

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