/* =============================================
   GIFT CARD 3D — две карты, класс на самих картах
   =============================================
   Механика:
   - Класс .is-compressed ставится на .gift-card-front и .gift-card-back
     НАПРЯМУЮ (не на .gift-card-object). Это как в баннер-слайдере:
     класс и transform — на одном элементе. Так transition срабатывает.
   - is-compressed = back сжат под front.
   - По умолчанию (без класса) = EXPANDED.
   - Transition на transform у front и back — в базовых правилах.
   - Intro: compressed → rAF → expanded.
   - Hover: mouseenter → compressed. mouseleave → expanded.
   - Reverse: CSS transition от текущего computed. Без сброса.

   Ограничение окружения:
   #app (overflow-y: auto; overflow-x: hidden) и body (overflow: hidden)
   сплющивают 3D-иерархию. preserve-3d, perspective и translateZ
   не работают. Всё делается через rotateX/Y/Z + translateX/Y.
   ============================================= */


/* ---------------------------------------------
   1. ПЕРЕМЕННЫЕ СЦЕНЫ
   --------------------------------------------- */

.gift-card-scene {
    --gc-width: min(86vw, 420px);
    --gc-aspect: 1.586 / 1;
    --gc-radius: 16px;

    /* Дефолтная тема — до прихода JS */
    --card-color-1: #2a2d33;
    --card-color-2: #1b1d22;
    --card-back-color: #0f1013;
    --card-edge-color: #0a0a0c;

    --gc-update-duration: 160ms;

    /* Тайминг раскрытия/сжатия.
       ease-out — безопасная кривая, понимают все WebView.
       Если понадобится «дороже» — заменим на cubic-bezier, но
       сначала убедимся, что transition вообще работает. */
    --gc-state-duration: 900ms;
    --gc-state-easing: ease-out;
}


/* ---------------------------------------------
   2. СЦЕНА
   --------------------------------------------- */

.gift-card-scene {
    perspective: 1200px;

    display: flex;
    justify-content: center;
    align-items: center;

    zoom: 0.769;

    padding: 12px 8px 90px 8px;
    margin: 24px 0 0 0;
}

/* ---------------------------------------------
   3. ОБЪЕКТ — только контейнер и размеры.
   Никакого transform, никакого класса состояния.
   --------------------------------------------- */

.gift-card-object {
    position: relative;
    width: var(--gc-width);
    aspect-ratio: var(--gc-aspect);
    transform-style: preserve-3d;

    /* Запрет выделения и копирования текста/логотипа внутри карты. */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* ---------------------------------------------
   4. FRONT — плоский лист. Свой transform.
   EXPANDED (по умолчанию):  rotateX 30, rotateY -5, rotateZ -7, translateY 0
   COMPRESSED (.is-compressed): rotateX 55, rotateY -8, rotateZ -9, translateY 20px
   Transition на transform — всегда, в базовом правиле.
   --------------------------------------------- */

.gift-card-front {
    position: absolute;
    inset: 0;

    border-radius: var(--gc-radius);

    /* Материал: три слоя — specular (блик сверху), направленный свет
       (лёгкое затемнение снизу), основной градиент. */
    background:
        radial-gradient(ellipse 80% 55% at 22% 8%,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.025) 35%,
            transparent 70%),
        linear-gradient(160deg,
            rgba(255, 255, 255, 0.03) 0%,
            transparent 40%,
            rgba(0, 0, 0, 0.10) 100%),
        linear-gradient(135deg,
            var(--card-color-1) 0%,
            var(--card-color-2) 100%);

    /* Край: тонкая светлая граница + внутренняя фаска.
       Не внешняя тень — только моделирование поверхности. */
    border: 1.2px solid rgba(255, 255, 255, 0.18);

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.12),
        inset 2px 0 0 rgba(255, 255, 255, 0.05),
        inset 0 -2px 0 rgba(0, 0, 0, 0.28),
        inset -2px 0 0 rgba(0, 0, 0, 0.14),
        inset 0 0 26px rgba(0, 0, 0, 0.09),
        inset 0 -16px 32px rgba(0, 0, 0, 0.14),
        0 20px 50px rgba(0, 0, 0, 0.55),
        0 8px 20px rgba(0, 0, 0, 0.35),
        /* Голубое свечение — от front наружу.
           blur: EXPANDED 200px (размазано), COMPRESSED 8px (плотно). */
        0 0 calc(8px + 192px * (1 - var(--gc-space-near))) rgba(70, 180, 255, calc(0.05 + 0.55 * var(--gc-space-near)));

    transform-origin: 50% 50%;

    transform-style: preserve-3d;
    backface-visibility: hidden;

}


/* ТЕСТ 7: при снятии .is-compressed — играем @keyframes.
   (Класс .is-intro-played добавляется в JS.) */
.gift-card-front.is-intro-played {
    animation: gc-intro-front var(--gc-state-duration) var(--gc-state-easing);
}


/* ---------------------------------------------
   5. BACK — плоский лист. Свой transform.
   EXPANDED:   translateX 60px, translateY 70px  (выдвинут)
   COMPRESSED: translateX 8px,  translateY 10px  (под front)
   Углы — как у front, чтобы не отрывался.
   Transition на transform — всегда, в базовом правиле.
   --------------------------------------------- */

.gift-card-back {
    position: absolute;
    inset: 0;

    border-radius: var(--gc-radius);

    /* Тот же материал, что у front, но темнее и без выраженного блика. */
    background:
        radial-gradient(ellipse 70% 50% at 20% 10%,
            rgba(255, 255, 255, 0.045) 0%,
            transparent 65%),
        linear-gradient(155deg,
            rgba(255, 255, 255, 0.02) 0%,
            transparent 45%,
            rgba(0, 0, 0, 0.10) 100%),
        var(--card-back-color);

    border: 0.85px solid rgba(255, 255, 255, 0.1);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 -1px 0 rgba(0, 0, 0, 0.20),
        inset 0 0 14px rgba(0, 0, 0, 0.06),
        inset 0 -10px 20px rgba(0, 0, 0, 0.10),
        0 40px 90px rgba(0, 0, 0, 0.70),
        0 20px 50px rgba(0, 0, 0, 0.55),
        0 8px 24px rgba(0, 0, 0, 0.40),
        /* То же голубое свечение. */
        0 0 calc(8px + 192px * (1 - var(--gc-space-near))) rgba(70, 180, 255, calc(0.05 + 0.55 * var(--gc-space-near)));

    transform-origin: 50% 50%;

    transform-style: preserve-3d;
    backface-visibility: hidden;



    pointer-events: none;
}

.gift-card-back.is-intro-played {
    animation: gc-intro-back var(--gc-state-duration) var(--gc-state-easing);
}


/* ---------------------------------------------
   6. CONTENT
   --------------------------------------------- */

.gift-card-content {
    position: absolute;
    inset: 0;
    padding: 18px 20px;
    transition: opacity var(--gc-update-duration) ease;

    /* Курсор не становится текстовым над контентом. */
    pointer-events: none;
}

.gift-card-content.is-updating {
    opacity: 0.35;
}


/* ---------------------------------------------
   7. TITLE
   --------------------------------------------- */

.gift-card-title {
    position: absolute;
    top: 16px;
    left: 20px;
    right: 20px;

    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.2px;

    color: rgba(255, 255, 255, 0.7);

    text-shadow:
        0 -1px 0 rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.08);
}


/* ---------------------------------------------
   8. LOGO
   --------------------------------------------- */

.gift-card-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    display: block;
    width: 37%;
    height: 37%;

    object-fit: contain;
    object-position: center;

    opacity: 0.68;
    filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.55));
}


/* ---------------------------------------------
   9. REGION (hidden)
   --------------------------------------------- */

.gift-card-region[hidden] {
    display: none;
}


/* ---------------------------------------------
   10. DENOMINATION
   --------------------------------------------- */

.gift-card-denomination {
    position: absolute;
    right: 20px;
    bottom: 40px;

    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.3px;

    color: rgba(255, 255, 255, 0.7);

    text-shadow:
        0 -1px 0 rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.05);
}


/* ---------------------------------------------
   11. PRICE
--------------------------------------------- */

.gift-card-price {
    position: absolute;
    right: 20px;
    bottom: 18px;

    font-size: 15px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0.2px;

    color: rgba(255, 255, 255, 0.57);

    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.48);
}


/* ---------------------------------------------
   12. REDUCED MOTION
   Сразу EXPANDED, без transition.
   --------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .gift-card-front,
    .gift-card-back {
        transition: none !important;
    }

    .gift-card-front.is-compressed,
    .gift-card-back.is-compressed {
        transform: none;
    }

    .gift-card-content {
        transition: none !important;
    }
}

/* =============================================
   @keyframes для intro.
   
   в этом WebView (transition не сработал).
   ============================================= */

@keyframes gc-intro-front {
    from {
        transform: rotateX(55deg) rotateY(-8deg) rotateZ(-9deg) translateY(20px);
    }

    to {
        transform: rotateX(30deg) rotateY(-5deg) rotateZ(-7deg) translateY(0);
    }
}

@keyframes gc-intro-back {
    from {
        transform: rotateX(55deg) rotateY(-8deg) rotateZ(-9deg) translateX(8px) translateY(10px);
    }

    to {
        transform: rotateX(30deg) rotateY(-5deg) rotateZ(-7deg) translateX(60px) translateY(70px);
    }
}

/* =========================================================
   SPACE BETWEEN FRONT / BACK
   Визуальный слой между картами. Геометрию карт не меняет.
   Живёт в нижней полосе object — там, где back виден из-под front.
   Интенсивность эффектов анимируется синхронно с картами
   через CSS-переменные --gc-space-* (ставятся из JS).
   ========================================================= */

.gift-card-back {
    z-index: 0;
}

.gift-card-space {
    z-index: 1;
}

.gift-card-front {
    z-index: 2;
}

.gift-card-space {
    position: absolute;

    /* Ниже — в самой видимой части зазора. top: 88% — только нижние
       12% object. Там back точно виден из-под front. */
    top: 88%;
    bottom: -15%;
    left: 4%;
    right: 4%;

    border-radius: 18px;

    pointer-events: none;

    /* overflow: visible — чтобы новый слой .gift-card-space-light
       (halo scale 1.6, blur 40px) не обрезался. Дымка/тень внутри
       space имеют небольшие размеры и на front не вылезают. */
    overflow: visible;

    --gc-space-near: 1;
}

/* ---------------------------------------------------------
   1. Контактная тень — тёмная полоса по линии контакта
   --------------------------------------------------------- */

.gift-card-space-shadow {
    position: absolute;
    inset: 0;

    border-radius: 14px;

    background:
        radial-gradient(ellipse 100% 70% at 50% 22%,
            rgba(0, 0, 0, 0.85) 0%,
            rgba(0, 0, 0, 0.58) 28%,
            rgba(0, 0, 0, 0.24) 52%,
            transparent 95%);

    filter: blur(16px);
    opacity: calc(0.35 + 0.45 * var(--gc-space-near));
}

/* ---------------------------------------------------------
   2. Свечение — рассеянный свет в зазоре
   --------------------------------------------------------- */

.gift-card-space-glow {
    position: absolute;
    inset: 0;

    border-radius: 16px;

    background:
        radial-gradient(ellipse 85% 60% at 50% 50%,
            rgba(255, 255, 255, 0.20) 0%,
            rgba(255, 255, 255, 0.10) 25%,
            rgba(255, 255, 255, 0.035) 50%,
            transparent 89%);

    filter: blur(18px);
    opacity: calc(0.30 + 0.5 * (1 - var(--gc-space-near)));
}

/* ---------------------------------------------------------
   3. Дымка / volumetric fog
   --------------------------------------------------------- */

.gift-card-space-fog {
    position: absolute;
    inset: 0;

    border-radius: 18px;

    background:
        radial-gradient(ellipse 60% 50% at 30% 45%,
            rgba(255, 255, 255, 0.12),
            transparent 72%),
        radial-gradient(ellipse 65% 50% at 70% 60%,
            rgba(255, 255, 255, 0.09),
            transparent 74%),
        radial-gradient(ellipse 95% 65% at 50% 50%,
            rgba(255, 255, 255, 0.04),
            transparent 93%);

    filter: blur(17px);

    opacity: calc(0.35 + 0.45 * var(--gc-space-near));
}

/* ---------------------------------------------------------
   4. AO-полоса — тёмная линия по разрыву
   --------------------------------------------------------- */

.gift-card-space::before {
    content: "";
    position: absolute;

    left: 2%;
    right: 2%;
    top: 4%;
    height: 36%;

    border-radius: 50%;

    background:
        radial-gradient(ellipse at center,
            rgba(0, 0, 0, 0.85) 0%,
            rgba(0, 0, 0, 0.52) 30%,
            rgba(0, 0, 0, 0.20) 55%,
            transparent 78%);

    filter: blur(14px);
    opacity: calc(0.32 + 0.5 * var(--gc-space-near));
    pointer-events: none;
}


/* ---------------------------------------------------------
   5. Световой обод
   --------------------------------------------------------- */

.gift-card-space::after {
    content: "";
    position: absolute;

    left: 4%;
    right: 4%;
    top: 36%;
    height: 48%;

    border-radius: 50%;

    background:
        radial-gradient(ellipse at center,
            rgba(255, 255, 255, 0.20) 0%,
            rgba(255, 255, 255, 0.09) 30%,
            transparent 75%);

    filter: blur(12px);
    opacity: calc(0.22 + 0.5 * (1 - var(--gc-space-near)));
    pointer-events: none;
}

.gift-card-spacer {
    height: 85px;
}

/* =========================================================
   ФЛАГ РЕГИОНА НА КАРТЕ
   Правый нижний угол. SVG из библиотеки flag-icons.
   Скругление, inset-тень, прозрачность.
   ========================================================= */

.gift-card-region-flag {
    position: absolute;

    left: 18px;
    bottom: 21px;

    width: 36px;
    height: 26px;

    border-radius: 4px;
    overflow: hidden;

    opacity: 0.55;

    /* Inset-тень — на обёртке, не на span. */
    box-shadow:
        inset 0 0 6px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);

    pointer-events: none;

    /* z-index ниже content. */
    z-index: 0;
}

.gift-card-region-flag-icon {
    display: block;
    width: 100%;
    height: 100%;

    /* flag-icons задаёт background-image через класс fi fi-xx. */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Скрыт, если региона нет / глобальный. */
.gift-card-region-flag.is-hidden {
    display: none;
}

.gift-card-content {
    position: absolute;
    inset: 0;
    z-index: 1;

    padding: 18px 20px;
    transition: opacity var(--gc-update-duration) ease;
    pointer-events: none;
}
/* Текстовая метка (Discord: BASIC / NITRO) вместо флага. */
.gift-card-region-flag.is-text {
    width: auto;
    min-width: 50px;
    height: 25px;

    padding: 0 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;

    opacity: 0.85;
}

.gift-card-region-flag.is-text .gift-card-region-flag-icon {
    font-size: 14px;
    font-weight: 750;
    letter-spacing: 0.6px;
    color: rgba(255, 255, 255, 0.9);

    background: none;
    width: auto;
    height: auto;
    line-height: 1;
}