/* ============================================================
   ГЛАВНАЯ: диск с обложкой игры в hero-слайдере (вместо .main__hero-slider_image)

   Подключается только на index.php:
     <link rel="stylesheet" href="/assets/css/hero-disc.css?v=1">
     <script src="/assets/js/hero-disc.js?v=1"></script>

   Что делает: справа в слайде вместо картинки игры ставится круглый диск
   с той же картинкой (обложкой). Диск медленно вращается сам и доворачивается
   на 360° при смене слайда (переменную --hd-progress ставит hero-disc.js).

   Размеры подогнаны под .main__hero-swiper из main.css:
     1042x500 → 792x380 → 690x343 → 100%x353 → 100%x531 (телефон)
   ============================================================ */

/* Текст на слайде не должен заезжать под диск: сужаем колонку.
   Класс main__hero-slider--disc есть только у слайдов главной. */
.main__hero-slider--disc .main__hero-content {
    padding-right: 440px;
}

/* Невидимая подложка с описанием окружности для надписи на диске
   (одна на всю страницу, лежит в index.php перед блоком .main__hero) */
.hd-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ---------- Диск ---------- */

.hd-disc {
    position: absolute;
    z-index: 10;
    top: 50%;
    right: 22px;
    width: 400px;
    height: 400px;
    margin-top: -200px;
    perspective: 1400px;
    pointer-events: none;
}

/* Тень под диском: не вращается вместе с ним */
.hd-disc__shadow {
    position: absolute;
    left: 50%;
    bottom: -26px;
    width: 78%;
    height: 48px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 72%);
    filter: blur(7px);
}

/* Наклон в перспективе + поворот на 360° при смене слайда */
.hd-disc__tilt {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: rotateX(16deg) rotateY(-18deg) rotate(calc(var(--hd-progress, 0) * -360deg));
    transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Медленное собственное вращение диска */
.hd-disc__spin {
    position: absolute;
    inset: 0;
    animation: hd-idle-spin 30s linear infinite;
}

@keyframes hd-idle-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Обложка игры */
.hd-disc__cover {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    background: #0f110f;
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.22),
        inset 0 0 70px rgba(0, 0, 0, 0.55);
}

.hd-disc__cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Печатная надпись по кругу: «ЦИФРОВАЯ ВЕРСИЯ» (SVG + textPath) */
.hd-disc__label {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}

.hd-disc__label-text {
    fill: rgba(255, 255, 255, 0.94);
    /* шрифт сайта: подключён в main.css (@font-face), начертание Bold — то, что есть в проекте */
    font-family: "Onest", Arial, Helvetica, sans-serif;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.hd-disc__label-dot {
    fill: var(--primary1, #2bd228);
}

/* Тонкие «печатные» окружности на диске */
.hd-disc__label-ring {
    fill: none;
    stroke: rgba(255, 255, 255, 0.16);
    stroke-width: 1.2;
}

/* Радужный блик «под металл» */
.hd-disc__shine {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    opacity: 0.55;
    mix-blend-mode: screen;
    background: conic-gradient(from 0deg,
            rgba(255, 255, 255, 0) 0deg,
            rgba(255, 255, 255, 0.34) 32deg,
            rgba(255, 255, 255, 0) 88deg,
            rgba(255, 255, 255, 0.16) 176deg,
            rgba(255, 255, 255, 0) 238deg,
            rgba(255, 255, 255, 0.28) 302deg,
            rgba(255, 255, 255, 0) 360deg);
}

/* Ступица в центре диска */
.hd-disc__hub {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 76px;
    height: 76px;
    margin: -38px 0 0 -38px;
    border-radius: 50%;
    background: radial-gradient(circle,
            #0c0f0c 0%,
            #0c0f0c 26%,
            rgba(255, 255, 255, 0.85) 27%,
            rgba(190, 199, 186, 0.5) 41%,
            rgba(0, 0, 0, 0.55) 42%,
            rgba(0, 0, 0, 0.75) 100%);
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.5);
}

/* Кромка и объём */
.hd-disc__rim {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow:
        0 0 0 14px rgba(255, 255, 255, 0.08),
        0 0 0 15px rgba(255, 255, 255, 0.16),
        0 26px 50px rgba(0, 0, 0, 0.55);
}

/* Декор из синего треугольника (main-hero-slider-el.svg) в слайдах с диском
   не нужен: он стоял за картинкой игры, а теперь его место занял диск.
   Чтобы вернуть — удалите это правило. */
.main__hero-slider--disc .main__hero-slider_el {
    display: none;
}

/* Пока грузится контент слайда (скелетон) — диск не показываем */
.main__hero-slider--skeleton .hd-disc {
    display: none;
}

/* ---------- Адаптив (по брейкпоинтам main.css) ---------- */

@media screen and (max-width: 1610px) {
    .main__hero-slider--disc .main__hero-content {
        width: auto;
        padding-right: 330px;
    }

    .hd-disc {
        width: 300px;
        height: 300px;
        margin-top: -150px;
        right: 10px;
    }

    .hd-disc__hub {
        width: 58px;
        height: 58px;
        margin: -29px 0 0 -29px;
    }
}

@media screen and (max-width: 1270px) {
    .main__hero-slider--disc .main__hero-content {
        padding-right: 300px;
    }

    .hd-disc {
        width: 260px;
        height: 260px;
        margin-top: -130px;
        right: 8px;
    }

    .hd-disc__hub {
        width: 50px;
        height: 50px;
        margin: -25px 0 0 -25px;
    }
}

@media screen and (max-width: 1050px) {
    .main__hero-slider--disc .main__hero-content {
        padding-right: 330px;
    }

    .hd-disc {
        width: 290px;
        height: 290px;
        margin-top: -145px;
        right: 8px;
    }

    .hd-disc__hub {
        width: 56px;
        height: 56px;
        margin: -28px 0 0 -28px;
    }
}

/* Телефон: диск по центру внизу, как раньше стояла картинка игры */
@media screen and (max-width: 760px) {
    .main__hero-slider--disc .main__hero-content {
        width: 100%;
        padding-right: 30px;
    }

    .hd-disc {
        top: auto;
        bottom: 72px;
        right: 0;
        left: 0;
        width: 200px;
        height: 200px;
        margin: 0 auto;
    }

    .hd-disc__shadow {
        bottom: -16px;
        height: 32px;
    }

    .hd-disc__hub {
        width: 38px;
        height: 38px;
        margin: -19px 0 0 -19px;
    }
}

/* ---------- Доступность ---------- */

@media (prefers-reduced-motion: reduce) {
    .hd-disc__tilt {
        transition: none;
    }

    .hd-disc__spin {
        animation: none;
    }
}