/* ==========================================================================
   ПЕРЕПЛЁТ · Base: шрифты, reset, типографика, секции, текстуры, утилиты
   ========================================================================== */

/* ---------- Шрифты ---------- */
/* Fatal — купленный дисплейный шрифт. Oswald остаётся запасным. */
@font-face {
  font-family: "Fatal";
  src: url("../assets/fonts/fatal-trial-bold.woff2") format("woff2"), url("../assets/fonts/fatal-trial-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* HTC Hand — файла нет, мёртвую @font-face не держим. Рукописный fallback — Caveat. */
@font-face {
  font-family: "Oswald";
  src: url("../assets/fonts/oswald-cyrillic-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Oswald";
  src: url("../assets/fonts/oswald-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fira Code";
  src: url("../assets/fonts/fira-code-cyrillic-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Fira Code";
  src: url("../assets/fonts/fira-code-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fira Code";
  src: url("../assets/fonts/fira-code-cyrillic-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Fira Code";
  src: url("../assets/fonts/fira-code-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Caveat";
  src: url("../assets/fonts/caveat-cyrillic-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Caveat";
  src: url("../assets/fonts/caveat-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure { margin: 0; }
address { font-style: normal; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--yellow-400); color: var(--ink-900); }

/* ---------- Типографика ---------- */
.display, h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-display);
  text-transform: uppercase;
  letter-spacing: var(--ls-display-lg);
  /* Ни balance, ни pretty: оба алгоритма укорачивают строки, чтобы «красиво»
     разложить хвост. В Safari из-за pretty заголовки не доходили до правого края
     (замечание 09.09). Нужен обычный жадный перенос — строка заполняется до конца. */
  text-wrap: wrap;
  overflow-wrap: break-word;
}
h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); letter-spacing: var(--ls-display-md); }
/* H4 — Fatal-капс, как в макете. ВАЖНО: в Fatal нет строчных букв (строчные коды
   указывают на те же глифы), поэтому «убрать капс» = сменить шрифт. Там, где капс
   мешал (шаги, ведущие), заголовок переведён на Fira Code — см. .step__title, .host. */
h4, .h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-display-sm);
  text-transform: uppercase;
}
/* Заголовок без капса — на моношрифте (Fatal строчных не имеет) */
.h-plain {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: var(--lh-title-mono);
  letter-spacing: 0.01em;
  text-transform: none;
}
.lead { font-size: var(--fs-lead); line-height: var(--lh-body); max-width: 62ch; }
.small { font-size: var(--fs-small); }
.caption { font-size: var(--fs-caption); line-height: var(--lh-caption); }
.muted { color: var(--fg-muted); }
.caps { text-transform: uppercase; letter-spacing: var(--ls-caps); }
.kicker {
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--fg-muted);
}
.hand { font-family: var(--font-hand); font-size: 1.35em; line-height: var(--lh-hand); }
.nowrap { white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }
/* Висячая кавычка: « выносится влево, первая буква совпадает с левым краем набора. */
.hang-quote-mark { display: inline; }

/* ---------- Layout ---------- */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}
.container--wide { width: min(100% - 2 * var(--gutter), 1320px); }

.section {
  position: relative;
  padding-block: var(--section-y);
}
.section--tight { padding-block: var(--section-y-sm); }
.section__head { max-width: none; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section__head .lead { margin-top: 1.25rem; }
.section__foot { margin-top: clamp(2rem, 5vw, 3.5rem); }

/* Темы секций: тёмный ритм / бумага */
.theme-dark     { background: var(--ink-900); color: var(--fg); }
.theme-dark-alt { background: var(--ink-800); color: var(--fg); }
.theme-black    { background: var(--ink-950); color: var(--fg); }
/* Светлые секции тоже на бумаге, а не на плоской заливке (решение 10.09) */
.theme-paper    { background-color: var(--paper-100); background-image: var(--paper-texture); background-size: 180px 180px; color: var(--paper-fg); }
.theme-warm     { background-color: var(--paper-300); background-image: var(--paper-texture); background-size: 180px 180px; color: var(--paper-fg); }

.theme-paper .kicker, .theme-warm .kicker { color: var(--paper-fg-muted); }
.theme-paper .muted, .theme-warm .muted { color: var(--paper-fg-muted); }

/* ---------- Текстуры ---------- */
/* Зерно бумаги/картона — SVG-шум, без внешних файлов */
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.theme-dark.grain::before, .theme-dark-alt.grain::before, .theme-black.grain::before {
  mix-blend-mode: screen;
  opacity: 0.35;
}
.grain > * { position: relative; z-index: 1; }

/* Лёгкий виньет по краям тёмных секций — глубина без картинок */
.vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%, transparent 60%, rgba(0, 0, 0, 0.35) 100%);
}

/* ---------- Reveal-анимации (управляются из app.js через IntersectionObserver) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0ms) * var(--anim-k, 1));
}
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="drop"]  { transform: translateY(-40px) scale(1.15); }
[data-reveal].is-in   { opacity: 1; transform: none; }

/* Stagger для детей: data-stagger на родителе */
[data-stagger] > * { --reveal-delay: calc(var(--i, 0) * 180ms); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- Утилиты ---------- */
.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;
}
.stack > * + * { margin-top: var(--stack, 1rem); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--cluster, 1rem); align-items: center; }
.grid { display: grid; gap: var(--grid-gap, 1.5rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}
.hide-mobile { display: initial; }
.show-mobile { display: none; }
@media (max-width: 900px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: initial; }
}