/* Pure Shit — the dump. Live physics scene, not a scripted sequence.
   Positions are written by js/dump.js each frame via transform only. */

/* .dump is the anchor, not the scene: it reserves the space the pile rests
   in and tells the engine where the floor goes. It draws nothing itself. */
.dump {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Tall enough for the pile plus air above it, and no taller. The viewport
     term alone kept growing the pit on a tall screen while the pile stayed the
     same height (it is sized by the posters, not the window), stranding the
     heap under half a screen of nothing. --dump-min is the estimated settled
     height from js/dump.js, so it tracks the pile: cap the viewport term with
     it and the air above stays roughly constant instead of scaling with the
     screen. The 1.18 is the margin the estimate needs in practice: at
     --dump-min exactly, half the reloads had the pile bursting out of the top,
     which reads as a wall — the fall is random, so the slack is the point.
     --dump-top is written by js/dump.js; the min() is the no-JS floor. */
  height: max(min(62vh, 30rem),
              min(calc(112vh - var(--dump-top, 40vh)),
                  calc(var(--dump-min, 200vh) * 1.18)));
  /* Cancel the section's bottom padding: the pile rests on the page edge. */
  margin-bottom: calc(-1 * var(--tier-pad-b));
  touch-action: pan-y;
}

/* On a phone the tiers above eat most of the viewport, leaving the pit barely
   400px tall — the pile then fills it to the brim and reads as a wall rather
   than a heap. Let it run a little past the bottom of the screen so the heap
   has room to spread; the floor follows the element, so nothing else needs to
   change.
   Here --dump-min always wins (the viewport term is a few hundred px shorter),
   so it alone decides the height — and its estimate is generous for the big
   phone posters: at full --dump-min a ~600px pile sat under ~350px of nothing.
   0.738 trims it back to the pile plus the margin the random fall still needs.
   Little room is left below that: the tightest reloads settle ~10px under the
   top edge, so shaving further starts pushing the pile out of the frame. */
@media (max-width: 639px) {
  .dump {
    height: max(calc(var(--dump-min, 30rem) * 0.738),
                calc(110vh - var(--dump-top, 40vh)));
  }
}

/* Phone laid on its side: the screen is short, not narrow, so a pit measured
   in vh collapses to a couple of hundred pixels and the pile bursts out of the
   top. Give it a floor in rem that the viewport height can't undercut. */
@media (max-height: 519px) {
  .dump {
    height: max(var(--dump-min, 26rem), calc(150vh - var(--dump-top, 40vh)));
  }
}

/* The bodies live here: a layer anchored to the page, not to the window, so
   the pile scrolls with its section and never shifts while you scroll. It
   spans the document from the top down to the floor, which lets anything the
   cursor flings upward travel far up the page instead of being clipped just
   above the heap.
   Sits behind the page content (z-index 0 against the nav's 50) and takes no
   pointer events, so text stays readable and clickable throughout. */
.dump__layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Every falling body is absolutely placed at the origin; the engine
   writes translate()+rotate() into --x/--y/--r. */
.debris {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate3d(var(--x, 0), var(--y, 0), 0) rotate(var(--r, 0rad));
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}

.debris--poster {
  border: 1px solid rgba(216, 171, 94, 0.14);
  background: #17120c;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.debris--poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Dulled: this is the reject pile. */
  filter: brightness(0.82) saturate(0.75);
  pointer-events: none;
}

/* Litter carries the wax red of rejection: this is the reject pile, so the
   colour belongs here. It keeps the seal red rather than the lighter ink the
   "La Fossa" heading takes — these are drawings, not type, so they are read by
   shape and carry no contrast minimum, and the darker red is what puts the
   pile a step behind the heading instead of competing with it. Held back a
   further 15%, the same value on every piece, since a random one per piece is
   what made the red read as muddy before. No brightness filter: on this
   near-black ground it would dull the red instead of just softening it. */
.debris--litter {
  color: var(--wax-seal-red);
  opacity: 0.85;
}

.debris--litter svg { width: 100%; height: 100%; display: block; }

/* Fallback: no JS. Show the rejects as a plain, still grid so the section
   still has content.

   There is no prefers-reduced-motion rule here on purpose — see js/dump.js:
   browsers that report `reduce` for every user were hiding the scene from
   everyone, and the pile is this section's content rather than decoration.
   docs/adr/0004-dump-ignores-reduced-motion.md has the reasoning. */
.dump__fallback { display: none; }

.dump--static .dump { display: none; }
.dump--static .dump__fallback { display: grid; }

.dump__fallback {
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: 1rem;
}

.dump__fallback .poster img { filter: brightness(0.82) saturate(0.75); }