<div class="scd-persp">
  <div class="scd-persp__stage">
    <div class="scd-persp__deck">
      <div class="scd-persp__card"><h3>SECTOR 01</h3><p>Active node // online</p></div>
      <div class="scd-persp__card"><h3>SECTOR 02</h3><p>Buffered // standby</p></div>
      <div class="scd-persp__card"><h3>SECTOR 03</h3><p>Cached // idle</p></div>
      <div class="scd-persp__card"><h3>SECTOR 04</h3><p>Archived // sleep</p></div>
    </div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&family=Rajdhani:wght@500&display=swap');

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

.scd-persp {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 50%,#10131f,#05060a);
  font-family: 'Rajdhani', sans-serif;
}
.scd-persp__stage {
  perspective: 900px;
  width: 300px; height: 380px;
}
.scd-persp__deck {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .8s ease;
}
.scd-persp__card {
  position: absolute; inset: 0;
  border-radius: 20px;
  background: linear-gradient(155deg,rgba(40,52,90,.9),rgba(18,22,40,.95));
  border: 1px solid rgba(120,170,255,.35);
  box-shadow: 0 0 40px rgba(70,120,255,.18);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 26px; color: #cfe0ff;
  backdrop-filter: blur(2px);
  transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .8s;
}
.scd-persp__card h3 { font-family: 'Orbitron', sans-serif; font-size: 1.3rem; letter-spacing: .08em; }
.scd-persp__card p { opacity: .6; font-size: .95rem; letter-spacing: .05em; }
.scd-persp__card:nth-child(1) { transform: translateZ(0px); }
.scd-persp__card:nth-child(2) { transform: translateZ(-80px) translateY(-26px); opacity: .85; }
.scd-persp__card:nth-child(3) { transform: translateZ(-160px) translateY(-52px); opacity: .6; }
.scd-persp__card:nth-child(4) { transform: translateZ(-240px) translateY(-78px); opacity: .4; }
.scd-persp__stage:hover .scd-persp__deck { transform: rotateX(18deg) rotateY(-12deg); }
.scd-persp__stage:hover .scd-persp__card:nth-child(1) { transform: translateZ(60px); }

@media (prefers-reduced-motion: reduce) {
  .scd-persp__deck, .scd-persp__card { transition: none !important; }
}