/* ========================================
   CLEAN MODERN INTERACTIONS
   Theme: Crisp, Professional, Fast
   ======================================== */

/* 1. BUTTON INTERACTIONS */
.hero-btn,
.lang-select {
    transition: all 0.2s ease-in-out;
    position: relative;
    overflow: hidden;
}

.hero-btn:active,
.lang-select:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Ripple Effect for Buttons */
.hero-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
}

.hero-btn:hover::after {
    width: 200%;
    height: 200%;
}

/* 2. CARD HOVER EFFECTS (Stats, Members, Schemes) */
.stats-card,
.member-card,
.scheme-card-box {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.stats-card:hover,
.member-card:hover,
.scheme-card-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-color: #D4AF37;
    /* Gold Accent on Hover */
}

/* 3. LEADER AVATAR HOVER */
.leader-img {
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.leader-item:hover .leader-img {
    transform: scale(1.1);
    border-color: #800000;
    /* Maroon Accent */
}

/* 4. LOGO ROTATION (Subtle) */
@keyframes subtle-spin {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(5deg);
    }

    75% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.gp-logo:hover {
    animation: subtle-spin 1s ease-in-out;
}

/* 5. SMOOTH PAGE LOAD */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-section,
.stats-row,
.gp-members-home-grid,
.schemes-row {
    animation: fade-in-up 0.6s ease-out forwards;
}

.stats-row {
    animation-delay: 0.1s;
}

.gp-members-home-grid {
    animation-delay: 0.2s;
}

.schemes-row {
    animation-delay: 0.3s;
}

/* 6. SCROLLBAR STYLING */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    /* For horizontal scroll */
}

::-webkit-scrollbar-track {
    background: #F3F4F6;
}

::-webkit-scrollbar-thumb {
    background: #D1D5DB;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9CA3AF;
}

/* 7. UTILITY ANIMATIONS */
.animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* 8. FOCUS STATES (Accessibility) */
*:focus-visible {
    outline: 2px solid #800000;
    outline-offset: 2px;
}