/* ============================================================
   Промо-плитка «Xbox Game Pass Ultimate» на главной странице.

   Вид как в макете: объёмная зелёная карточка, значок Xbox, надпись
   XBOX GAME PASS, плашка ULTIMATE и кнопка «АКТИРОВАТЬ».

   Что здесь есть:
     .gp-promo           — плитка-ссылка (фон прозрачный)
     .gp-promo__glow     — зелёное свечение за карточкой, «дышит»
     .gp-promo__inner    — сама объёмная карточка (наклон, боковина, блики)
     .gp-promo__logo     — значок Xbox (/assets/img/xbox-coin.png)
     .gp-promo__btn      — кнопка: при наведении циклично нажимается,
                           при зажатии утапливается до конца

   JavaScript не нужен — вся анимация на CSS.
   Размеры считаются от габаритов плитки (единицы cqh), поэтому карточка
   одинаково хорошо встаёт и в большую плитку на десктопе, и в низкую на
   телефоне. У каждого размера есть обычный px-фолбэк для старых браузеров.
   При системной настройке «уменьшить движение» анимации отключаются.
   ============================================================ */

/* --- Плитка: прозрачный фон, карточка по центру --- */

.main__hero-static a.gp-promo {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;

    /* Даёт возможность считать размеры от габаритов плитки */
    container-type: size;
}

/* --- Зелёное свечение за карточкой --- */

.gp-promo__glow {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    width: 420px;
    height: 420px;
    width: min(420px, 88cqh);
    height: min(420px, 88cqh);
    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(73, 255, 49, 0.32) 0%,
            rgba(43, 210, 40, 0.16) 45%,
            rgba(43, 210, 40, 0) 72%);
    filter: blur(26px);
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: gp-glow 5s ease-in-out infinite;
}

@keyframes gp-glow {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.72;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.12);
        opacity: 1;
    }
}

/* --- Объёмная карточка --- */

.gp-promo__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 310px;
    width: min(310px, 76cqw, 70cqh);
    padding: 28px 22px 32px;
    padding: min(28px, 5.6cqh) min(22px, 4.4cqh) min(32px, 6.4cqh);
    border: 2px solid #6eaf52;
    border-radius: 43px;
    border-radius: min(43px, 8.6cqh);
    background: linear-gradient(135deg, #75b858, #4e9a3b 70%, #42802e);
    box-shadow:
        inset 3px 4px 5px rgba(189, 237, 151, 0.4),
        inset -8px -9px 9px #2f6e32,
        9px 13px 0 #254f20,
        0 0 65px rgba(73, 255, 49, 0.19);
    box-shadow:
        inset 3px 4px 5px rgba(189, 237, 151, 0.4),
        inset -8px -9px 9px #2f6e32,
        min(9px, 1.8cqh) min(13px, 2.6cqh) 0 #254f20,
        0 0 65px rgba(73, 255, 49, 0.19);
    transform: perspective(900px) rotateY(-9deg) rotateZ(9deg);
    transition: transform 0.35s;
}

.gp-promo:hover .gp-promo__inner {
    transform: perspective(900px) rotateY(-5deg) rotateZ(6deg);
}

/* --- Значок Xbox --- */

.gp-promo__logo {
    display: block;
    width: 82px;
    height: 82px;
    width: min(82px, 16.4cqh);
    height: min(82px, 16.4cqh);
    margin-bottom: 14px;
    margin-bottom: min(14px, 2.8cqh);
    background-image: url('/assets/img/xbox-coin.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 3px 2px rgba(41, 88, 33, 0.4));
}

/* --- Название --- */

.gp-promo__brand {
    display: block;
    color: #f1f0dd;
    font-size: 46px;
    font-size: min(46px, 9.2cqh);
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1.1;
    text-shadow: 2px 3px 1px #326828;
}

.gp-promo__brand small {
    display: block;
    margin-top: 3px;
    margin-top: min(3px, 0.6cqh);
    font-size: 30px;
    font-size: min(30px, 6cqh);
    font-weight: 800;
    letter-spacing: 0.5px;
}

.gp-promo__ultimate {
    display: inline-block;
    margin: 20px 0 28px;
    margin: min(20px, 4cqh) 0 min(28px, 5.6cqh);
    padding: 9px 17px;
    padding: min(9px, 1.8cqh) min(17px, 3.4cqh);
    border: 1px solid #80a74c;
    border-radius: 8px;
    border-radius: min(8px, 1.6cqh);
    background: linear-gradient(#397d26, #2b651e);
    color: #ffe58a;
    font-size: 20px;
    font-size: min(20px, 4cqh);
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 1.15;
    box-shadow: inset 0 1px 1px rgba(190, 215, 133, 0.27), 0 3px 0 #244f1a;
    text-shadow: 0 1px 1px #314b14;
}

/* --- Кнопка «АКТИРОВАТЬ» --- */

.gp-promo__btn {
    display: block;
    width: 100%;
    padding: 0 0 9px;
    padding: 0 0 min(9px, 1.8cqh);
    border-radius: 17px;
    -webkit-tap-highlight-color: transparent;
}

.gp-promo__btn > span {
    display: block;
    padding: 21px 10px;
    padding: min(21px, 4.2cqh) min(10px, 2cqh);
    border-radius: 16px;
    border-radius: min(16px, 3.2cqh);
    background: linear-gradient(#f6f5e5, #d8dbc7);
    color: #292e25;
    font-size: 21px;
    font-size: min(21px, 4.2cqh);
    font-weight: 800;
    letter-spacing: 1.1px;
    line-height: 1.25;
    white-space: nowrap;
    box-shadow: inset 0 2px 1px #fff, 0 8px 0 #9b9e85, 0 12px 9px rgba(23, 54, 23, 0.5);
    box-shadow: inset 0 2px 1px #fff,
        0 min(8px, 1.6cqh) 0 #9b9e85,
        0 min(12px, 2.4cqh) min(9px, 1.8cqh) rgba(23, 54, 23, 0.5);
    transform: translateY(0);
    transition: transform 0.13s, box-shadow 0.13s;
}

/* Циклическое нажатие, пока курсор на плитке */
@media (hover: hover) {
    .gp-promo:hover .gp-promo__btn > span {
        animation: gp-press-release 1s ease-in-out infinite;
    }
}

@keyframes gp-press-release {
    0%,
    100% {
        transform: translateY(0);
        box-shadow: inset 0 2px 1px #fff,
            0 min(8px, 1.6cqh) 0 #9b9e85,
            0 min(12px, 2.4cqh) min(9px, 1.8cqh) rgba(23, 54, 23, 0.5);
    }
    50% {
        transform: translateY(min(5px, 1cqh));
        box-shadow: inset 0 2px 1px #fff,
            0 min(3px, 0.6cqh) 0 #9b9e85,
            0 min(5px, 1cqh) min(5px, 1cqh) rgba(23, 54, 23, 0.5);
    }
}

/* Зажатие — кнопка утапливается до конца */
.gp-promo:active .gp-promo__btn > span {
    animation: none;
    transform: translateY(min(8px, 1.6cqh));
    box-shadow: inset 0 2px 2px #aaa, 0 0 0 #9b9e85, 0 2px 3px rgba(23, 54, 23, 0.5);
}

.gp-promo:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -6px;
}

/* --- Мобильные: отступ, который раньше давал класс-скелетон --- */

@media screen and (max-width: 760px) {
    .main__hero-static {
        margin-top: 25px;
    }
}

@media (max-width: 400px) {
    .gp-promo__btn > span {
        font-size: 18px;
        font-size: min(18px, 3.6cqh);
        letter-spacing: 0.7px;
    }
}

/* --- Доступность: без анимаций --- */

@media (prefers-reduced-motion: reduce) {
    .gp-promo__glow {
        animation: none;
    }

    .gp-promo__inner,
    .gp-promo__btn > span {
        transition: none;
    }

    .gp-promo:hover .gp-promo__inner {
        transform: perspective(900px) rotateY(-9deg) rotateZ(9deg);
    }

    .gp-promo:hover .gp-promo__btn > span {
        animation: none;
    }
}