/* One entrance per page load; independent translate preserves card positioning
   and hover transforms. Backwards fill releases every property when finished. */
@keyframes opening-reveal {
  from { opacity:0; translate:0 var(--opening-distance,14px); }
  to { opacity:1; translate:0 0; }
}

@media (prefers-reduced-motion:no-preference) {
  .topbar > .brand,
  .topbar > .topbar__nav,
  .pg__center > *,
  .pg__cards > .pgcard,
  .pg__cards > .pgphoto {
    animation:opening-reveal 620ms cubic-bezier(.22,1,.36,1) backwards;
    animation-delay:var(--opening-delay,0ms);
  }
  .topbar > .brand { --opening-distance:8px; }
  .topbar > .topbar__nav { --opening-distance:8px; --opening-delay:60ms; }
  .pg__eyebrow { --opening-delay:100ms; }
  .pgmark { --opening-delay:180ms; --opening-distance:18px; }
  .pg__ink { --opening-delay:240ms; }
  .pg__lede { --opening-delay:300ms; }
  .pg__say { --opening-delay:360ms; }
  .pg__cards > .pgcard { --opening-delay:340ms; --opening-distance:18px; }
  .pg__cards > .pgcard:nth-child(2n) { --opening-delay:400ms; }
  .pg__cards > .pgcard:nth-child(3n) { --opening-delay:460ms; }
  .pg__cards > .pgphoto { --opening-delay:440ms; --opening-distance:10px; }
  .pg__cards > .pgphoto:nth-child(2n) { --opening-delay:480ms; }
  /* Keyboard access should never wait for the entrance to finish. */
  .topbar > :focus-within,
  .pg__cards > :focus-within { animation:none; }
}