/* Add to style.css */

/* Whiteout Survival title effect */
.font-heading {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5),
                 0 0 20px rgba(56, 189, 248, 0.2);
    letter-spacing: 0.05em;
}


/* Frost border animation for description box */
@keyframes frost-glow {
    0%, 100% { 
        box-shadow: 0 0 10px rgba(56, 189, 248, 0.1),
                    inset 0 0 20px rgba(56, 189, 248, 0.05);
    }
    50% { 
        box-shadow: 0 0 20px rgba(56, 189, 248, 0.2),
                    inset 0 0 30px rgba(56, 189, 248, 0.1);
    }
}



/* Stats badges hover effect */
.inline-flex > div {
    transition: all 0.3s ease;
}

.inline-flex > div:hover {
    transform: translateY(-2px);
}

.inline-flex > div:hover .fa-trophy {
    animation: bounce 0.5s;
}

.inline-flex > div:hover .fa-users {
    animation: bounce 0.5s;
}

.inline-flex > div:hover .fa-shield-halved {
    animation: bounce 0.5s;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}


body {
            background-color: #0f172a;
            color: #e2e8f0;
            background-image: 
                radial-gradient(circle at 10% 20%, rgba(56, 189, 248, 0.1) 0%, transparent 20%),
                radial-gradient(circle at 90% 80%, rgba(56, 189, 248, 0.1) 0%, transparent 20%);
            min-height: 100vh;
            overflow-x: hidden;
        }
        
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #0f172a; }
        ::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: #38bdf8; }

        .glass-panel {
            background: rgba(30, 41, 59, 0.7);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .snowflake {
            position: fixed;
            top: -10px;
            color: #fff;
            opacity: 0.5;
            z-index: 0;
            pointer-events: none;
            animation: fall linear forwards;
        }

        @keyframes fall {
            to { transform: translateY(105vh); }
        }

        .nav-dock {
            background: rgba(15, 23, 42, 0.9);
            backdrop-filter: blur(15px);
            border-top: 1px solid rgba(56, 189, 248, 0.3);
        }
        
        section {
            scroll-margin-top: 100px;
        }

        .highlight-updates {
            color: #fb923c !important;
            text-shadow: 0 0 10px rgba(251, 146, 60, 0.5);
        }

        .announcement-hidden {
            display: none;
        }

        .pfp-border-r5 {
            border: 2px solid #fbbf24;
            box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
        }

        .pfp-border-r4 {
            border: 1px solid #94a3b8;
        }
        
        .status-pulse {
            animation: pulse-glow 2s infinite ease-in-out;
        }
        
        @keyframes pulse-glow {
            0%, 100% { box-shadow: 0 0 5px rgba(34, 197, 94, 0.2); }
            50% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.5); }
        }

/* Add these animations to your existing style.css */
@keyframes gentle-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(251, 191, 36, 0);
    }
}

@keyframes pulse-dot {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

@keyframes glow-border {
    0%, 100% {
        border-color: rgba(251, 191, 36, 0.5);
    }
    50% {
        border-color: rgba(251, 191, 36, 0.8);
    }
}

.bear-pulse {
    animation: gentle-pulse 2s infinite ease-in-out, glow-border 2s infinite ease-in-out;
}

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

/* Remove or comment out the old bounce animation if you want */
/*
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.animate-bounce {
    animation: bounce 2s infinite;
}
*/

/* Keep the existing pulse animation for other elements */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-pulse {
    animation: pulse 1.5s infinite;
}