/**
 * Theme Name: Aniflix
 * Template:   twentytwentyfour
 * Description:
 * Author: Julien
 * Version 1.00
*/



/* Animation 1 dynamique de rotation3D du logo dans le header */
@keyframes spin {
   from {
      transform: rotate3d(1, 0, 1, 0deg);
   }

   to {
      transform: rotate3d(1, 0, 1, 360deg);
   }
}
.logo-spin {
   animation: spin 5s infinite linear;
}



/* Animation 2 dynamique de grossissement de l'infolettre */
@keyframes grow-shrink {

   0%,
   100% {
      transform: scale(.8);
   }

   50% {
      transform: scale(1);
   }
}
.sign-up {
   animation: grow-shrink 10s infinite;
}



/* Animation 3 dynamique de scale sur l'axe des x sur les separateurs */
@keyframes expand-contract {
   0%,
   100% {
      transform: scaleX(0.8); 
   }

   50% {
      transform: scaleX(1.2);
   }
}
.separator {
   animation: expand-contract 15s ease-in-out infinite;
   transform-origin: center;
   display: block;
}



/* Animation 4 dynamique de changement de couleur pour tout mes titres d'anime */
@keyframes color-change {
   0% {
      color: rgb(255, 81, 0);
   }

   25% {
      color: rgb(214, 218, 20);
   }

   50% {
      color: rgb(70, 163, 16);
   }

   75% {
      color: rgb(151, 16, 204);
   }

   100% {
      color: rgb(255, 81, 0);
   }
}
.color-change {
   animation: color-change 5s infinite;
}



/* Animation 5 dynamique de déplacement hover vers le haut */
.image-hover {
   position: relative;
   overflow: hidden;
}

.image-hover img {
   transition: transform 0.3s ease-in-out;
}

.image-hover::after {
   content: "";
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(to top, rgba(0, 0, 0, 2) 0%, rgba(255, 255, 255, 0) 100%);
   transition: top 5s ease-in-out;
}

.image-hover:hover img {
   transform: translateY(-30px);
}

.image-hover:hover::after {
   top: 0;
}


/***********************************Animation statique*******************************************/


.titre-home {
   color: rgb(129, 10, 10);
   font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
   font-size: 200px
}


.ryuk-text{
   color: goldenrod;
}

.titre-aboutus {
   color: blueviolet;
}