/* texture.css — фактура и глубина. Ровно то, чего у нас было 0 из 6 на всех сайтах.
 *
 * Разница между «слайд в презентации» и «сайт студии» на 80% состоит из этого:
 * зерно на плоскостях, свет вместо заливки, края, которые не просто обрезаны.
 * Всё чистым CSS, без картинок и без единого килобайта JS.
 *
 * Классы навешиваются точечно. Правило: фактура работает, пока её не замечают.
 * Если зерно видно как «шум» — переборщили, крути --grain-opacity вниз.
 */

/* ---------- 1. Зерно (film grain) ---------- */
/* SVG-турбулентность инлайном: ~250 байт, тянется на весь экран, не тайлится швами.
   Фиксированный слой поверх страницы — зерно не «плывёт» при скролле, как в кино. */
.grain::after,
.grain-fixed::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--grain-z, 1);
  opacity: var(--grain-opacity, 0.055);
  mix-blend-mode: var(--grain-blend, overlay);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grain { position: relative; isolation: isolate; }
.grain-fixed::after { position: fixed; z-index: 9999; }

/* Крупное «бумажное» зерно — для светлых editorial-макетов. */
.grain-paper::after {
  --grain-opacity: 0.09;
  --grain-blend: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.38' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23p)'/%3E%3C/svg%3E");
}

/* ---------- 2. Свет вместо заливки ---------- */
/* Тёмная сцена: не плоский #000, а подсвеченная точка. Это ключ к «кинематографично». */
.lit {
  position: relative;
  background:
    radial-gradient(120% 80% at var(--light-x, 50%) var(--light-y, -10%),
      color-mix(in oklch, var(--color-accent, #fff) 12%, transparent) 0%,
      transparent 60%),
    var(--color-bg, #0a0a0c);
}
/* Луч, ползущий за курсором. --mx/--my ставит JS одной строкой (см. kit-usage.md). */
.lit-cursor {
  background:
    radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%),
      color-mix(in oklch, var(--color-accent, #fff) 10%, transparent), transparent 70%),
    var(--color-bg, #0a0a0c);
}

/* Верхний блик у карточки — край ловит свет, как настоящая поверхность. */
.edge-lit {
  position: relative;
  background: var(--surface, color-mix(in oklch, var(--color-bg, #0a0a0c) 92%, white));
}
.edge-lit::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklch, white 45%, transparent), transparent);
}

/* ---------- 3. Виньетка ---------- */
.vignette::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 50%, transparent 55%, rgb(0 0 0 / var(--vignette, 0.35)));
}

/* ---------- 4. Края, которые не просто обрезаны ---------- */
/* Затухание вместо жёсткой границы — работает на списках, галереях, marquee. */
.fade-x { mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.fade-y { mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); }
.fade-b { mask-image: linear-gradient(180deg, #000 70%, transparent); }

/* Диагональный срез секции — ломает «стопку прямоугольников» без единой картинки. */
.slice-top { clip-path: polygon(0 var(--slice, 4vw), 100% 0, 100% 100%, 0 100%); }
.slice-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slice, 4vw)), 0 100%); }

/* ---------- 5. Разлиновка и техническая сетка ---------- */
/* Тонкая сетка под контентом: читается как чертёж, а не как «фон из шаблона». */
.grid-lines {
  background-image:
    linear-gradient(to right, var(--rule, color-mix(in oklch, currentColor 8%, transparent)) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule, color-mix(in oklch, currentColor 8%, transparent)) 1px, transparent 1px);
  background-size: var(--grid-size, 80px) var(--grid-size, 80px);
}
.rule-columns {
  background-image: repeating-linear-gradient(to right,
    var(--rule, color-mix(in oklch, currentColor 7%, transparent)) 0 1px,
    transparent 1px calc(100% / var(--cols, 12)));
}

/* ---------- 6. Стекло, которое не выглядит дёшево ---------- */
/* Разница с шаблонным glassmorphism: минимум прозрачности, есть край и зерно. */
.glass {
  background: color-mix(in oklch, var(--color-bg, #0a0a0c) 62%, transparent);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid color-mix(in oklch, white 10%, transparent);
}
@supports not (backdrop-filter: blur(1px)) {
  .glass { background: color-mix(in oklch, var(--color-bg, #0a0a0c) 92%, transparent); }
}

/* ---------- 7. Дуотон для фото ---------- */
/* Разнородные снимки сводятся в одну палитру — вместо «сборной солянки» кадров. */
.duotone {
  filter: grayscale(1) contrast(1.08);
  mix-blend-mode: luminosity;
}
.duotone-wrap {
  background: var(--color-accent, #f37021);
  isolation: isolate;
}

/* ---------- 8. Тени как система высот, а не как «тень на всём» ---------- */
/* Две тени на уровень: контактная (жёсткая, близкая) + рассеянная (мягкая, далёкая).
   Это то, чем настоящая глубина отличается от box-shadow: 0 2px 10px rgba(0,0,0,.06). */
:root {
  --elev-1:
    0 1px 2px -1px color-mix(in oklch, var(--shadow-color, #000) 22%, transparent),
    0 2px 8px -4px color-mix(in oklch, var(--shadow-color, #000) 16%, transparent);
  --elev-2:
    0 2px 4px -2px color-mix(in oklch, var(--shadow-color, #000) 25%, transparent),
    0 12px 28px -12px color-mix(in oklch, var(--shadow-color, #000) 28%, transparent);
  --elev-3:
    0 4px 8px -4px color-mix(in oklch, var(--shadow-color, #000) 28%, transparent),
    0 32px 64px -24px color-mix(in oklch, var(--shadow-color, #000) 35%, transparent);
}

/* ---------- 9. Печатные детали ---------- */
/* Номера секций, метки, шильдики — дешёвый способ добавить «спроектированность». */
.tag-num::before {
  content: attr(data-num);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.72em;
  letter-spacing: 0.08em;
  opacity: 0.55;
  margin-right: 0.9em;
}
.label-caps {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: clamp(0.66rem, 0.62rem + 0.2vw, 0.78rem);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.65;
}
.hairline { border: 0; height: 1px; background: color-mix(in oklch, currentColor 14%, transparent); }