/* ============================================================
   DESIGN-TOKENS — визуальный язык: глубина, форма, движение.
   Пара к core.css (типографика/отступы). Правила — в DESIGN.md.
   Цвет тени задаётся через --shadow-tint под палитру проекта.
   ============================================================ */

:root {
  /* --- Семейство радиусов: максимум 3 связанных значения --- */
  --r-s: 8px;    /* инпуты, кнопки, чипы */
  --r-m: 16px;   /* карточки */
  --r-l: 24px;   /* модалки, hero-подложки */

  /* --- Глубина: один источник света (сверху), 3 уровня, тонированная тень --- */
  --shadow-tint: 20, 20, 30;            /* R,G,B — заменить на тёмный оттенок бренда */
  --elev-1: 0 1px 3px rgba(var(--shadow-tint), 0.08);                                  /* лежит */
  --elev-2: 0 8px 24px rgba(var(--shadow-tint), 0.10);                                 /* карточка */
  --elev-3: 0 20px 50px rgba(var(--shadow-tint), 0.16), 0 4px 12px rgba(var(--shadow-tint), 0.08); /* парит: дропдаун, модалка */

  /* --- Движение --- */
  --dur-micro: 150ms;   /* hover, нажатия */
  --dur-enter: 250ms;   /* появление элементов */
  --dur-hero: 500ms;    /* крупные переходы */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* --- Слои поверх фото (текст должен читаться в самой светлой точке) --- */
  --scrim: rgba(10, 10, 14, 0.42);
  --scrim-grad: linear-gradient(to top, rgba(10,10,14,0.55), rgba(10,10,14,0) 60%);
}

/* Видимый фокус — обязательное состояние любого интерактива */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Hover-подъём без сдвига layout */
.lift {
  transition: transform var(--dur-micro) var(--ease-out),
              box-shadow var(--dur-micro) var(--ease-out);
}
.lift:hover { transform: translateY(-4px); box-shadow: var(--elev-2); }

/* Появление с каскадом (навесить .in скриптом; шаг задержки 60ms, ≤ 6 участников) */
/* появление: плавный выезд, движением управляет JS по прокрутке */
.reveal { opacity: 0; transform: translateY(48px); will-change: opacity, transform; }
.reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--reveal-i, 0) * 140ms);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}