Sticky Stack

<!-- Cards stick and stack as you scroll past them -->
<div class="nuda-scrollss__card nuda-scrollss__card--1">Card 01</div>
<div class="nuda-scrollss__card nuda-scrollss__card--2">Card 02</div>
<div class="nuda-scrollss__card nuda-scrollss__card--3">Card 03</div>

/* Sticky Stack
   Sticky cards that shrink + dim as the next card scrolls over them,
   producing a stacked-deck effect. Uses position: sticky + a view()
   timeline. transform / filter only. */

.nuda-scrollss__card {
  position: sticky;
  top: 0.5rem;
  animation: nuda-scrollss-shrink linear both;
  animation-timeline: view(block);
  animation-range: exit 0% exit 100%;
}

.nuda-scrollss__card--2 { background: #c7e34a; }
.nuda-scrollss__card--3 { background: #a9c23e; }

@keyframes nuda-scrollss-shrink {
  to { transform: scale(0.9); filter: brightness(0.6); }
}

@supports not (animation-timeline: view()) {
  /* Without timelines, fall back to a plain (non-sticky) list. */
  .nuda-scrollss__card { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-scrollss__card {
    animation: none;
    animation-timeline: none;
    transform: none;
    filter: none;
  }
}