.diamond {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 15%;
  transform: rotate(45deg);
}

.spin {
  width: 100%;
  height: 100%;
  animation: spin 2s linear infinite;
}

.shimmer {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
  opacity: 0;
  animation:
    fade-in-out 3s ease,
    slide-up 3s linear;
}

@keyframes fade-in-out {
  50% {
    opacity: 1;
  }
}

@keyframes slide-up {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-30px);
  }
}

@keyframes spin {
  0% {
    transform: rotate3d(0, 1, 0, var(--spin-initial-angle, 0deg));
  }

  100% {
    transform: rotate3d(
      0,
      1,
      0,
      calc(var(--spin-initial-angle, 0deg) + 180deg)
    );
  }
}

@media (prefers-reduced-motion) {
  #background-effects {
    display: none;
  }
}