/* ===================================================== */
/* FLOAT */
/* ===================================================== */

@keyframes floatAnimation {

    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-14px);
    }

    100% {
        transform: translateY(0px);
    }

}

/* ===================================================== */
/* PULSE GLOW */
/* ===================================================== */

@keyframes pulseGlow {

    0% {

        box-shadow:
            0 0 0 rgba(99,102,241,0.25);

    }

    50% {

        box-shadow:
            0 0 45px rgba(99,102,241,0.45);

    }

    100% {

        box-shadow:
            0 0 0 rgba(99,102,241,0.25);

    }

}

/* ===================================================== */
/* FADE UP */
/* ===================================================== */

@keyframes fadeUp {

    from {

        opacity: 0;

        transform:
            translateY(40px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}

/* ===================================================== */
/* GRADIENT SHIFT */
/* ===================================================== */

@keyframes gradientShift {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

}

/* ===================================================== */
/* BORDER FLOW */
/* ===================================================== */

@keyframes borderFlow {

    0% {

        border-color:
            rgba(99,102,241,0.18);

    }

    50% {

        border-color:
            rgba(139,92,246,0.35);

    }

    100% {

        border-color:
            rgba(99,102,241,0.18);

    }

}

/* ===================================================== */
/* SHIMMER */
/* ===================================================== */

@keyframes shimmer {

    0% {

        transform:
            translateX(-120%);

    }

    100% {

        transform:
            translateX(120%);

    }

}

/* ===================================================== */
/* BACKGROUND FLOAT */
/* ===================================================== */

@keyframes backgroundFloat {

    0% {

        transform:
            translate(0px, 0px);

    }

    50% {

        transform:
            translate(20px, -20px);

    }

    100% {

        transform:
            translate(0px, 0px);

    }

}

/* ===================================================== */
/* CARD ENTRANCE */
/* ===================================================== */

.profile-card {

    animation:
        fadeUp 0.8s ease;

}

.support-panel {

    animation:
        fadeUp 1s ease;

}

/* ===================================================== */
/* PROFILE */
/* ===================================================== */

.profile-avatar {

    animation:
        floatAnimation 5s ease-in-out infinite;

}

.profile-avatar img {

    transition:
        transform 0.5s ease;

}

.profile-avatar:hover img {

    transform:
        scale(1.08);

}

/* ===================================================== */
/* SUPPORT BUTTON */
/* ===================================================== */

.support-btn {

    animation:
        pulseGlow 3s infinite;

    transition:
        all 0.3s ease;

}

.support-btn::after {

    animation:
        shimmer 3.5s linear infinite;

}

/* ===================================================== */
/* PANEL BADGE */
/* ===================================================== */

.panel-badge {

    background-size:
        200% 200%;

    animation:
        gradientShift 6s ease infinite;

}

/* ===================================================== */
/* GLASS CARDS */
/* ===================================================== */

.glass-card {

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;

}

.glass-card:hover {

    transform:
        translateY(-6px);

}

/* ===================================================== */
/* INTERACTIVE ELEMENTS */
/* ===================================================== */

.social-btn,
.amount-btn,
.payment-item,
.currency-btn {

    transition:
        all 0.3s ease;

}

.social-btn:hover,
.amount-btn:hover,
.payment-item:hover,
.currency-btn:hover {

    transform:
        translateY(-4px);

}

/* ===================================================== */
/* INPUTS */
/* ===================================================== */

.input-wrapper,
.textarea-wrapper {

    transition:
        all 0.3s ease;

}

/* ===================================================== */
/* BLURS */
/* ===================================================== */

.blur-1 {

    animation:
        backgroundFloat 10s ease-in-out infinite;

}

.blur-2 {

    animation:
        backgroundFloat 14s ease-in-out infinite reverse;

}

/* ===================================================== */
/* ACTIVE STATES */
/* ===================================================== */

.currency-btn.active,
.amount-btn.active {

    animation:
        borderFlow 3s infinite;

}

/* ===================================================== */
/* PERFORMANCE */
/* ===================================================== */

.profile-card,
.support-panel,
.glass-card,
.support-btn,
.amount-btn,
.currency-btn,
.payment-item,
.social-btn,
.profile-avatar {

    transform:
        translateZ(0);

    backface-visibility:
        hidden;

    will-change:
        transform;

}

/* ===================================================== */
/* REDUCED MOTION */
/* ===================================================== */

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

    * {

        animation: none !important;

        transition: none !important;

        scroll-behavior: auto !important;

    }

}