/* =====================================================================
zvk-texture.css — фоновая текстура «Знание в Код» вместо сетки-клетки (27.10.2026)
Рисунок: бесшовная плитка 640×640 — топографические изолинии мятного цвета
+ лёгкое зерно (feTurbulence). Один background-image (inline SVG, data-URI),
без анимации и внешних файлов; к краям растворяется маской.
Как применять (на секцию, не на псевдоэлемент):
— светлые блоки (#fff / #f8f9fc)
— тёмные блоки (#0a0a0a)
Класс сам ставит секции position:relative + isolation:isolate и рисует
текстуру в ::before (z-index:-1, pointer-events:none) — под контентом,
над фоном секции. Если ::before секции уже занят — .zvk-tex--after
(текстура уходит в ::after). У секции position:absolute/fixed/sticky
свои правила сохраняются — их задавать после этого файла.
Настройка на месте (custom properties на той же секции):
--zvk-tex-mask — где рисунок виден (по умолчанию пятно справа сверху);
--zvk-tex-opacity — общая сила (1 по умолчанию);
--zvk-tex-size — масштаб плитки (640px).
===================================================================== */
.zvk-tex, .zvk-tex--dark { position: relative; isolation: isolate; }
.zvk-tex::before, .zvk-tex--dark::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
background-image: var(--zvk-tex-img); background-repeat: repeat; background-size: var(--zvk-tex-size, 640px) auto; background-position: 50% 0;
opacity: var(--zvk-tex-opacity, 1);
-webkit-mask-image: var(--zvk-tex-mask, radial-gradient(ellipse 75% 85% at 78% 22%, #000 18%, transparent 78%));
mask-image: var(--zvk-tex-mask, radial-gradient(ellipse 75% 85% at 78% 22%, #000 18%, transparent 78%));
}
.zvk-tex--after::before { content: none; }
.zvk-tex--after::after {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
background-image: var(--zvk-tex-img); background-repeat: repeat; background-size: var(--zvk-tex-size, 640px) auto; background-position: 50% 0;
opacity: var(--zvk-tex-opacity, 1);
-webkit-mask-image: var(--zvk-tex-mask, radial-gradient(ellipse 75% 85% at 78% 22%, #000 18%, transparent 78%));
mask-image: var(--zvk-tex-mask, radial-gradient(ellipse 75% 85% at 78% 22%, #000 18%, transparent 78%));
}
.zvk-tex { --zvk-tex-img: url("data:image/svg+xml,"); }
.zvk-tex--dark { --zvk-tex-img: url("data:image/svg+xml,"); }
@media print { .zvk-tex::before, .zvk-tex--dark::before, .zvk-tex--after::after { display: none; } }