<div class="scd-casc">
  <div class="scd-casc__stage">
    <div class="scd-casc__card"><span class="scd-casc__dot" style="background:#2ecc71"></span><div><h3>Deployed</h3><p>v3.2 live</p></div></div>
    <div class="scd-casc__card"><span class="scd-casc__dot" style="background:#3498db"></span><div><h3>Building</h3><p>2 jobs queued</p></div></div>
    <div class="scd-casc__card"><span class="scd-casc__dot" style="background:#f39c12"></span><div><h3>Review</h3><p>5 PRs open</p></div></div>
    <div class="scd-casc__card"><span class="scd-casc__dot" style="background:#9b59b6"></span><div><h3>Drafts</h3><p>3 pending</p></div></div>
    <div class="scd-casc__card"><span class="scd-casc__dot" style="background:#95a5a6"></span><div><h3>Archived</h3><p>112 items</p></div></div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700&family=Inter+Tight:wght@400&display=swap');

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

.scd-casc {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg,#071a2b,#0d3047);
  font-family: 'Inter Tight', sans-serif;
}
.scd-casc__stage { position: relative; width: 260px; height: 320px; }
.scd-casc__card {
  position: absolute; left: 0; right: 0;
  height: 90px; border-radius: 18px;
  padding: 18px 22px;
  background: linear-gradient(135deg,rgba(255,255,255,.95),rgba(220,235,250,.9));
  box-shadow: 0 14px 30px rgba(0,0,0,.4);
  display: flex; align-items: center; gap: 16px;
  transition: transform .5s cubic-bezier(.3,.85,.3,1), box-shadow .4s, top .5s cubic-bezier(.3,.85,.3,1);
  cursor: pointer;
  color: #0d3047;
}
.scd-casc__dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.scd-casc__card h3 { font-family: 'Sora', sans-serif; font-size: 1.05rem; }
.scd-casc__card p { font-size: .8rem; opacity: .6; }
.scd-casc__card:nth-child(1) { top: 0; z-index: 5; }
.scd-casc__card:nth-child(2) { top: 54px; z-index: 4; filter: brightness(.97); }
.scd-casc__card:nth-child(3) { top: 108px; z-index: 3; filter: brightness(.94); }
.scd-casc__card:nth-child(4) { top: 162px; z-index: 2; filter: brightness(.91); }
.scd-casc__card:nth-child(5) { top: 216px; z-index: 1; filter: brightness(.88); }
.scd-casc__stage:hover .scd-casc__card:nth-child(1) { top: -8px; }
.scd-casc__stage:hover .scd-casc__card:nth-child(2) { top: 64px; }
.scd-casc__stage:hover .scd-casc__card:nth-child(3) { top: 136px; }
.scd-casc__stage:hover .scd-casc__card:nth-child(4) { top: 208px; }
.scd-casc__stage:hover .scd-casc__card:nth-child(5) { top: 280px; }
.scd-casc__card:hover {
  transform: scale(1.06) translateX(10px);
  box-shadow: 0 22px 44px rgba(0,0,0,.5);
  z-index: 9 !important;
}

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