/* Живой дизайн — общая основа плавности и типографики.
   Подключать первым, цвета и шрифты проекта — поверх через переменные. */

:root {
  /* Движение: короткое на нажатие, подольше на появление. Кривые без «резинки». */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 140ms;
  --t-base: 220ms;
  --t-slow: 420ms;

  /* Ритм отступов — шаг 4px, крупные блоки дышат. */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px;
  --radius: 10px;
  --radius-sm: 6px;

  /* Типографика: размеры плавно растут с экраном. */
  --fs-sm: .875rem;
  --fs-base: clamp(1rem, .96rem + .2vw, 1.0625rem);
  --fs-lg: clamp(1.125rem, 1.05rem + .4vw, 1.3rem);
  --fs-xl: clamp(1.5rem, 1.25rem + 1.2vw, 2.1rem);
  --fs-2xl: clamp(2rem, 1.5rem + 2.6vw, 3.4rem);
  --measure: 66ch;
}

html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body { font-size: var(--fs-base); line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; }
p, li { text-wrap: pretty; max-width: var(--measure); }
img, video { max-width: 100%; height: auto; }
:where(a, button, [role=button], input, select, textarea, summary) { -webkit-tap-highlight-color: transparent; }

/* Отклик на нажатие — то, что отличает живой интерфейс от картинки. */
:where(button, .btn, [role=button], a.card, .chip) {
  transition: transform var(--t-fast) var(--ease-out), background-color var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), opacity var(--t-base);
}
:where(button, .btn, [role=button], .chip):active { transform: scale(.97); }
:where(a.card, .card-link):active { transform: scale(.99); }
:where(a) { transition: color var(--t-base) var(--ease-out), text-decoration-color var(--t-base); }
:where(input, select, textarea) { transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out); }

:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: var(--radius-sm); }

/* Появление при прокрутке: класс .reveal, zhivoy.js добавляет .is-in. Без JS всё видно. */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); transition-delay: var(--d, 0ms); }

/* Появление нового элемента списка / окна */
@keyframes z-in { from { opacity: 0; transform: translateY(6px) scale(.99); } }
.z-in { animation: z-in var(--t-base) var(--ease-out) both; }
@keyframes z-fade { from { opacity: 0; } }
.z-fade { animation: z-fade var(--t-base) var(--ease-out) both; }

/* Скелет вместо пустоты при загрузке */
.skeleton { background: linear-gradient(90deg, rgba(0,0,0,.05) 0 40%, rgba(0,0,0,.09) 50%, rgba(0,0,0,.05) 60% 100%) 0 0 / 300% 100%;
  animation: z-shimmer 1.4s linear infinite; border-radius: var(--radius-sm); color: transparent; }
@keyframes z-shimmer { to { background-position: -150% 0; } }

/* Переходы между страницами (Chrome/Edge/Safari 18) — плавная смена без мигания. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--t-base); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}