<div class="scd-spiral">
  <div class="scd-spiral__stage">
    <div class="scd-spiral__spiral">
      <div class="scd-spiral__card">01</div>
      <div class="scd-spiral__card">02</div>
      <div class="scd-spiral__card">03</div>
      <div class="scd-spiral__card">04</div>
      <div class="scd-spiral__card">05</div>
    </div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Jost:wght@400;500&display=swap');

.scd-spiral, .scd-spiral *, .scd-spiral *::before, .scd-spiral *::after { box-sizing: border-box; margin: 0; padding: 0; }

.scd-spiral {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 50%,#1e0a2e,#080410);
  font-family: 'Jost', sans-serif;
}
.scd-spiral__stage {
  perspective: 1200px;
  width: 240px; height: 400px;
}
.scd-spiral__spiral {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  animation: scd-spiral-spin 14s linear infinite;
}
@keyframes scd-spiral-spin { to { transform: rotateY(360deg); } }
.scd-spiral__stage:hover .scd-spiral__spiral { animation-play-state: paused; }
.scd-spiral__card {
  position: absolute; left: 50%; top: 50%;
  width: 120px; height: 160px;
  margin: -80px -60px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: 'Major Mono Display', monospace;
  font-size: 1.4rem;
  box-shadow: 0 0 30px rgba(180,100,255,.25);
}
.scd-spiral__card:nth-child(1) { transform: rotateY(0deg) translateZ(150px) translateY(-120px); background: linear-gradient(150deg,#ee0979,#ff6a00); }
.scd-spiral__card:nth-child(2) { transform: rotateY(72deg) translateZ(150px) translateY(-60px); background: linear-gradient(150deg,#7f00ff,#e100ff); }
.scd-spiral__card:nth-child(3) { transform: rotateY(144deg) translateZ(150px) translateY(0px); background: linear-gradient(150deg,#00c6ff,#0072ff); }
.scd-spiral__card:nth-child(4) { transform: rotateY(216deg) translateZ(150px) translateY(60px); background: linear-gradient(150deg,#11998e,#38ef7d); }
.scd-spiral__card:nth-child(5) { transform: rotateY(288deg) translateZ(150px) translateY(120px); background: linear-gradient(150deg,#f7971e,#ffd200); color: #623; }

@media (prefers-reduced-motion: reduce) {
  .scd-spiral__spiral {
    animation: none !important;
    transition: none !important;
  }
}