/* ==========================================================================
   work-arrive.css — the pictures streaming in.

   THE RESTING STATE IS NOTHING AT ALL. .wgrid__arrive on its own carries no
   filter, no transform and no will-change, so once a card has arrived this
   layer costs exactly what an empty div costs. That is deliberate and it is
   the lesson from the last round: a `filter` left on thirty plates is a render
   surface per plate re-rasterised on every frame, and it took this page from
   120fps to 50. The blur here exists for under a second and then genuinely
   goes away.

   The box is the plate's own box, so adding this wrapper moves nothing.
   ========================================================================== */

.wgrid__arrive{
  position: absolute;
  left: 0; top: 0;
  width: var(--cell-w);
  height: var(--plate-h);
  transform-origin: 50% 50%;
}

/* WAITING. Squashed to a band and smeared, which between them are most of the
   reference: flattening a photograph vertically and then blurring it IS what
   produces those horizontal ribbons of colour — the rainbow edges are the
   picture's own hues pulled across each other, not a separate effect. */
.wgrid__arrive.is-waiting{
  opacity: 0;
  transform: scaleY(var(--arrive-squash, .08));
  filter: blur(var(--arrive-blur, 16px));
}

/* ARRIVING. The transition is added a frame before the waiting class comes
   off, and taken away again once it has landed, so no card is left carrying a
   transition rule it will never use. */
.wgrid__arrive.is-arriving{
  will-change: transform, opacity, filter;
  transition:
    opacity   var(--arrive-ms, 820ms) ease,
    transform var(--arrive-ms, 820ms) cubic-bezier(.16, .84, .32, 1),
    filter    var(--arrive-ms, 820ms) ease;
}

/* SOMEONE WHO ASKED FOR LESS MOVEMENT GETS THE PAGE, NOT THE PERFORMANCE.
   The cards simply are where they are. */
@media (prefers-reduced-motion: reduce){
  .wgrid__arrive.is-waiting{ opacity: 1; transform: none; filter: none; }
  .wgrid__arrive.is-arriving{ transition: none; will-change: auto; }
}