/* =====================================================================
   Файл: public/assets/css/base.css
   Основа: сброс браузерных стилей, шрифты, доступность, анимации.
   Цвета и размеры здесь не задаются — только через токены из tokens.css.
   ===================================================================== */

/* ---------- Сброс ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: calc(var(--fs-body) * var(--scale));
  line-height: 1.5;
  overflow-x: hidden;                 /* без горизонтальной прокрутки страницы */
}
h1, h2, h3, p { margin: 0; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); }
img, svg { display: block; max-width: 100%; }
/* Атрибут hidden всегда прячет элемент, даже если у него задан display */
[hidden] { display: none !important; }

/* ---------- Доступность ---------- */
/* Рамка фокуса видна только при навигации с клавиатуры */
:focus-visible { outline: 3px solid var(--focus); 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;
}
/* Ссылка «К содержимому» — появляется при нажатии Tab */
.skip {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--surface); color: var(--text); padding: 10px 14px;
  border: 2px solid var(--focus); border-radius: 8px;
}
.skip:focus { top: 8px; }

/* ---------- Показ только на ПК / только на телефоне ---------- */
@media (max-width: 640px) { .only-desk { display: none !important; } }
@media (min-width: 641px) { .only-mob { display: none !important; } }

/* ---------- Анимации ---------- */
/* Появление экрана: A — пружинка, B — пиксельный сдвиг, C — мягкое проявление */
@keyframes bou-in-a { 0% { opacity: 0; transform: scale(.96); } 70% { transform: scale(1.01); } 100% { opacity: 1; transform: none; } }
@keyframes bou-in-b { 0% { opacity: 0; transform: translateY(4px); } 50% { opacity: 1; transform: translateY(2px); } 100% { transform: none; } }
@keyframes bou-in-c { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes bou-pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes bou-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .35; } }

.screen { animation: bou-in-c 300ms var(--ease) both; }
:root[data-theme="A"] .screen { animation-name: bou-in-a; animation-duration: 380ms; }
:root[data-theme="B"] .screen { animation-name: bou-in-b; animation-duration: 240ms; animation-timing-function: steps(3); }

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