/* ════════════════════════════════════════════
   BASE — Reset · Variables · Typography
════════════════════════════════════════════ */

/* ── Reset ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;

  /* У Raleway цифры по умолчанию oldstyle («текстовые»): 3, 4, 5, 7, 9
     опускаются ниже базовой линии и имеют разную высоту — в датах,
     телефонах и возрасте они визуально «прыгают». Включаем lining figures
     (единая высота, как у заглавных букв) для всего сайта.
     Для шрифтов без этой фичи (Bebas, Oswald) правило безопасно игнорируется. */
  font-variant-numeric: lining-nums;
}

/* ── Глобальный ambient-фон с переливами ──
   Видим всегда, даже когда секция не активна.
   Создаёт единую картину через весь сайт */
.global-ambient {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: var(--bg);
  overflow: hidden;
}

.global-ambient__layer {
  position: absolute;
  inset: -8%;
  background-size: cover;
  background-position: center;
  filter: blur(60px) saturate(0.6) brightness(0.45);
  opacity: 0;
  transition: opacity 1.2s ease;
  animation: ambient-drift 20s ease-in-out infinite alternate;
}

@keyframes ambient-drift {
  0% {
    transform: scale(1) translate(0, 0);
  }

  100% {
    transform: scale(1.05) translate(-1%, -1%);
  }
}

.global-ambient__layer--active {
  opacity: 0.65;
}

/* Конкретные фоны ambient-слоёв — отдельные классы вместо инлайн-стилей.
   image-set() сам выбирает webp там, где он поддерживается (легче jpg
   на 30-40%), а medai-запрос переключает размер под экран — раньше
   на телефон грузилась та же тяжёлая desktop-картинка, что и на ПК. */
.global-ambient__layer--corner {
  background-image: image-set(url('/images/foto/atmosphere/pro-corner/pro-corner-1200.webp') type('image/webp'),
      url('/images/foto/atmosphere/pro-corner/pro-corner-1200.jpg') type('image/jpeg'));
}

.global-ambient__layer--gym {
  background-image: image-set(url('/images/foto/atmosphere/gym-kids/gym-kids-768.webp') type('image/webp'),
      url('/images/foto/atmosphere/gym-kids/gym-kids-768.jpg') type('image/jpeg'));
}

@media (max-width: 768px) {
  .global-ambient__layer--corner {
    background-image: image-set(url('/images/foto/atmosphere/pro-corner/pro-corner-480.webp') type('image/webp'),
        url('/images/foto/atmosphere/pro-corner/pro-corner-480.jpg') type('image/jpeg'));
  }

  .global-ambient__layer--gym {
    background-image: image-set(url('/images/foto/atmosphere/gym-kids/gym-kids-480.webp') type('image/webp'),
        url('/images/foto/atmosphere/gym-kids/gym-kids-480.jpg') type('image/jpeg'));
  }
}

/* Второй слой для глубины */
.global-ambient__layer--depth {
  filter: blur(80px) saturate(0.45) brightness(0.38);
  opacity: 0;
  transition: opacity 1.5s ease;
  animation: ambient-drift-depth 25s ease-in-out infinite alternate-reverse;
}

@keyframes ambient-drift-depth {
  0% {
    transform: scale(1.02) translate(0, 0);
  }

  100% {
    transform: scale(1.08) translate(1%, 1%);
  }
}

.global-ambient__layer--depth--active {
  opacity: 0.35;
}

.global-ambient__grain {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  animation: grain-shift 8s steps(4) infinite;
}

@keyframes grain-shift {

  0%,
  100% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-2%, -2%);
  }

  50% {
    transform: translate(2%, 2%);
  }

  75% {
    transform: translate(-1%, 1%);
  }
}

.global-ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 0%, rgba(0, 0, 0, 0) 30%, rgba(12, 11, 10, 0.85) 100%);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

input,
select,
textarea {
  font-family: inherit;
  /* Контролы наследуют только family, поэтому цифры остаются из шрифта
     по умолчанию (у Raleway это oldstyle) — включаем табличные явно */
  font-variant-numeric: lining-nums;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

/* ── CSS Variables ── */
:root {
  /* Palette */
  --bg: #1c1a17;
  /* Фон */
  --bg-2: #242424;
  /* Поверхности карточки, секции форм, всё что "лежит" на фоне */
  --bg-3: #2c2c2c;
  /* Поверхности чуть светлее — поля ввода, выпадающие списки, плейсхолдеры фото без картинки */
  --bg-4: #383838;
  /* Самый светлый служебный тон — скроллбар, мелкие технические элементы, почти не заметен */
  --border: #322f2b;
  /* --- Тонкие обводки карточек/полей по умолчанию */
  --blue: #1626b9;
  /* Основной синий бренда */
  --accent: var(--blue);
  --accent-dim: #4c63d1;
  --on-accent: var(--white);
  --danger: #d94f4f;
  --blue-glow: rgba(76, 99, 209, 0.45);
  --warm-tint: #c3bbb4;
  /* Тёплый серый со стены зала — используется точечно */
  /* --- Текст --- */
  --text: #d4d4d4;
  /* основной текст */
  --text-dim: #8a8a8a;
  /* второстепенный текст (описания) */
  --text-muted: #444;
  /* совсем приглушённый (копирайт в футере) */
  --white: #f0f0f0;
  /* акцентный "чистый" белый (заголовки, кнопки) */


  /* Layout */
  --header-h: 100px;
  --nav-h: 52px;
  --content-max: 1440px;
  --content-pad: 28px;

  /* Timing */
  --intro-fade: 1000ms;
  --logo-hold: 2500ms;
  --toast-dur: 3500ms;
  --modal-speed: 300ms;
  --nav-speed: 350ms;

  /* Длительности переходов — единая система, 3 шага.
     Держим весь motion в этих значениях, кроме осознанных
     исключений (интро, прогресс-бар, тикер). */
  --duration-fast: 150ms;
  /* hover на кнопках/ссылках */
  --duration-base: 250ms;
  /* большинство переходов */
  --duration-slow: 600ms;
  /* крупные появления, fade экранов */

  /* Шкала z-index — единый источник правды для всех наложений.
     Не использовать магические числа в компонентах, только эти токены. */
  --z-base: 1;
  --z-sticky-header: 500;
  --z-mobile-nav: 600;
  --z-backdrop: 800;
  --z-modal: 9000;
  --z-intro: 9999;
}

/* ── Брейкпоинты проекта (легенда) ──
   480px  — узкий мобильный (маленькие телефоны)
   768px  — мобильный/планшет, граница между «мобильной» и «десктопной» вёрсткой
   900px  — отдельные секции (About/Story), где раскладка ломается чуть раньше 1024
   1024px — планшет/малый десктоп
   Новые @media обязаны использовать одно из этих 4 значений, а не плодить пятое. */

/* ── Scrollbar ── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--bg-4);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #333;
}

/* ── Focus visible ── */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* ── Utility ── */
.hidden {
  display: none !important;
}

.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;
}

/* ── Skip-to-content ссылка ──
   Скрыта визуально, пока не получит фокус с клавиатуры (Tab) */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: var(--z-intro);
  background: var(--blue);
  color: #fff;
  padding: 12px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  transition: top var(--duration-base);
}

.skip-link:focus {
  top: 16px;
}

/* ── Уважение к prefers-reduced-motion ──
   Для людей с вестибулярными нарушениями отключаем анимации/переходы
   и плавный скролл почти полностью. См. также navigation.js —
   там же проверяется этот же media-query перед programmatic-скроллом. */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  html {
    scroll-behavior: auto;
  }
}