@keyframes spin3d {
  0% { transform: perspective(500px) rotateY(0deg) rotateX(5deg); }
  12.5% { transform: perspective(500px) rotateY(45deg) rotateX(5deg) scaleX(0.85); }
  25% { transform: perspective(500px) rotateY(90deg) rotateX(5deg) scaleX(0.15); }
  37.5% { transform: perspective(500px) rotateY(135deg) rotateX(5deg) scaleX(0.85); }
  50% { transform: perspective(500px) rotateY(180deg) rotateX(5deg); }
  62.5% { transform: perspective(500px) rotateY(225deg) rotateX(5deg) scaleX(0.85); }
  75% { transform: perspective(500px) rotateY(270deg) rotateX(5deg) scaleX(0.15); }
  87.5% { transform: perspective(500px) rotateY(315deg) rotateX(5deg) scaleX(0.85); }
  100% { transform: perspective(500px) rotateY(360deg) rotateX(5deg); }
}

.logo-spin-3d {
  animation: spin3d 3.5s ease-in-out infinite;
  transform-style: preserve-3d;
}

@keyframes brickDrop {
  0% { opacity: 0; transform: translateY(-15px) scale(0.5); }
  60% { opacity: 1; transform: translateY(2px) scale(1.05); }
  80% { transform: translateY(-1px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes brickColorReveal {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.logo-brick {
  opacity: 0;
  animation: brickDrop 0.3s ease-out forwards;
}

.logo-brick-colors {
  opacity: 0;
  animation: brickColorReveal 0.8s ease-in-out forwards;
}