/* ==========================================================================
   Effets de chargement pour les headers de type "hero" (header.cover)
   ========================================================================== */

/* État initial - textes de l'accroche cachés */
header.cover .accroche {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* État initial - icône Font Awesome cachée */
.hero-image::after {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* État final - textes de l'accroche visibles (quand tout est prêt) */
html.hero-ready header.cover .accroche,
html.fonts-fallback header.cover .accroche {
    opacity: 1;
    transform: translateY(0);
}

/* État final - icône Font Awesome visible (quand tout est prêt) */
html.hero-ready .hero-image::after,
html.fonts-fallback .hero-image::after {
    opacity: 1;
    transform: translateY(0);
}

/* Effets de navigation uniquement sur desktop (400px+) où la nav est visible */
@media (min-width: 500px) {

    /* État initial - navigation cachée (uniquement pour header.cover) */
    header.cover #site-navigation.main-navigation {
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }

    /* État final - navigation visible (quand tout est prêt) */
    html.hero-ready header.cover #site-navigation.main-navigation,
    html.fonts-fallback header.cover #site-navigation.main-navigation {
        opacity: 1;
        transform: translateY(0);
    }

    /* Effet sur les liens individuels de navigation (uniquement pour header.cover) */
    header.cover #site-navigation .nav-menu li {
        transform: translateY(-5px);
        transition: transform 0.6s ease-out;
        transition-delay: 0.1s;
    }

    html.hero-ready header.cover #site-navigation .nav-menu li,
    html.fonts-fallback header.cover #site-navigation .nav-menu li {
        transform: translateY(0);
    }

    /* Effet cascade sur les éléments de menu (quand tout est prêt) */
    html.hero-ready header.cover #site-navigation .nav-menu li:nth-child(1) {
        transition-delay: 0.2s;
    }

    html.hero-ready header.cover #site-navigation .nav-menu li:nth-child(2) {
        transition-delay: 0.3s;
    }

    html.hero-ready header.cover #site-navigation .nav-menu li:nth-child(3) {
        transition-delay: 0.4s;
    }

    html.hero-ready header.cover #site-navigation .nav-menu li:nth-child(4) {
        transition-delay: 0.5s;
    }
}