.home-scene {
  position: relative;
  perspective: 1200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-3d {
    margin-top: 60px;
  position: relative;
  width: clamp(120px, 20vw, 220px);
  height: clamp(120px, 20vw, 220px);

  transform-style: preserve-3d;
  animation: rotateCarousel 24s linear infinite;
}
.carousel-item::before {
  content: "";
  position: absolute;
  inset: 0;

  background: radial-gradient(
    circle,
    rgba(0,0,0,0.25),50%
    transparent 70%
  );

  filter: blur(10px);
}

.carousel-item {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.item-shadow {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%) rotateX(90deg);

  width: 85%;
  height: 18px;

  background: radial-gradient(
    ellipse,
    rgba(0,0,0,0.35),
    transparent 70%
  );

  filter: blur(8px);
  opacity: 0.6;

  pointer-events: none;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.carousel-item:nth-child(1) { transform: rotateY(0deg) translateZ(clamp(180px, 26vw, 420px)); }
.carousel-item:nth-child(2) { transform: rotateY(72deg) translateZ(clamp(180px, 26vw, 420px)); }
.carousel-item:nth-child(3) { transform: rotateY(144deg) translateZ(clamp(180px, 26vw, 420px)); }
.carousel-item:nth-child(4) { transform: rotateY(216deg) translateZ(clamp(180px, 26vw, 420px)); }
.carousel-item:nth-child(5) { transform: rotateY(288deg) translateZ(clamp(180px, 26vw, 420px)); }


@keyframes rotateCarousel {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}