/* Кастомный курсор: пятно со шлейфом (js/site-cursor.js) */
.site-cursor {
    --site-cursor-color: rgb(143, 198, 38);
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 2147483000;
    opacity: 0;
    transition: opacity .3s ease;
}

.site-cursor.is-visible {
    opacity: 1;
}

/* Над зелёными блоками (GREEN_SELECTOR в js/site-cursor.js) зелёное пятно сливается с фоном */
.site-cursor.is-on-green {
    --site-cursor-color: var(--color-blck);
}

.site-cursor__box {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    will-change: transform;
}

.site-cursor__ball {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: opacity .3s cubic-bezier(.77, 0, .175, 1),
                width .3s cubic-bezier(.77, 0, .175, 1),
                height .3s cubic-bezier(.77, 0, .175, 1),
                background-color .3s ease;
}

.site-cursor__ball--fill {
    background-color: var(--site-cursor-color);
}

.site-cursor__ball--big { width: 40px; height: 40px; }
.site-cursor__ball--medium { width: 28px; height: 28px; }
.site-cursor__ball--small { width: 20px; height: 20px; }

/* Круг-инвертор: над ссылками и кнопками пятно сжимается и инвертирует фон под собой */
.site-cursor__ball--invert {
    width: 40px;
    height: 40px;
    background-color: transparent;
    -webkit-backdrop-filter: invert(1) hue-rotate(180deg);
    backdrop-filter: invert(1) hue-rotate(180deg);
    opacity: 0;
}

/* Фолбэк для браузеров без backdrop-filter */
@supports not ((backdrop-filter: invert(1)) or (-webkit-backdrop-filter: invert(1))) {
    .site-cursor__ball--invert {
        background-color: #fff;
        mix-blend-mode: difference;
    }
}

.site-cursor.is-hover .site-cursor__ball--fill {
    opacity: 0;
}

.site-cursor.is-hover .site-cursor__ball--invert {
    width: 22px;
    height: 22px;
    opacity: 1;
}

/* Кликабельная карточка ([data-href]): большой круг-инвертор с лупой */
.site-cursor.is-zoom .site-cursor__ball--fill {
    opacity: 0;
}

.site-cursor.is-zoom .site-cursor__ball--invert {
    width: 72px;
    height: 72px;
    opacity: 1;
}

.site-cursor__icon {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 24px;
    height: 24px;
    /* Белая лупа с тёмным контуром-тенью читается на любом участке фото */
    filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .7)) drop-shadow(0 1px 4px rgba(0, 0, 0, .35));
    opacity: 0;
    transform: translate(-50%, -50%) scale(.4);
    transition: opacity .25s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}

.site-cursor.is-zoom .site-cursor__icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Обложка видео ([data-cursor="play"]): круг ещё крупнее, вместо лупы — «плей».
   У «плея» тот же базовый класс .site-cursor__icon — над обычными фото (лупа) его явно прячем */
.site-cursor__icon--play {
    width: 28px;
    height: 28px;
}

.site-cursor.is-zoom:not(.is-play) .site-cursor__icon--play {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.4);
}

.site-cursor.is-play .site-cursor__ball--invert {
    width: 96px;
    height: 96px;
}

.site-cursor.is-play .site-cursor__icon {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.4);
}

.site-cursor.is-play .site-cursor__icon--play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.site-cursor.is-pressed.is-zoom .site-cursor__ball--invert { width: 60px; height: 60px; }
.site-cursor.is-pressed.is-play .site-cursor__ball--invert { width: 80px; height: 80px; }

.site-cursor.is-pressed .site-cursor__ball--big { width: 32px; height: 32px; }
.site-cursor.is-pressed .site-cursor__ball--invert { width: 16px; height: 16px; }

/* Скрываем системный курсор, кроме полей ввода и админ-панели Битрикса */
html.has-site-cursor,
html.has-site-cursor * {
    cursor: none !important;
}

html.has-site-cursor input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]),
html.has-site-cursor textarea,
html.has-site-cursor select,
html.has-site-cursor [contenteditable="true"] {
    cursor: text !important;
}

html.has-site-cursor select,
html.has-site-cursor input[type="range"] {
    cursor: pointer !important;
}

html.has-site-cursor #bx-panel,
html.has-site-cursor #bx-panel * {
    cursor: auto !important;
}

/* Зоны с обычным курсором (data-cursor="native"), например 3D-конфигураторы: пятно скрыто скриптом,
   системный курсор возвращаем — стрелка, «рука» на кнопках, «захват» на 3D-сцене */
html.has-site-cursor [data-cursor="native"],
html.has-site-cursor [data-cursor="native"] * {
    cursor: auto !important;
}

html.has-site-cursor [data-cursor="native"] :is(a, button, [role="button"], label, input[type="range"]) {
    cursor: pointer !important;
}

/* Вложенные span/svg в ссылках и кнопках — тоже «рука», а не стрелка/курсор выделения */
html.has-site-cursor [data-cursor="native"] :is(a, button, [role="button"], label) * {
    cursor: inherit !important;
}

html.has-site-cursor [data-cursor="native"] :is(button:disabled, [aria-disabled="true"]) {
    cursor: default !important;
}

html.has-site-cursor [data-cursor="native"] canvas {
    cursor: grab !important;
}

html.has-site-cursor [data-cursor="native"] canvas:active {
    cursor: grabbing !important;
}

html.has-site-cursor.site-cursor-native .site-cursor {
    opacity: 0;
}