/**
 * Theme Name: Grand Sunrise
 * Template:   twentytwentyfour
*/


/* ACCUEIL HERO CHANGEMENT DU MOT */

#hero-emphase::before { 
    content: "STYLE"; 
    animation: animate infinite 3s; 
    padding: 10px; 
} 

@keyframes animate { 

    0% { 
        content: "STYLE"; 
    } 
    50% { 
        content: "FORCE"; 
    } 
    75% { 
        content: "CLASSE"; 
    } 
}


/* ACCUEIL HERO CHANGEMENT DE COULEUR DU MOT */

#hero-emphase { 
    animation: typoChange 2s ease-in-out infinite;
} 

@keyframes typoChange { 
    0% { 
        color: #F28F38;
    } 
    25% { 
        color: #F2C879;
    }   
    50% { 
        color: #F28F38;
    } 
    75% { 
        color: #F2C879;
    } 
} 

#image-hero {
    animation: tangue 1s ease-in-out;
}

@keyframes tangue {
    0% {
        transform: translateY(-1rem);
    }
    50% {
        transform: translateY(1rem);
    }
    75% {
        transform: translateY(-1rem);
    }
    100% {
        transform: translateY(0rem);
    }
}


/* ACCUEIL BOUTONS */
#accueil_bouton1, #accueil_bouton2 {
    animation: apparaitre 2.5s ease-in-out .5s;
}

@keyframes apparaitre {
    0% {
        opacity: .5;
    }
    100% {
        opacity: 1;
    }
}


/* ANIMATION TITRE H2 */
h2 {
    animation: bounceIn 2s ease-in-out;
}

@keyframes bounceIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


/* BANDE DES LOGOS PAGE ACCUEIL */
#bande-logos {
    animation: slideIn 2s ease-in-out .5s;
}

@keyframes slideIn {
    from {
        margin-left: -100%;
        width: 300%; 
    }

    to {
        margin-left: 0%;
        width: 100%;
    }
}


/* PAGE À PROPOS HERO - MOT EMPHASE */
/*À PROPOS HERO | CHANGEMENT DE COULEUR DU MOT */
#apropos-emphase { 
    animation: typoChange 2s ease-in-out infinite;
} 

@keyframes typoChange { 
    0% { 
        /* font-family: "DM Sans", sans-serif; */
        color: #F28F38;
    } 
    25% { 
        /* font-family: "Noto Sans Display", sans-serif; */
        color: #F2C879;
    }   
    50% { 
        /* font-family: "DM Sans", sans-serif; */
        color: #F28F38;
    } 
    75% { 
        /* font-family: "Noto Sans Display", sans-serif; */
        color: #F2C879;
    } 
} 

/* À PROPOS HERO | CHANGEMENT DU MOT */

#apropos-emphase::before { 
    content: "aventure"; 
    animation: animate_word infinite 4s; 
    padding-left: 10px; 
} 

@keyframes animate_word { 

    0% { 
        content: "aventure"; 
    } 

    50% { 
        content: "amitié"; 
    } 

    75% { 
        content: "histoire"; 
    } 
}