/*
Theme Name: Broken Sounds Records
Template:   twentytwentyfour
Author : Alexandre Thouin-Peltier
Description : C'est un child theme de Twenty Twenty-Four où le style de base a été modifié à l'aide d'une palette de couleur et des animations personnalisées.
Version : 1.0
*/
@import url("../twentytwentyfour/style.css");

/* CSS : Filtre Photos Équipe */
.img-equipe {
    filter: grayscale(1);
}

/* CSS : Séparateurs */
.wp-block-separator {
    height: 6px;
    border-radius: 3px;
}

/* CSS : Couleurs h2 Footer */
.wp-block-site-tagline {
    color: #3D79F2;
}

.h2-sections {
    color: #5FD93D;
}

.h2-social {
    color: #F24444;
}

/* Animation : Pulsation du logo */
.wp-block-site-logo:hover {
    animation: pulses 1s infinite;
}

/* Animation : Scale buttons on hover */
.wp-block-button a {
    transition: .2s ease-in-out;
}

.wp-block-button a:hover {

    transform: scale(1.05);
}

/* Animation : Couleurs Herobanner &
    CSS : Couleurs .herobox*/
.herobox {
    background: radial-gradient(circle, #F24444, #3D79F2, #5FD93D);
    background-size: 200% 200%;
    animation: gemini 30s ease-in-out infinite;
}

/* Animation : Couleurs Texte-points &
    CSS : Couleurs texte-points */
.texte-points code,
.separateur-couleurs {
    background: radial-gradient(circle, #3D79F2, #5FD93D, #F24444 70%);
    background-clip: text;
    color: transparent;
    background-size: 200% 200%;
    animation: gemini 15s ease-in-out infinite;
}

/* Animation : Ease-in-out Herobanner */
.accueil {
    animation: opacity-ease-out 2s ease-in-out;
}

/* Keyframes - Animation Gimini */
@keyframes gemini {
    0%{
        background-position: 0% 0%;
    }

    50%{
        background-position: 100% 100%;
    }

    100%{
        background-position: 0% 0%;
    }
}

/* Keyframes - Ease-in-out banner */
@keyframes opacity-ease-out {
    0%{
        opacity: 0;
    }

    100%{
        opacity: 1;
    }
}

@keyframes pulses {
    0% {
        transform: scale(1);
    }
    10% {
        transform: scale(1.05);
    }
    20% {
        transform: scale(0.95);
    }
    30% {
        transform: scale(1.1);
    }
    40% {
        transform: scale(0.9);
    }
    50% {
        transform: scale(1.05);
    }
    60% {
        transform: scale(0.95);
    }
    70% {
        transform: scale(1.1);
    }
    80% {
        transform: scale(0.9);
    }
    90% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}