/* Общие стили для всех страниц.
   Цвета, шрифты и размеры сюда не пишем: они приходят из site_settings.py как переменные var(--...). */

/* --- Шрифты (лежат в static/fonts) --- */
@font-face {
  font-family: 'Manrope';
  src: url("../fonts/manrope-cyrillic.e58febde317b.woff2") format('woff2');
  font-weight: 200 800; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  src: url("../fonts/manrope-latin.938c6e8019b6.woff2") format('woff2');
  font-weight: 200 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  src: url("../fonts/nunito-cyrillic.fd4986b86093.woff2") format('woff2');
  font-weight: 200 1000; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Nunito';
  src: url("../fonts/nunito-latin.166202cc391c.woff2") format('woff2');
  font-weight: 200 1000; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Основа --- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--text-size);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 { font-family: var(--font-headings); font-weight: 800; line-height: 1.2; margin: 0; }

button { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }

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

/* --- Помощник (Маша или Дима): кружок с буквой и имя — в разборах и в плане --- */
.helper { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 700; }
.helper-avatar {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-headings); font-weight: 900; color: var(--on-accent);
}
.helper-f { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.helper-m { background: linear-gradient(135deg, var(--accent-2), var(--accent)); }
.helper-note {
  display: grid; gap: 8px; margin: 0 0 16px; padding: 14px 18px; border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--accent-2) 10%, var(--option));
}
.helper-note p { margin: 0; }
.helper-note .skeleton { display: grid; gap: 8px; }
.helper-note .sk { display: block; height: 12px; border-radius: 6px; background: var(--line); animation: breathe 1.4s ease-in-out infinite alternate; }
.helper-note .sk-wide { width: 90%; } .helper-note .sk-short { width: 55%; }
@keyframes breathe { from { opacity: .45; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .helper-note .sk { animation: none; } }

/* --- Фейерверк: искры разлетаются (только transform и opacity). Экран «уровень пройден» и контрольный тест --- */
.fireworks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fireworks.is-page { position: fixed; z-index: 50; }
.fireworks i {
  position: absolute; width: 8px; height: 8px; border-radius: 50%; opacity: 0;
  animation: spark 1.3s cubic-bezier(.15,.7,.3,1) both;
}
@keyframes spark {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 40px)) scale(.3); }
}

/* --- Фоновые пятна: медленно плавают, двигаем только transform --- */
.blobs { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.blob {
  position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%;
  opacity: .55; will-change: transform;
}
.blob-1 { background: radial-gradient(circle, var(--blob-1) 0%, transparent 65%); top: -35vmax; right: -30vmax; animation: drift-1 28s ease-in-out infinite alternate; }
.blob-2 { background: radial-gradient(circle, var(--blob-2) 0%, transparent 65%); bottom: -40vmax; left: -35vmax; animation: drift-2 34s ease-in-out infinite alternate; }
.blob-3 { background: radial-gradient(circle, var(--blob-3) 0%, transparent 65%); top: 30%; left: 40%; width: 45vmax; height: 45vmax; opacity: .35; animation: drift-3 40s ease-in-out infinite alternate; }

@keyframes drift-1 { to { transform: translate(-8vmax, 10vmax) scale(1.1); } }
@keyframes drift-2 { to { transform: translate(10vmax, -6vmax) scale(1.08); } }
@keyframes drift-3 { to { transform: translate(-12vmax, -8vmax) scale(.9); } }

/* --- Кнопка: мягко «нажимается» --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 28px; border: 0; cursor: pointer; text-decoration: none;
  border-radius: var(--radius-button);
  background: linear-gradient(100deg, var(--accent), color-mix(in srgb, var(--accent) 75%, var(--accent-2)));
  color: var(--on-accent); font-weight: 700;
  transition: transform var(--speed) cubic-bezier(.2,.8,.2,1), opacity var(--speed);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.97); }
.btn[aria-disabled="true"], .btn:disabled { opacity: .45; cursor: default; transform: none; }

/* --- Кнопка смены темы --- */
.theme-toggle {
  width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--option); color: var(--text);
  transition: transform var(--speed);
}
.theme-toggle:active { transform: scale(.92); }
.theme-toggle svg { width: 22px; height: 22px; }
.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .moon { display: block; }
}

/* --- «Уменьшить анимацию» в настройках устройства: убираем движение --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; }
}