/* 3D card stack (scroll-driven, zero JS). Measured from Osmo's "Stacking Cards 3D (CSS)" (teardown 10-01),
   rewritten with our names. Cards pin one after another; the one underneath folds back from its bottom edge
   while the next slides over it. Without scroll-driven animations it degrades to a plain sticky stack. */
.stack3d {
  --stack-row: 100svh;          /* scroll distance per card */
  --stack-top: 10svh;           /* where cards pin */
  --stack-card-h: calc(var(--stack-row) - 2 * var(--stack-top));
  --stack-tilt: 25deg;          /* how far the covered card folds back */
  --stack-scale: 0.85;
  --stack-dim: 0.45;            /* brightness it ends at */
  --stack-depth: 60em;          /* perspective */
  display: grid;
  grid-auto-rows: var(--stack-row);
  view-timeline-name: --stack3d;
}
.stack3d > * {
  position: sticky;
  top: var(--stack-top);
  height: var(--stack-card-h);
  transform-origin: 50% 100%;
}
.stack3d > :nth-child(1) { --i: 1; } .stack3d > :nth-child(2) { --i: 2; } .stack3d > :nth-child(3) { --i: 3; }
.stack3d > :nth-child(4) { --i: 4; } .stack3d > :nth-child(5) { --i: 5; } .stack3d > :nth-child(6) { --i: 6; }
.stack3d > :nth-child(7) { --i: 7; } .stack3d > :nth-child(8) { --i: 8; }
@supports (width: calc(sibling-index() * 1px)) { .stack3d > * { --i: sibling-index(); } }
@supports (animation-timeline: view()) {
  .stack3d > * {
    animation: stack3d-away linear forwards;
    animation-timeline: --stack3d;
    /* card i folds exactly while card i+1 travels up to cover it */
    animation-range: exit-crossing calc(var(--i, 1) * var(--stack-row) - 100svh)
                     exit-crossing calc(var(--i, 1) * var(--stack-row) - var(--stack-top));
  }
  .stack3d > :last-child { animation: none; }
}
@keyframes stack3d-away {
  to { transform: perspective(var(--stack-depth)) rotateX(var(--stack-tilt)) scale(var(--stack-scale)); filter: brightness(var(--stack-dim)); }
}
@media (prefers-reduced-motion: reduce) { .stack3d > * { animation: none; } }