/* ==========================================================================
   PLOP! — the photo pile.

   Eight prints stacked on the table, each one a little lower, a little turned
   and a hair smaller than the one on top of it. Only the top print takes the
   pointer; the rest are edges of paper.

   The rotations are seeded per card in JS, so the pile looks casually dropped
   and is identical on every load. The rotation added while you drag is a
   hundredth of a degree per pixel — a couple of degrees across a full throw,
   nothing like the fifteen a swipe-to-decide deck uses, because this is a photo
   being pushed across a table, not a decision.
   ========================================================================== */

.pile { overflow: clip; }
.pile__title { max-width: 16ch; }
.pile__hint { margin-top: .6rem; }

.pile__stage {
  position: relative;
  margin-top: clamp(1.5rem, 4vw, 3rem);
  display: grid;
  justify-items: center;
  gap: 1.4rem;
}

.pile__stack {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  /* the box the pile occupies: the card aspect plus room for the fan below */
  min-height: clamp(20rem, 42vw, 30rem);
}

.pile__card {
  grid-area: 1 / 1;
  transform-origin: 50% 60%;
  transition: transform 260ms var(--settle), opacity 200ms linear;
  /* depth: each print further down and back */
  translate: calc(var(--depth) * 8px) calc(var(--depth) * 12px);
  scale: calc(1 - var(--depth) * .035);
  rotate: var(--tilt, 0deg);
}
.pile__card .print { --tilt: 0deg; }     /* the pile owns the rotation, not the print */
/* only the top print's note is legible; the ones underneath are paper edges,
   and four captions showing through each other reads as broken text */
.pile__card:not(.is-top) .print__cap { opacity: 0; }

.pile__card.is-top { cursor: grab; }
.pile__card.is-held { transition: none; cursor: grabbing; }
.pile__card.is-gone { transition: transform 260ms var(--push), opacity 260ms linear; opacity: 0; }
.pile__card[hidden] { display: none; }

.pile__controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}
.pile__count { color: var(--ink-soft); }

@media (max-width: 899px) {
  .pile__stack { min-height: 24rem; }
  .pile__card { translate: calc(var(--depth) * 5px) calc(var(--depth) * 9px); }
}