/* Cover intro: the paper ground reads first, the lockup follows almost at once,
   the photograph settles in last. Pure CSS with `backwards` fill, so a script
   that never runs cannot leave the cover invisible. */
@media (prefers-reduced-motion: no-preference) {
  .cover-lockup {
    animation: cover-lockup-in 1200ms cubic-bezier(.22, .61, .36, 1) 220ms backwards;
  }
  .cover-image {
    animation: cover-image-in 1500ms cubic-bezier(.22, .61, .36, 1) 780ms backwards;
  }
  .cover-caption {
    animation: cover-lockup-in 1000ms cubic-bezier(.22, .61, .36, 1) 1500ms backwards;
  }
}

@keyframes cover-lockup-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes cover-image-in {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

/* The relief is a WebGL surface the size of the viewport. Once it reports a
   frame it gets its own compositing layer, and on some phone browsers that
   layer was drawn over the cover although `main` sits a level above it — the
   lockup and the photograph vanished moments after load while the relief
   itself stayed. Giving the cover a layer of its own puts both surfaces on
   the compositor, where the painting order is honoured.
   `?plain=1` opts out of this, for comparing the two on a real device. */
html:not([data-cover-layer='plain']) .cover {
  transform: translateZ(0);
}

/* Diagnostics, reachable only through a query parameter. */
html[data-cover-layer='no-blend'] .cover-lockup { mix-blend-mode: normal; }