/* UI ENHANCEMENTS - ANIMATED HOVER BUTTONS AND MODERN STYLING */

/* ============================================
   BUTTON ENHANCEMENTS & ANIMATIONS
   ============================================ */

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

/* ============================================
   NEW BUTTON ANIMATIONS FOR OTHER ELEMENTS
   ============================================ */

/* Flip Animation for Register Button */
.section-register-button {
    perspective: 1000px;
    transform-style: preserve-3d;
    transition: all 0.5s ease;
}

.section-register-button:hover {
    transform: rotateY(360deg) scale(1.05);
    background: linear-gradient(45deg, #bc493c, #f7d991);
}

/* Neon Glow Effect for Ranking Button */
.section-ranking-button {
    border: 2px solid #bc493c;
    background: transparent;
    color: #bc493c !important;
    text-shadow: 0 0 5px currentColor;
    box-shadow: 
        inset 0 0 5px rgba(188, 73, 60, 0.2),
        0 0 5px rgba(188, 73, 60, 0.3);
    transition: all 0.4s ease;
}

.section-ranking-button:hover {
    background: #bc493c;
    color: white !important;
    text-shadow: 0 0 10px #fff;
    box-shadow: 
        inset 0 0 20px rgba(255, 255, 255, 0.2),
        0 0 20px rgba(188, 73, 60, 0.8),
        0 0 40px rgba(188, 73, 60, 0.6),
        0 0 60px rgba(188, 73, 60, 0.4);
    animation: neon-flicker 0.1s infinite alternate;
}

@keyframes neon-flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.95; }
}

/* Morphing Effect for Community Button */
.section-community-button {
    border-radius: 10px;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    background: linear-gradient(45deg, #bc493c, #e05747);
}

.section-community-button:hover {
    border-radius: 50px;
    transform: rotate(5deg) scale(1.1);
    background: linear-gradient(45deg, #f7d991, #bc493c);
    box-shadow: 0 0 30px rgba(247, 217, 145, 0.7);
}

/* ============================================
   NAVIGATION BUTTON IMPROVEMENTS
   ============================================ */

/* ============================================
   STAGGERED ANIMATIONS FOR MULTIPLE ELEMENTS
   ============================================ */

/* Server Channel Boxes with Wave Animation */
.server-channel-box {
    animation: float-wave 3s ease-in-out infinite;
}

.server-channel-box:nth-child(1) { animation-delay: 0s; }
.server-channel-box:nth-child(2) { animation-delay: 0.2s; }
.server-channel-box:nth-child(3) { animation-delay: 0.4s; }
.server-channel-box:nth-child(4) { animation-delay: 0.6s; }
.server-channel-box:nth-child(5) { animation-delay: 0.8s; }

@keyframes float-wave {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(-10px) rotate(1deg); }
    66% { transform: translateY(-5px) rotate(-1deg); }
}

/* ============================================
   LOADING BUTTON STATES
   ============================================ */


@keyframes button-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================
   RESPONSIVE ADJUSTMENTS FOR SMALLER BUTTON
   ============================================ */

/* Enhanced Navigation Buttons */
.nav-link-button {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.nav-link-button:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.nav-link-button:hover:before {
    left: 100%;
}

.nav-link-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(188, 73, 60, 0.4);
}

/* Enhanced Section Buttons */
.section-register-button,
.section-ranking-button,
.section-community-button {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.section-register-button:hover,
.section-ranking-button:hover,
.section-community-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.section-register-button:before,
.section-ranking-button:before,
.section-community-button:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    transition: all 0.6s ease;
    transform: translate(-50%, -50%);
}

.section-register-button:hover:before,
.section-ranking-button:hover:before,
.section-community-button:hover:before {
    width: 300px;
    height: 300px;
}

/* ============================================
   PANEL & CARD ENHANCEMENTS
   ============================================ */

/* Enhanced News Cards */
.news-slider-panel {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

.news-slider-panel:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

.news-slider-panel:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(188, 73, 60, 0.1), rgba(188, 73, 60, 0.05));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.news-slider-panel:hover:after {
    opacity: 1;
}

/* Enhanced News Button */
.news-button {
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.news-button:hover {
    transform: scale(1.05);
    background: linear-gradient(135deg, #f8f8f8, #ffffff);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Enhanced Panel */
.panel {
    transition: all 0.3s ease;
}

.panel:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

/* ============================================
   NAVIGATION ENHANCEMENTS
   ============================================ */

/* Enhanced Navbar */
#navbar {
    transition: all 0.3s ease;
}

#navbar .nav-link {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

#navbar .nav-link:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #bc493c, #e05747);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

#navbar .nav-link:hover:before {
    width: 80%;
}

#navbar .nav-link:hover {
    transform: translateY(-2px);
}

/* ============================================
   STATISTICS SECTION ENHANCEMENTS
   ============================================ */

/* Enhanced Statistics Cards */
.section-stats [class*="col-"] {
    transition: all 0.3s ease;
}

.section-stats [class*="col-"]:hover {
    transform: translateY(-5px);
}

.section-stats [class*="col-"]:hover h4 {
    color: #f7d991;
    transition: color 0.3s ease;
}

/* Enhanced Statistics Bars */
.section-stats-bar {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.section-stats-bar:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 1s ease;
}

.section-stats [class*="col-"]:hover .section-stats-bar:before {
    left: 100%;
}

/* ============================================
   SERVER STATUS ENHANCEMENTS
   ============================================ */

/* Enhanced Server Status */
.server-channel-box {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border-radius: 15px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
}

.server-channel-box:hover {
    transform: translateY(-5px) scale(1.05);
    background: rgba(255,255,255,0.2);
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}

/* Online Status Animation */
.server-status-online {
    position: relative;
    animation: pulse-online 2s infinite;
}

@keyframes pulse-online {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

.server-status-offline {
    position: relative;
    animation: pulse-offline 2s infinite;
}

@keyframes pulse-offline {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* ============================================
   RANKING SECTION ENHANCEMENTS
   ============================================ */

/* Enhanced Ranking Navigation */
.section-ranking-nav .nav-link {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.section-ranking-nav .nav-link:hover {
    transform: translateY(-5px);
}

.section-ranking-nav .nav-link:before {
    transition: all 0.3s ease;
}

.section-ranking-nav .nav-link:hover:before {
    transform: scale(1.1);
    filter: brightness(120%);
}

/* Enhanced Ranking Panel */
.section-ranking-panel {
    transition: all 0.3s ease;
}

.section-ranking-panel:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
}

.section-ranking-character-button {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.section-ranking-character-button:hover {
    transform: scale(1.05);
}

/* ============================================
   LANGUAGE SWITCHER ENHANCEMENTS
   ============================================ */

/* Enhanced Language Switcher */
.current-language img {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.current-language:hover img {
    transform: scale(1.2) rotate(5deg);
    filter: brightness(110%);
}

.language-dropdown ul li a {
    transition: all 0.3s ease;
    border-radius: 8px;
    margin: 2px 0;
}

.language-dropdown ul li a:hover {
    transform: translateX(5px);
    background: linear-gradient(90deg, rgba(255,255,255,0.2), rgba(255,255,255,0.1));
}

/* ============================================
   DISCORD WIDGET ENHANCEMENTS
   ============================================ */

/* Enhanced Discord Widget */
.discord-widget {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 15px;
    overflow: hidden;
}

.discord-widget:hover {
    transform: scale(1.1) translateY(-5px);
    filter: brightness(110%);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

/* ============================================
   FOOTER ENHANCEMENTS
   ============================================ */

/* Enhanced Footer Navigation */
.footer-nav a {
    transition: all 0.3s ease;
    position: relative;
}

.footer-nav a:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: #bc493c;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.footer-nav a:hover:before {
    width: 80%;
}

.footer-nav a:hover {
    transform: translateY(-2px);
}

/* Enhanced Social Icons */
.footer-social a {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-social a:hover {
    transform: translateY(-3px) scale(1.2);
    box-shadow: 0 5px 15px rgba(76, 76, 76, 0.5);
}

/* ============================================
   GENERAL ENHANCEMENTS
   ============================================ */

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Enhanced Focus States */
*:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(188, 73, 60, 0.3);
}

/* Enhanced Text Selection */
::selection {
    background: rgba(188, 73, 60, 0.2);
    color: #333;
}

/* Loading Animation for Dynamic Content */
.loading {
    position: relative;
}

.loading:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #bc493c;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Enhanced Hover Effects for Interactive Elements */
a, button, [role="button"] {
    transition: all 0.3s ease;
}

/* Floating Animation for Key Elements */
.floating {
    animation: floating 3s ease-in-out infinite;
}

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

/* Gradient Text Effects */
.gradient-text {
    background: linear-gradient(135deg, #bc493c, #e05747, #f7d991);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-animation 3s ease infinite;
}

@keyframes gradient-animation {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ============================================
   RESPONSIVE ENHANCEMENTS
   ============================================ */

/* Mobile Optimizations */
@media (max-width: 768px) {
    .nav-link-button:hover,
    .section-register-button:hover,
    .section-ranking-button:hover,
    .section-community-button:hover {
        transform: none;
        box-shadow: none;
    }
    
    .news-slider-panel:hover {
        transform: none;
        box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    }
    
    .server-channel-box:hover {
        transform: translateY(-2px);
    }
}

/* Reduced Motion for Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}