/* ============================================================================
   base.css — ФУНДАМЕНТ (СЛОЙ 1)
   ----------------------------------------------------------------------------
   Подключается первым. Здесь: дизайн-токены (:root), сброс, базовая
   типографика, механизм языка RU/EN и классы reveal (появление при скролле).
   Цвета/шрифты/метрики задаются ТОЛЬКО здесь — в других файлах var(--имя).
   Значения перенесены 1-в-1 из эталона index.html.
   ============================================================================ */

/* ── ЛОКАЛЬНЫЕ ШРИФТЫ (самохостинг) ──────────────────────────────────────────
   Шрифты подключаются из папки assets/fonts/ — без зависимости от Google Fonts
   (надёжно в РФ, грузятся с того же домена, что и сайт). Файлы .woff2 нужно
   положить по путям ниже (см. assets/fonts/README.txt). Inter — текст,
   Onest — заголовки и логотип. Оба под лицензией SIL OFL (свободно).
   font-display: swap — пока шрифт грузится, показывается системный fallback. */

/* Inter — 300 / 400 / 500 / 600 */
@font-face{ font-family:"Inter"; font-style:normal; font-weight:300; font-display:swap;
  src:url("../fonts/inter-300.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/inter-400.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/inter-500.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/inter-600.woff2") format("woff2"); }

/* Onest — 300 / 400 / 500 / 600 (заголовки и логотип; кириллица+латиница) */
@font-face{ font-family:"Onest"; font-style:normal; font-weight:300; font-display:swap;
  src:url("../fonts/onest-300.woff2") format("woff2"); }
@font-face{ font-family:"Onest"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/onest-400.woff2") format("woff2"); }
@font-face{ font-family:"Onest"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/onest-500.woff2") format("woff2"); }
@font-face{ font-family:"Onest"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/onest-600.woff2") format("woff2"); }


:root{
  /* ── Цвета ───────────────────────────────────────────────────────────── */
  --bg:        #ffffff;   /* основной фон страницы            */
  --surface:   #f2f1ee;   /* тёплый беж — фон секций          */
  --surface-2: #e8e6e1;   /* беж темнее (доп. секции, аватары)*/
  --surface-3: #e3e0d9;   /* беж для градиентов              */
  --surface-4: #eae8e3;   /* hover маркетплейс-карточки       */
  --ink:       #1a1a1a;   /* основной текст                  */
  --dark:      #111110;   /* тёмные секции и футер            */
  --gold:      #c8a84b;   /* звёзды рейтинга                 */

  /* Бренды маркетплейсов */
  --wb: #CB11AB;  --oz: #005BFF;  --ym: #FC3F1D;

  /* Линии */
  --line:      rgba(0,0,0,0.07);
  --line-soft: rgba(0,0,0,0.05);

  /* ── Шрифты ──────────────────────────────────────────────────────────── */
  --font-text:    "Inter", sans-serif;
  --font-display: "Onest", "Inter", sans-serif;

  /* ── Метрики раскладки ───────────────────────────────────────────────── */
  --nav-h:       62px;
  --maxw:        1520px;   /* широкие секции            */
  --maxw-narrow: 1280px;   /* узкие секции (футер, feature) */

  /* ── Типографическая шкала (мелкий ярус) ─────────────────────────────────
     Единый набор ступеней для текста ≤22px, чтобы размеры были системными,
     а не случайными. Крупные заголовки — на clamp() в pages.css. (v1.28) */
  --fs-2xs: 10px;  /* микро-подписи: eyebrow, теги, лейблы   */
  --fs-xs:  11px;  /* капс-подписи, кнопки-ссылки            */
  --fs-sm:  12px;  /* мелкий текст, счётчики                 */
  --fs-md:  13px;  /* основной мелкий текст, футер           */
  --fs-base:14px;  /* спецификации, рейтинг                  */
  --fs-lg:  15px;  /* lead-текст, подзаголовки              */
  --fs-xl:  17px;  /* имена/заголовки карточек              */
}

/* ── RESET ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-text); background: var(--bg); color: var(--ink); overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

/* ── ВЫДЕЛЕНИЕ ТЕКСТА (брендовое золото) ────────────────────────────────────
   Фирменный цвет выделения вместо системного синего. Чистое добавление —
   на вёрстку и логику не влияет. (Сборка v1.24) */
::selection { background: var(--gold); color: #fff; }
::-moz-selection { background: var(--gold); color: #fff; }

/* ── ВИДИМЫЙ FOCUS-RING (доступность с клавиатуры) ──────────────────────────
   :focus-visible срабатывает только при навигации с клавиатуры (Tab) и не
   меняет вид при кликах мышью. Контур в акцентном цвете с мягким отступом.
   (Сборка v1.24) */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── ПЛАВНОЕ ПРОЯВЛЕНИЕ ФОТО (fade-in, CSS-only) ────────────────────────────
   Узкий именованный класс .img-fade — НЕ глобальный селектор img, чтобы не
   задеть существующие opacity-переходы (меню, cta-link, qr). Изображение
   слегка проявляется; без JS остаётся видимым (анимация лишь сглаживает
   первичную отрисовку). (Сборка v1.24) */
@keyframes acFadeIn { from { opacity: 0; } to { opacity: 1; } }
.img-fade { animation: acFadeIn 0.6s ease both; }
/* Точечное применение к фото, которые грузятся lazy и «выскакивают» при
   скролле: карточки товаров, features, миниатюры отзывов. Hero и «О бренде»
   намеренно исключены — у них свои transition/object-fit. */
.prod-cell picture img,
.cat-card-img picture img,
.feature-visual picture img,
.rev-thumb { animation: acFadeIn 0.6s ease both; }

/* ── ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА RU / EN ────────────────────────────────────────────
   Оба языка лежат рядом в .ru / .en. По умолчанию виден русский. Класс
   body.lang-en (его ставит common.js) прячет .ru и показывает .en. Без
   перезагрузки. Варианты -b — то же для блочных элементов. */
.ru{ display:inline !important; } .en{ display:none !important; }
body.lang-en .ru{ display:none !important; } body.lang-en .en{ display:inline !important; }
.ru-b{ display:block; } .en-b{ display:none; }
body.lang-en .ru-b{ display:none; } body.lang-en .en-b{ display:block; }

/* ── REVEAL: появление блоков при прокрутке ─────────────────────────────────
   Элементы .reveal изначально прозрачны и смещены; common.js добавляет .shown
   при попадании во вьюпорт. Задержки d1..d4 для каскадного появления. */
.reveal { opacity: 0; transition: opacity 0.9s ease, transform 0.9s ease; }
.reveal.from-bottom { transform: translateY(28px); }
.reveal.from-left   { transform: translateX(-28px); }
.reveal.from-right  { transform: translateX(28px); }
.reveal.shown { opacity: 1; transform: none; }
.d1{ transition-delay:.12s } .d2{ transition-delay:.24s }
.d3{ transition-delay:.36s } .d4{ transition-delay:.48s }

/* ── СКВОЗНОЕ «ОТСТУПЛЕНИЕ» БЛОКОВ ПРИ СКРОЛЛЕ ──────────────────────────────
   Крупные блоки помечаются .depart. При уходе вверх за экран блок слегка
   уменьшается и гаснет («отступает вглубь»), при входе снизу — мягко подаётся
   вперёд. Значения scale/opacity выставляет common.js на каждом кадре (rAF)
   через CSS-переменные. transform-origin сверху, чтобы блок «оседал» к своему
   верху, а не плыл к центру. Только transform/opacity — layout не трогается,
   размеры зарезервированы (v1.26). Амплитуда мягкая — тише hero. (Сборка v1.35) */
.depart { transform: scale(var(--dp-scale, 1)); opacity: var(--dp-opacity, 1); transform-origin: center var(--dp-origin, top); will-change: transform, opacity; }

/* ── УВАЖЕНИЕ К ПОЛЬЗОВАТЕЛЮ: prefers-reduced-motion ────────────────────────
   Если пользователь попросил уменьшить движение (системная настройка),
   убираем все анимации и переходы: контент показывается сразу, без сдвигов.
   Особо: .reveal делаем сразу видимым (иначе остался бы opacity:0, т.к. его
   проявляет JS-класс .shown), а Ken Burns hero — статичным. (Сборка v1.31) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero-content > * { opacity: 1 !important; transform: none !important; }
  .depart { transform: none !important; opacity: 1 !important; }
}