/* fx.css · depth/card-fan, a stack of cards fans out as it arrives · owner: Lizzy East · all rights reserved */

/* Five cards share one spot and turn about a point below them, like a hand of
   cards, leaning back a little. That fanned hand is the finished look: without
   script, or with motion off, it is simply there. Arriving by scroll, the hand
   starts as a closed stack and opens one card after another. */
[data-fx~="depth/card-fan"] {
  --fx-fan-w: var(--fx-fan-card, min(34vw, 21rem));
  display: grid;
  place-items: end center;
  min-height: calc(var(--fx-fan-w) * 1.2);
  padding-block: calc(var(--fx-fan-w) * 0.3) 2.5rem;
  perspective: var(--fx-fan-perspective, 1600px);
}
[data-fx~="depth/card-fan"] > [data-fx-card] {
  --fx-k: 0;
  grid-area: 1 / 1;
  width: var(--fx-fan-w);
  margin: 0;
  transform-origin: 50% 250%;
  transform: rotateX(var(--fx-fan-tilt, 12deg)) translateY(0) rotateZ(calc((var(--fx-k) - 2) * var(--fx-fan-spread, 9deg)));
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.04), 0 22px 40px -22px rgb(0 0 0 / 0.55);
}
[data-fx~="depth/card-fan"] > [data-fx-card]:nth-child(2) { --fx-k: 1; }
[data-fx~="depth/card-fan"] > [data-fx-card]:nth-child(3) { --fx-k: 2; }
[data-fx~="depth/card-fan"] > [data-fx-card]:nth-child(4) { --fx-k: 3; }
[data-fx~="depth/card-fan"] > [data-fx-card]:nth-child(5) { --fx-k: 4; }
html.fx-armed [data-fx~="depth/card-fan"].is-pending > [data-fx-card] {
  transform: rotateX(calc(var(--fx-fan-tilt, 12deg) * 2)) translateY(var(--fx-distance)) rotateZ(0deg);
}
html.fx-armed [data-fx~="depth/card-fan"].is-in > [data-fx-card] {
  transition: transform var(--fx-dur) var(--fx-ease) calc(var(--fx-k) * var(--fx-stagger));
}