/**
 * Анимации ожидания на кнопках отправки (обёртка .mg-btn-loading-wrap + .loading)
 *
 * @package MasterGranita
 */

.mg-btn-loading-wrap {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    max-width: 100%;
    overflow: hidden;
    border-radius: inherit;
    /* Явный контекст наложения, чтобы ::after был над фоном кнопки (в т.ч. при backdrop-filter у .btn) */
    isolation: isolate;
}

/* Интерактивный элемент ниже слоя блика */
.mg-btn-loading-wrap > button,
.mg-btn-loading-wrap > input[type="submit"],
.mg-btn-loading-wrap > a {
    position: relative;
    z-index: 0;
}

.mg-btn-loading-wrap > button,
.mg-btn-loading-wrap > input[type="submit"] {
    width: 100%;
}

.wpcf7-form .mg-btn-loading-wrap,
form.cart .mg-btn-loading-wrap {
    display: flex;
    width: 100%;
}

/* Шапка, hero, карточки каталога, галерея — ссылки-кнопки */
.header .mg-btn-loading-wrap,
.hero-actions .mg-btn-loading-wrap,
.cart__footer .mg-btn-loading-wrap,
.gallery-page-project__body > .mg-btn-loading-wrap {
    display: inline-flex;
    align-items: stretch;
}

.gallery-page-project__body > .mg-btn-loading-wrap {
    margin-top: auto;
    align-self: stretch;
    justify-content: center;
}

.header .mg-btn-loading-wrap .header__cta,
.hero-actions .mg-btn-loading-wrap .btn,
.cart__footer .mg-btn-loading-wrap .cart__more {
    flex: 1 1 auto;
}

/* margin-top / align-self на обёртке; ссылка тянется по ширине карточки */
.gallery-page-project__body .mg-btn-loading-wrap .gallery-page-project__cta {
    margin-top: 0;
    align-self: auto;
    flex: 1 1 auto;
}

.mg-btn-loading-wrap.loading > button,
.mg-btn-loading-wrap.loading > input[type="submit"],
.mg-btn-loading-wrap.loading > a {
    pointer-events: none;
    cursor: wait;
}

/* Общий слой «стекла» — поверх кнопки */
.mg-btn-loading-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    border-radius: inherit;
    transition: opacity 0.2s ease;
    will-change: opacity, transform, background-position;
}

.mg-btn-loading-wrap.loading::after {
    opacity: 1;
    /* Усиливаем видимость блика на заливке кнопки */
    mix-blend-mode: soft-light;
}

/* ---------- glass-sweep: диагональный блик ---------- */
.mg-btn-loading-wrap--glass-sweep::after {
    background: linear-gradient(
        115deg,
        transparent 0%,
        transparent 38%,
        rgba(255, 255, 255, 0.12) 45%,
        rgba(255, 255, 255, 0.35) 50%,
        rgba(255, 255, 255, 0.12) 55%,
        transparent 62%,
        transparent 100%
    );
    background-size: 220% 100%;
    background-position: 100% 0;
}

.mg-btn-loading-wrap--glass-sweep.loading::after {
    animation: mg-glass-sweep 1.1s ease-in-out infinite;
}

@keyframes mg-glass-sweep {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

/* ---------- glass-shimmer: движение полосы света ---------- */
.mg-btn-loading-wrap--glass-shimmer::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 40%,
        rgba(255, 255, 255, 0.28) 50%,
        rgba(255, 255, 255, 0.08) 60%,
        transparent 100%
    );
    background-size: 50% 100%;
    background-repeat: no-repeat;
    background-position: -20% 0;
}

.mg-btn-loading-wrap--glass-shimmer.loading::after {
    animation: mg-glass-shimmer 0.9s ease-in-out infinite;
}

@keyframes mg-glass-shimmer {
    0% {
        background-position: -20% 0;
    }
    100% {
        background-position: 120% 0;
    }
}

/* ---------- glass-aurora: мягкие переливы ---------- */
.mg-btn-loading-wrap--glass-aurora::after {
    background:
        radial-gradient(ellipse 80% 120% at 20% 50%, rgba(201, 168, 76, 0.35), transparent 55%),
        radial-gradient(ellipse 70% 100% at 80% 50%, rgba(255, 255, 255, 0.2), transparent 50%),
        linear-gradient(125deg, rgba(255, 255, 255, 0.05), rgba(201, 168, 76, 0.15));
    background-size: 200% 200%;
    background-position: 0% 50%;
}

.mg-btn-loading-wrap--glass-aurora.loading::after {
    mix-blend-mode: normal;
    animation: mg-glass-aurora 2.2s ease-in-out infinite;
}

@keyframes mg-glass-aurora {
    0%,
    100% {
        background-position: 0% 50%, 100% 50%, 50% 50%;
        opacity: 0.85;
    }
    50% {
        background-position: 100% 40%, 0% 60%, 50% 50%;
        opacity: 1;
    }
}

/* ---------- glass-border-travel: блик по периметру (вращающийся конус) ---------- */
.mg-btn-loading-wrap--glass-border-travel {
    overflow: visible;
    isolation: isolate;
}

.mg-btn-loading-wrap--glass-border-travel::before {
    content: "";
    position: absolute;
    inset: -3px;
    z-index: 0;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    padding: 2px;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 220deg,
        rgba(255, 255, 255, 0.5) 260deg,
        rgba(201, 168, 76, 0.85) 290deg,
        rgba(255, 255, 255, 0.4) 320deg,
        transparent 360deg
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    transform-origin: center center;
}

.mg-btn-loading-wrap--glass-border-travel.loading::before {
    opacity: 1;
    animation: mg-glass-border-rotate 1.4s linear infinite;
}

.mg-btn-loading-wrap--glass-border-travel::after {
    display: none;
}

@keyframes mg-glass-border-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ---------- glass-streak: тонкая горизонтальная полоса ---------- */
.mg-btn-loading-wrap--glass-streak::after {
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255, 255, 255, 0.15) 45%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0.15) 55%,
        transparent 100%
    );
    background-size: 100% 40%;
    background-repeat: no-repeat;
    background-position: 0 -100%;
}

.mg-btn-loading-wrap--glass-streak.loading::after {
    animation: mg-glass-streak 1s ease-in-out infinite;
}

@keyframes mg-glass-streak {
    0% {
        background-position: 0 -100%;
    }
    100% {
        background-position: 0 200%;
    }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .mg-btn-loading-wrap.loading::after,
    .mg-btn-loading-wrap--glass-border-travel.loading::before {
        animation: none !important;
        opacity: 0.6;
    }
}