<div class="scd-notif">
  <div class="scd-notif__stage">
    <div class="scd-notif__notif"><div class="scd-notif__icon" style="background:#34c759">💬</div><div class="scd-notif__txt"><h4>Messages</h4><p>Sam: see you at 7?</p></div><span class="scd-notif__time">now</span></div>
    <div class="scd-notif__notif"><div class="scd-notif__icon" style="background:#007aff">📅</div><div class="scd-notif__txt"><h4>Calendar</h4><p>Standup in 15 min</p></div><span class="scd-notif__time">9:45</span></div>
    <div class="scd-notif__notif"><div class="scd-notif__icon" style="background:#ff3b30">🔔</div><div class="scd-notif__txt"><h4>Reminders</h4><p>Pick up dry cleaning</p></div><span class="scd-notif__time">9:30</span></div>
    <div class="scd-notif__notif"><div class="scd-notif__icon" style="background:#ff9500">🌤️</div><div class="scd-notif__txt"><h4>Weather</h4><p>Rain expected at 3pm</p></div><span class="scd-notif__time">8:00</span></div>
  </div>
</div>

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

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

.scd-notif {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg,#3a1c71,#d76d77,#ffaf7b);
  font-family: 'Figtree', sans-serif;
}
.scd-notif__stage { position: relative; width: 300px; height: 300px; }
.scd-notif__notif {
  position: absolute; left: 0; right: 0;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 20px;
  padding: 14px 16px;
  display: flex; gap: 12px; align-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  transition: transform .5s cubic-bezier(.3,.9,.3,1), opacity .5s, top .5s cubic-bezier(.3,.9,.3,1);
  cursor: pointer;
}
.scd-notif__icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 1.2rem;
}
.scd-notif__txt h4 { font-size: .9rem; font-weight: 700; color: #1c1c1e; }
.scd-notif__txt p { font-size: .8rem; color: #3c3c43; opacity: .75; }
.scd-notif__time { margin-left: auto; font-size: .7rem; color: #3c3c43; opacity: .6; align-self: flex-start; }
.scd-notif__notif:nth-child(1) { top: 0; z-index: 5; }
.scd-notif__notif:nth-child(2) { top: 8px; transform: scale(.95); z-index: 4; }
.scd-notif__notif:nth-child(3) { top: 16px; transform: scale(.90); z-index: 3; }
.scd-notif__notif:nth-child(4) { top: 24px; transform: scale(.85); z-index: 2; }
.scd-notif__stage:hover .scd-notif__notif:nth-child(1) { top: 0; transform: scale(1); }
.scd-notif__stage:hover .scd-notif__notif:nth-child(2) { top: 74px; transform: scale(1); }
.scd-notif__stage:hover .scd-notif__notif:nth-child(3) { top: 148px; transform: scale(1); }
.scd-notif__stage:hover .scd-notif__notif:nth-child(4) { top: 222px; transform: scale(1); }

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