/* Casinoay Child — фоновый узор («ghost pattern») по разделам сайта.
 *
 * Узор лежит на фоне страницы и виден там, где просвечивает --bg: между
 * блоками, по полям, под шапкой. Содержимое его перекрывает, потому что
 * псевдоэлемент уходит на z-index -1 — он рисуется поверх фона body, но под
 * его содержимым.
 *
 * Один файл на раздел, цвет задаётся не в самом SVG, а маской: плитка
 * работает вырезом, а заливку берёт из --ghost-ink. Поэтому в тёмной теме
 * узор светлый, в светлой — тёмный, и второй комплект файлов не нужен.
 *
 * Токены объявлены здесь, а не в tokens.css: это параметры одной декорации,
 * а не часть общей палитры.
 */

:root {
    --ghost-ink:     #0C2446;   /* тёмно-синий по светлому фону */
    --ghost-opacity: 0.05;
    /* Плитка размером с экран. Слой зафиксирован и не прокручивается, поэтому
       в кадр попадает одна плитка и повтора не видно вовсе. Значения обязаны
       совпадать с viewBox файлов — иначе элементы поедут в размере. */
    --ghost-w: 1600px;
    --ghost-h: 1000px;
}

[data-theme="dark"] {
    --ghost-ink:     #EAEEFA;   /* светлый по тёмному */
    --ghost-opacity: 0.045;
}

body[class*="ghost-"]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: var(--ghost-ink);
    opacity: var(--ghost-opacity);
    -webkit-mask-image: var(--ghost-src);
            mask-image: var(--ghost-src);
    -webkit-mask-repeat: repeat;
            mask-repeat: repeat;
    -webkit-mask-size: var(--ghost-w) var(--ghost-h);
            mask-size: var(--ghost-w) var(--ghost-h);
}

/* Пути относительны этого файла: assets/css/components → assets/img/ghost. */
body.ghost-casino    { --ghost-src: url(../../img/ghost/casino.svg); }
body.ghost-sports    { --ghost-src: url(../../img/ghost/sports.svg); }
body.ghost-payments  { --ghost-src: url(../../img/ghost/payments.svg); }
body.ghost-bonuses   { --ghost-src: url(../../img/ghost/bonuses.svg); }
body.ghost-blog      { --ghost-src: url(../../img/ghost/blog.svg); }
body.ghost-providers { --ghost-src: url(../../img/ghost/providers.svg); }

/* Отдельного правила для телефона нет намеренно. Масштабировать плитку нельзя:
   вместе с ней мельчает сам элемент. На узком экране просто виден её угол —
   элементы разбросаны равномерно, поэтому угол ничем не хуже середины. */

/* Узор — украшение. Тем, кто просил уменьшить движение и отвлекающие эффекты,
   он не нужен. */
@media (prefers-reduced-motion: reduce) {
    body[class*="ghost-"]::before { opacity: calc(var(--ghost-opacity) / 2); }
}