/* НЕСПАЛЕНЕ. — базовые стили: сброс, типографика, поверхности, доступность. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--archive-black);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  min-height: 100vh;
  background: var(--archive-black);
  color: var(--light-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
  height: auto;
}

/* :where() — нулевая специфичность, чтобы компонентные отступы списков всегда побеждали */
:where(ul, ol)[role="list"] {
  list-style: none;
  padding: 0;
}

h1,
h2,
h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: var(--lh-tight);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

/* ---------- Поверхности ---------- */

.surface-dark {
  --focus-ring: var(--old-paper);
  --text-muted: var(--muted-sand);
  background: var(--archive-black);
  color: var(--light-ink);
}

.surface-ivory {
  --focus-ring: var(--seal-red);
  --text-muted: var(--ink-muted);
  background: var(--ivory);
  color: var(--ink);
}

.surface-paper {
  --focus-ring: var(--seal-red);
  --text-muted: var(--ink-muted);
  background: var(--old-paper);
  color: var(--ink);
}

/* ---------- Доступность ---------- */

:focus-visible {
  outline: 2px solid var(--focus-ring, var(--old-paper));
  outline-offset: 3px;
  border-radius: var(--radius-s);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.nowrap {
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--old-paper);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* ---------- Раскладка ---------- */

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Движение: вход элементов ----------
   Только CSS: контент виден без JS. При reduced-motion анимации гасятся. */

.reveal {
  animation: reveal-rise var(--dur-enter) var(--ease-out) both;
  animation-delay: var(--d, 0ms);
}

.reveal--slow {
  animation-name: reveal-fade;
  animation-duration: var(--dur-enter-slow);
}

@keyframes reveal-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@keyframes reveal-fade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* ---------- Движение: появление блоков при прокрутке (Фаза 5) ----------
   Чистый CSS, scroll-driven animations. Где браузер их не поддерживает (Firefox, старый Safari) —
   блоки просто видны сразу. JS ничего не прячет: без JS и без анимаций сайт полностью читаем.
   Анимируется свойство translate (не transform), чтобы не конфликтовать с hover-эффектами карточек. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    :is(
      .section-head,
      .tl-item,
      .catalog__grid > li,
      .stat,
      .about-block,
      .case-key,
      .case-figures,
      .case-section,
      .case-fact,
      .case-quote,
      .person,
      .case-nav__grid > *
    ) {
      animation: scroll-reveal linear both;
      animation-timeline: view();
      /* Полностью виден, когда верх блока поднялся на 6rem над нижним краем экрана */
      animation-range: entry 0% entry 6rem;
    }
  }
}

@keyframes scroll-reveal {
  from {
    opacity: 0;
    translate: 0 1rem;
  }
}

/* ---------- Движение: мягкая смена страниц ----------
   Cross-document View Transitions: плавное растворение при переходе между справами.
   Не поддерживается — обычный переход. При reduced-motion отключено. */

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
}

/* ---------- Печать: никаких анимаций, всё видно ---------- */

@media print {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .read-progress,
  .skip-link {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}