/* Casinoay Child — фоновая графика на странице провайдера.
 *
 * Вырезанная фигура из игр студии: полоса справа во всю высоту окна,
 * зафиксированная при прокрутке. Слой уведён на z-index -1 — рисуется поверх
 * фона body, но под содержимым, поэтому текст читается поверх графики.
 *
 * Текстовая колонка занимает почти всю ширину, так что фигура неизбежно
 * заходит под текст — это и было задумано. Читаемость держится прозрачностью.
 */

.prov-art {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: clamp(420px, 46vw, 780px);
    z-index: -1;
    pointer-events: none;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.prov-art__game {
    inline-size: 100%;

    /* Почти во всю высоту окна: фигура должна читаться как фигура, а не как
       значок в углу. Ограничение по полосе высотой в треть экрана пробовалось
       и не годится — картинки выходят мелкими и подрезанными. */
    block-size: min(84vh, 800px);

    /* Нижний край уходит за границу экрана: если срез виден, фигура выглядит
       обрубленной по прямой линии. */
    margin-block-end: -6vh;

    background-image: var(--game);
    background-repeat: no-repeat;
    background-size: contain;
    /* Прижимаем к правому нижнему углу рамки, иначе при вписывании картинка
       центрируется по высоте и между её низом и краем экрана остаётся щель. */
    background-position: right bottom;

    opacity: 0.5;

    /* Мягкий край по кругу. Середина остаётся плотной — там лицо, и линейный
       градиент слева его съедал. Растворяется внешняя кромка: и там, где
       фигуру подрезает рамка, и там, где она наезжает на колонку текста. */
    -webkit-mask-image: radial-gradient(ellipse 96% 92% at 54% 44%, #000 56%, transparent 100%);
            mask-image: radial-gradient(ellipse 96% 92% at 54% 44%, #000 56%, transparent 100%);
}

/* В светлой теме та же картинка выглядит навязчивее: она сама тёмная и
   плотная, а фон вокруг светлый. */
:root:not([data-theme="dark"]) .prov-art__game { opacity: 0.32; }
[data-theme="light"] .prov-art__game { opacity: 0.32; }

/* Фоновый узор и графика — два слоя друг под другом. Под графикой узор
   приглушаем, иначе рябит. */
body.prov-art-on::before { opacity: calc(var(--ghost-opacity) * 0.6); }

/* Ниже этой ширины полосы справа нет: фигура легла бы прямо в середину
   колонки текста. */
@media (max-width: 1279px) {
    .prov-art { display: none; }
    body.prov-art-on::before { opacity: var(--ghost-opacity); }
}

/* Украшение. Тем, кто просил меньше отвлекающего, оно ни к чему. */
@media (prefers-reduced-motion: reduce) {
    .prov-art { opacity: 0.6; }
}