/* General Styles for Logo */
.logo {
  position: relative;
  display: inline-block;
  font-family: 'Arial', sans-serif;
  font-size: 2.5rem;
  font-weight: bold;
  color: #fff; /* White for background */
  text-transform: uppercase;
  cursor: pointer;
  perspective: 500px; /* For 3D effect */
}

.logo span {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  transition: transform 0.5s ease, text-shadow 0.5s ease;
}

/* Front Text (Bam) */
.logo .front {
  color: #446381; /* Primary color */
  transform: translateZ(20px); /* Push the front forward */
  text-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}

/* Middle Text (Artiste) */
.logo .middle {
  color: #58749f; /* Slightly lighter tone of blue */
  transform: translateZ(10px); /* Push middle slightly back */
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

/* Hover Interaction */
.logo:hover .front {
  transform: translateZ(30px) rotateX(10deg) rotateY(10deg);
  text-shadow: 0 10px 15px rgba(0, 0, 0, 0.4);
}

.logo:hover .middle {
  transform: translateZ(15px) rotateX(-10deg) rotateY(-10deg);
  text-shadow: 0 7px 12px rgba(0, 0, 0, 0.3);
}