/***************************************************************
Pièce - Fazcoins
*****************************************************************/

.coin-cointainer {

    margin: 40px 75px;
    perspective: 1000px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 6px solid #595959;
    transform: rotateZ(7deg) scaleX(0.7) scaleY(0.7);
    /*flex-wrap: wrap;
    flex-direction: column;
    align-items: center;*/
}

.fazcoin {
    position: absolute !important;
    width: 100px !important;
    height: 100px !important;
    border-radius: 5rem !important;
    background: rgba(215, 154, 16, 1) !important;
    font-size: 100px !important;
    font-family: "Arial";
    color: #fff;
    text-align: center;
}

.coin {
    position: relative;
    top: -165px;
    right: 62px;
    z-index: 45;
}

.one {
    transform: translateZ(75px) !important;
}

.two {
    transform: translateZ(76px) !important;
}

.three {
    transform: translateZ(77px) !important;
}

.four {
    transform: translateZ(78px) !important;
}

.five {
    transform: translateZ(79px) !important;
}

.sixe {
    transform: translateZ(80px) !important;
}

.seven {
    transform: translateZ(81px) !important;
}

.eight {
    transform: translateZ(82px) !important;
}

.nine {
    transform: translateZ(83px) !important;
}

.coin {
    animation-name: rotation;
    animation-delay: 1s;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
    transform-style: preserve-3d;
    transform-origin: 75px 75px 0;
}

@keyframes rotation {
    0% {
        transform: rotateY(0deg) rotateY(0deg);
    }

    100% {
        transform: rotateY(360deg) rotateZ(360deg);
    }
}

.piece {
    opacity: 0.7;
    width: 100%;
    vertical-align: super;
}


.coin:hover {
    animation-play-state: paused;
}

.coin-container-pic {
    display: flex;
    justify-content: center;
}

.pic-fazcoin {
    border: 8px solid #464646;
    box-shadow: rgba(47, 47, 47, 0.3) 0px 0px 0px 3px;
    transform: rotateZ(10deg) scaleX(0.7) scaleY(0.7);
}

.pic-fazcoin:hover {
    border: 8px solid rgb(215, 188, 55);
    transform: rotateZ(0deg) scaleX(1) scaleY(1);
    transition-property: transform;
    transition-duration: 2s;
    transition-delay: 0s;
    transition-timing-function: linear;
}


.coin-container-pic-3 {
    width: 25%;
}

.pic-fazcoin-3 {
    width: 80%;
    border: 5px solid #b2b2b2;
    margin: 1rem;
}

.fazforce {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.fazforce-container {
    transform: rotateZ(-7deg) scaleX(0.7) scaleY(0.7);
}

.fazforce-container:hover,
.coin-cointainer:hover {
    transform: rotateZ(0deg) scaleX(1) scaleY(1);
    transition-property: transform;
    transition-duration: 2s;
    transition-delay: 0s;
    transition-timing-function: ease;

}

/*************************************************************************
MINECRAFT + Carrée 3d
*************************************************************************/

.minecraft {
    background: url(https://www.pedagojeux.fr/wp-content/uploads/2019/11/article_minicraft.png);
    position: relative;
    overflow: visible;
    margin: 3rem 0rem;
    border-top: 7px solid #76AC4C;
    border-bottom: 7px solid #76AC4C;
    background-position: bottom;
    background-position-x: 600px;
}


.linear-gradient-3 {
    background: linear-gradient(124deg, #567d34 49%, #567d34 49%, #76AC4C 50%, rgba(0, 0, 0, 0) 50%);
}

.minecraft-container {
    display: flex;
    align-items: center;
    position: relative;
    justify-content: space-between;
}


.minecraft-right {
    flex: 0 0 45%;
    position: relative;
    z-index: 1;
}

.minecraft-bot {
    flex: 0 0 45%;
    position: relative;
    height: 275px;

}

.minecraft-text p {
    font-family: "Orbitron", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2rem;
    color: var(--white-color);
}

.button-minecraft {
    display: inline-block;
    padding: 1rem;
    background-color: #CF9A6E;
    color: var(--white-color);
    border-radius: 2rem;
    margin-top: 2rem;
    z-index: 1;
    border: 2px solid #CF9A6E;
}

.button-minecraft a {
    color: var(--white-color);
}

.button-minecraft:hover {
    display: inline-block;
    padding: 1rem;
    background-color: var(--white-color);
    color: #CF9A6E;
    border-radius: 2rem;
    margin-top: 2rem;
    z-index: 1;
    border: 2px solid #CF9A6E;
}

.conteneur {
    width: 200px;
    height: 200px;
    margin: 60px 170px;
    perspective: 1000px;
}

.face {
    position: absolute;
    width: 150px;
    height: 150px;
    font-size: 100px;
    font-family: "Arial";
    color: #fff;
    line-height: 150px;
    text-align: center;
}

.un {
    transform: translateZ(75px);
}

.deux {
    transform: rotateY(90deg) translateZ(75px);
}

.trois {
    transform: rotateY(90deg) rotateX(90deg) translateZ(75px);
}

.quatre {
    transform: rotateY(180deg) rotateZ(0deg) translateZ(75px);
}

.cinq {
    transform: rotateY(-90deg) rotateZ(0deg) translateZ(75px);
}

.six {
    transform: rotateX(-90deg) rotateZ(270deg) translateZ(75px);
}

.cube {
    animation-name: minecraft;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
    transform-style: preserve-3d;
    transform-origin: 75px 75px 0;
}

@keyframes minecraft {
    0% {
        transform: rotateX(-20deg) rotateY(360deg);
    }


    100% {
        transform: rotateX(-20deg) rotateY(0deg);
    }
}

.cube:hover {
    animation-play-state: paused;
}

.dirt,
.grass {
    width: 100%;
    vertical-align: baseline !important;
}

/* BOUTON MINECRAFT */

.button-minecraft {
    transition: transform 0.2s ease;
    transform-origin: center top;
}

.button-minecraft:hover {
    animation: swing 0.8s ease-in-out;
}

@keyframes swing {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(10deg);
    }

    50% {
        transform: rotate(-10deg);
    }

    75% {
        transform: rotate(5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/***************************************************************
Animation Texte - Personnages
*****************************************************************/
/*tuto youtube : https://www.youtube.com/watch?v=jOmOq_fICNA*/
/* Animation qui fait scintiller */
@keyframes simple-glow {

    0%,
    100% {
        text-shadow: 0 0 5px #ffbf00, 0 0 10px #ffbf00, 0 0 20px #ffbf00;
    }

    50% {
        text-shadow: 0 0 10px #ff4500, 0 0 20px #ff6347, 0 0 30px #ff4500;
    }
}

/* Texte animé */
.freddy-text {
    color: #eb6426;
    animation: simple-glow 1.5s infinite ease-in-out;
}

.freddy-text:hover {
    color: #ffbf00;
    text-shadow: 0 0 15px #ffbf00, 0 0 25px #ffd700, 0 0 35px #ffbf00;
}

/************** PERSONNAGE 2 - ANIMATION 2 *************************/

/* tuto youtube ( https://www.youtube.com/watch?v=jOmOq_fICNA ) + cours */

/* Animation de mouvement de droite à gauche */
@keyframes balancement-horizontal {
    0% {
        transform: translateY(-25px);
    }

    50% {
        transform: translateY(25px);
    }

    100% {
        transform: translateY(-25px);
    }
}

/* Animation qui fait scintiller */
@keyframes scintillement {

    0%,
    100% {
        text-shadow: 0 0 5px #61f653, 0 0 10px #61f653, 0 0 20px #61f653;
    }

    50% {
        text-shadow: 0 0 10px #db26eb, 0 0 20px #db26eb, 0 0 30px #db26eb;
    }
}

/* Texte animé */
.monty-text {
    display: inline-block;
    /* Nécessaire pour appliquer la transformation */
    letter-spacing: 2px;
    animation:
        balancement-horizontal 2s ease-in-out infinite,
        /* Animation de mouvement horizontal */
        scintillement 1.5s ease-in-out infinite;
    /* Animation de scintillement */
}

/* Effet au survol */
.monty-text:hover {
    animation: none;
    /* Stoppe le mouvement et le scintillement pour une meilleure lisibilité */
    transform: scale(1.1);
    /* Zoom léger au survol */
}

/******************** PERSO 3 - ANIMATION 3 ***************************************/
.chica-text {
    color: white;
    position: relative;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    animation: brillance 2s ease-in-out infinite;
}

.chica-text::before {
    content: "Glamrock Chica";
    position: absolute;
    top: 0;
    left: -100%;
    color: #FF308F;
    animation: typing 5s steps(20) infinite;
}

@keyframes typing {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
        /* Le texte se déplace complètement vers la droite et recommence */
    }
}

@keyframes brillance {

    0%,
    100% {
        text-shadow: 0 0 5px #FF308F, 0 0 10px #FF308F, 0 0 20px #FF308F;
    }

    50% {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff;
    }
}

.chica-text:hover {
    animation: none;
    transform: scale(1.1);
}

/*********************************** PERSONNAGE 4 : ANIMATION 4 *****************************/


.roxy-text {
    color: white;
    position: relative;
    display: inline-block;
    animation: vibration 2s cubic-bezier(0.25, 0.8, 0.25, 1) infinite,
        scintillement 1.5s ease-in-out infinite;
}

@keyframes vibration {
    0% {
        transform: translateX(0);
    }

    10% {
        transform: translateX(-5px);
        /* Déplacement léger vers la gauche */
    }

    20% {
        transform: translateX(5px);
        /* Déplacement léger vers la droite */
    }

    30% {
        transform: translateX(-5px);
        /* Retour vers la gauche */
    }

    40% {
        transform: translateX(5px);
        /* Retour vers la droite */
    }

    50% {
        transform: translateX(0);
        /* Retour à la position initiale */
    }

    100% {
        transform: translateX(0);
        /* Assure que le texte termine au même endroit */
    }
}


@keyframes scintillement {

    0%,
    100% {
        text-shadow: 0 0 5px #9316b2, 0 0 10px #9316b2, 0 0 20px #9316b2;
    }

    50% {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff;
    }
}

/*** BOUTON télécharger carte ****/

.bouton-containr {
    animation: brille 1.5s infinite ease-in-out;
}

@keyframes brille {

    0%,
    100% {
        text-shadow: 0 0 5px #03d9ff, 0 0 10px #03d9ff, 0 0 20px #03d9ff;
    }

    50% {
        text-shadow: 0 0 10px #ffff, 0 0 20px #ffff, 0 0 30px #ffff;
    }
}

/***** Bouton "laisser vos enfants s'amuser ***/

.button-1 {
    animation: moveLeftRight 2s ease-in-out infinite;
    /* Animation aller-retour */
}

@keyframes moveLeftRight {

    0%,
    100% {
        transform: translateX(0);
        /* Position initiale */
    }

    50% {
        transform: translateX(50px);
        /* Déplacement à droite */
    }
}

/***************************************************************
HEADER
***************************************************************/

.header-logo {
    transform: rotateZ(0deg);

}

.header-logo:hover {
    transform: rotateZ(360deg);
    transition-property: transform;
    transition-duration: 2s;
    transition-delay: 0s;
    transition-timing-function: linear;
}


/***************************************************************
FOOTER
***************************************************************/

.footer-image img {
    animation: footer 5s ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes footer {

    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(360deg);
    }

}