body {
  background: transparent;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#logo-container {
  width: 300px;
  height: 250px;
  position: relative;
  perspective: 1000px;
}


.part {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.4s ease;
  transform-origin: center center;
}

/* POSICIONAMENTO ESTÁTICO INICIAL */
#e { transform: translateX(5px); }
#n { transform: translate(10px, 10px); }

/* ESTADOS ANIMADOS */
.show-s {
  animation: spin-slide 3s ease-in-out forwards, seGroupWiggle 4s ease-in-out 3.1s infinite;
}
.show-e {
  opacity: 1;
  animation: bounceIn 0.6s ease-out forwards, seGroupWiggle 4s ease-in-out 3.1s infinite;
}
.show-n {
  opacity: 1;
  animation: nPop 0.5s ease-out forwards, seGroupWiggle 4s ease-in-out 3.1s infinite;
}
.show-acento {
  opacity: 1;
  animation: acentoDrop 0.8s ease-out forwards, acentoWiggle 2s ease-in-out 0.8s infinite;
}
.show-play {
  opacity: 1;
  animation: playPop 0.7s ease-in-out forwards, playMovePulse 6s ease-in-out 3.0s infinite;
}

/* ANIMAÇÕES */
@keyframes spin-slide {
  0% { transform: translateX(60px) translateY(30px) rotate(0deg) scale(0.6); opacity: 0; }
  40% { transform: translateX(30px) translateY(10px) rotate(180deg) scale(1.05); opacity: 1; }
  100% { transform: translateX(0px) translateY(-5px) rotate(360deg) scale(1); opacity: 1; }
}

@keyframes bounceIn {
  0% { transform: scale(0.3) translateY(-50px); opacity: 0; }
  60% { transform: scale(1.1) translateY(10px); opacity: 1; }
  100% { transform: scale(1.0) translateY(-5px); }
}

@keyframes nPop {
  0% { transform: translate(30px, 30px) scale(0.6) rotate(-10deg); opacity: 0; }
  50% { transform: translate(5px, -5px) scale(1.1) rotate(2deg); opacity: 1; }
  100% { transform: translate(0px, -5px) scale(1) rotate(0deg); }
}

@keyframes acentoDrop {
  0% { transform: translateY(-60px) rotate(-90deg) scale(0.4); opacity: 0; }
  70% { transform: translateY(10px) rotate(10deg) scale(1.1); opacity: 1; }
  100% { transform: translateY(-5px) rotate(0deg) scale(1); }
}

@keyframes acentoWiggle {
  0%, 100% { transform: translateY(-5px) rotate(0deg) scale(1); }
  25% { transform: translateY(-5px) rotate(1deg) scale(1.02); }
  75% { transform: translateY(-5px) rotate(-1.2deg) scale(0.98); }
}

@keyframes seGroupWiggle {
  0%, 50%, 100% { transform: translate(0, -5px) rotate(0deg); }
  25% { transform: translate(0, -5px) rotate(0.5deg); }
  75% { transform: translate(0, -5px) rotate(-0.5deg); }
}

@keyframes playMovePulse {
  0%, 50%, 100% { transform: scale(1.05) translateY(0px) translateX(0); }
  25% { transform: scale(1.07) translateY(0px) translateX(2px); }
  75% { transform: scale(1.03) translateY(0px) translateX(-1.5px); }
}

@keyframes playPop {
  0% { transform: scale(0.4) translateY(50px); opacity: 0; }
  60% { transform: scale(1.15) translateY(-10px); opacity: 1; }
  100% { transform: scale(1.05) translateY(0px); }
}