/* animation pour changer le logo */
@keyframes logoChange {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}

/* logo par défaut */
.banner-wrap img {
  transition: opacity 0.3s ease;
}

/* au survol de The Character Series (categorie et menu) */
.category.blue-neon:hover .banner-wrap img,
.menu-box li a[href="the-character-series.html"]:hover .banner-wrap img {
  content: url('../../-footage-/banner-and-logos/THE-CHARACTER-SERIES-LOGO.png');
  animation: logoChange 0.5s forwards;
}

/* au survol de The World of Eisth (categorie et menu) */
.category.pink-neon:hover .banner-wrap img,
.menu-box li a[href="the-world-of-eisth.html"]:hover .banner-wrap img {
  content: url('../../-footage-/banner-and-logos/THE-WORLD-OF-EISTH-LOGO.png');
  animation: logoChange 0.5s forwards;
}

/* retour au logo principal (au départ et au sortie) */
.category.blue-neon:hover .banner-wrap img,
.category.pink-neon:hover .banner-wrap img {
  content: url('../../-footage-/banner-and-logos/MAIN-LOGO.png');
  animation: none;
}