/* ==========================================================================
   Animations & Visual Effects
   ========================================================================== */

/* ---------- Pulse (Register Button) ---------- */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.7);
    }
    70% {
        box-shadow: 0 0 0 12px rgba(0, 230, 118, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 230, 118, 0);
    }
}

.btn--register {
    animation: pulse 2.2s infinite;
}

/* ---------- Float (Telegram Button) ---------- */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

.btn--telegram {
    animation: float 3s ease-in-out infinite;
}

/* ---------- Shimmer (Login Button) ---------- */
@keyframes shimmer {
    0% {
        left: -100%;
    }
    60% {
        left: 100%;
    }
    100% {
        left: 100%;
    }
}

.btn--login::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.35),
        transparent
    );
    animation: shimmer 3.5s infinite;
    pointer-events: none;
}

/* ---------- Fade In Up (Content Reveal) ---------- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.reveal {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Glow (Gold Elements) ---------- */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
    }
}

.glow {
    animation: glow 2.5s ease-in-out infinite;
}

/* ---------- Gradient Shift (Hero Background) ---------- */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.gradient-bg {
    background: linear-gradient(
        135deg,
        #0A0E17,
        #1A1F35,
        #0A0E17
    );
    background-size: 200% 200%;
    animation: gradientShift 12s ease infinite;
}

/* ---------- Spin (Invite Wheel Reference) ---------- */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ---------- Bounce (Notification Badge) ---------- */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-3px) scale(1.05);
    }
}

.badge-pulse {
    animation: bounce 1.5s ease-in-out infinite;
}