a.logo-link:hover .portal-portal {
  animation:
    headBang 0.3s infinite,
    rainbowSwirl 1s infinite,
    screenshake 0.1s infinite;
  text-shadow:
    0 0 5px #ff0000,
    0 0 10px #00ff00,
    0 0 15px #0000ff,
    0 0 20px #ffff00,
    0 0 25px #ff00ff;
}

@keyframes headBang {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

@keyframes rainbowSwirl {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

@keyframes screenshake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px) rotateZ(-1deg); }
  75% { transform: translateX(2px) rotateZ(1deg); }
}

/* Don't forget the sound effects! */
a.logo-link:hover::after {
  content: '🦜';
  position: absolute;
  animation: partyParrot 0.5s infinite;
  transform: translate(-50%, -50%);
  font-size: 1.5em;
  animation: partyParrot 0.3s ease-in-out infinite alternate;
  pointer-events: none;
  top: 19px;
  right: 20px;
}

@keyframes partyParrot {
  0% {
    transform: translate(-50%, -50%) rotate(-15deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(15deg);
  }
}

/* Alternative: More aggressive head banging */
@keyframes partyParrotHard {
  0% { transform: translate(-50%, -50%) rotate(-15deg) scale(1); }
  50% { transform: translate(-50%, -50%) rotate(0deg) scale(1.1); }
  100% { transform: translate(-50%, -50%) rotate(15deg) scale(1); }
}

/* BONUS: Add some bounce! */
@keyframes partyParrotBounce {
  0% {
    transform: translate(-50%, -50%) rotate(-15deg) translateY(0px);
  }
  50% {
    transform: translate(-50%, -50%) rotate(0deg) translateY(-3px);
  }
  100% {
    transform: translate(-50%, -50%) rotate(15deg) translateY(0px);
  }
}
