/**
 * Styles pour l'effet de scroll sur la navbar - EarthKingdoms
 * Animation fluide de réduction et ombre
 */

/* Header par défaut */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}

/* Light mode: navbar transparente par défaut */
.light-theme .header {
    background: transparent;
    box-shadow: none;
}

/* Light mode: navbar visible au scroll */
.light-theme .header.scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Light mode: texte blanc dans la navbar (non scrollée) */
.light-theme .header:not(.scrolled) .nav-link {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.light-theme .header:not(.scrolled) .nav-link:hover,
.light-theme .header:not(.scrolled) .nav-link.active {
    color: var(--primary-color) !important;
}

.light-theme .header:not(.scrolled) .logo span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Light mode scrollé: texte sombre sur fond blanc */
.light-theme .header.scrolled .nav-link {
    color: rgba(0, 0, 0, 0.8) !important;
    text-shadow: none;
}

.light-theme .header.scrolled .nav-link:hover,
.light-theme .header.scrolled .nav-link.active {
    color: var(--primary-color) !important;
}

.light-theme .header.scrolled .logo span {
    color: #1a1a1a !important;
    -webkit-text-fill-color: #1a1a1a !important;
    text-shadow: none;
}

/* Navbar */
.navbar {
    padding: 1rem 0;
    transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* État scrollé : navbar compacte avec ombre */
.header.scrolled {
    background: rgba(15, 20, 16, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3),
                0 0 40px rgba(236, 150, 0, 0.15);
    border-bottom-color: rgba(236, 150, 0, 0.3);
}

.header.scrolled .light-theme {

    color: rgb(255, 255, 255);

}

.header.scrolled .navbar {
    padding: 0.75rem 0;  /* Réduction minimale pour éviter trop de mouvement */
}

/* Logo : pas de changement de taille pour éviter mouvement */
.header.scrolled .logo img {
    /* Supprimé : le logo garde sa taille pour éviter trop de mouvement */
}

/* Liens nav : pas de changement pour éviter mouvement */
.header.scrolled .nav-link {
    /* Supprimé : les liens gardent leur padding pour éviter trop de mouvement */
}

/* État caché (optionnel, désactivé par défaut) */
.header.hidden {
    transform: translateY(-100%);
    box-shadow: none;
}

/* Animation smooth pour le retour */
.header:not(.hidden) {
    transform: translateY(0);
}

/* Effet de glow sur le logo au scroll */
.header.scrolled .logo {
    position: relative;
}

.header.scrolled .logo::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(-50%);
    background: radial-gradient(circle, rgba(236, 150, 0, 0.1) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0;
    animation: logo-glow 3s ease-in-out infinite;
}

@keyframes logo-glow {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

/* Effet hover sur les liens quand scrollé */
.header.scrolled .nav-link {
    position: relative;
}

.header.scrolled .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transform: translateX(-50%);
    transition: width 0.3s ease;
}

.header.scrolled .nav-link:hover::after,
.header.scrolled .nav-link.active::after {
    width: 80%;
}

/* Bouton dark mode : pas de changement pour éviter mouvement */
.header.scrolled .theme-toggle-btn {
    /* Supprimé : le bouton garde sa taille pour éviter trop de mouvement */
}

/* Responsive */
@media (max-width: 768px) {
    .navbar {
        padding: 1rem 0;
    }

    .header.scrolled .navbar {
        padding: 0.5rem 0;
    }

    .header.scrolled .logo img {
        height: 28px !important;  /* Encore plus petit sur mobile */
    }

    /* Menu mobile : pas d'effet de réduction */
    .header.scrolled .nav-menu {
        padding-top: 1rem;
    }
}

/* Animation d'entrée au chargement */
@keyframes header-slide-in {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.header {
    animation: header-slide-in 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Effet de ligne lumineuse en bas de la navbar */
.header.scrolled::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--primary-color) 50%,
        transparent 100%);
    transform: translateX(-50%);
    transition: width 0.6s ease;
}

.header.scrolled::after {
    width: 200px;
}

/* Performance : force GPU acceleration */
.header,
.navbar,
.logo,
.nav-link {
    will-change: transform, padding;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Désactiver will-change après animation pour économiser ressources */
.header:not(.scrolled) {
    will-change: auto;
}