/*
Theme Name: Guide Animal Crossing: New Horizons
Template:   twentytwentyfour
Author: Maxime de Billy
Author URI: https://wordpress.org
Description: Thème personnalisé pour le site Guide A.C.N.H. Modifications: hover des boutons pleins, date dans le footer et message de bienvenue centrés, hover du logo, hover du titre du site. Animations sur le logo, les images d'entête dans la page activités, outils et à propos, le message de bienvenue.
Version: 1
*/

/* statiques */
.bouton-plein a:hover{
    background-color: #6FD182;
    color: #f8f8f0;
    transition: all ease-out 0.2s;
}

.bouton-contour a:hover{
    background-color:none;
    color: #6FD182;
    border-color: #6FD182;
    transition: all ease-out 0.2s;
    /* pour une raison obscure ça ne fonctionne pas */
}

.date-actuelle{
    text-align: center;
}

.bienvenue{
    text-align: center;
}

img.custom-logo:hover{
    transition: all ease-out 0.2s;
    transform: scale(1.1);
}

.wp-block-site-title:hover a{
    color: #81f1f7;
    transition: all ease-out 0.2s;
}


/* animations */
img.wp-image-92, img.wp-image-136{
    animation: img-fade-scale 0.3s ease-in;
}

img.custom-logo{
    animation: 0.3s logo-scale ease-in;
}

.img-outils img{
    animation: 0.8s image-slide cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

img.wp-image-224{
    animation: 2s image-loop infinite linear;
}

.bienvenue{
    animation: titre-scale 0.5s ease-out;
}

@keyframes img-fade-scale {
    0%{
        transform: scale(0.5);
        opacity: 0;
    }

    100%{
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes image-loop{
    0%{
        transform: scale(1);
    }

    25%{
        transform: scale(1.03);
    }

    75%{
        transform: scale(0.98);
    }

    100%{
        transform: scale(1);
    }
}

@keyframes logo-scale{
    0%{
        transform: scale(1);
    }

    50%{
        transform: scale(1.25);
    }

    100%{
        transform: scale(1);
    }
}

@keyframes titre-scale{
    0%{
        transform: scale(1);
    }

    50%{
        transform: scale(1.1);
    }

    100%{
        transform: scale(1);
    }
}

@keyframes image-slide {
    0%{
        transform: translateX(1000px);
    }

    100%{
        transform: translateX(0);
    }
}