/* The page transition's curtain (see curtain.js, which sets `data-curtain` and `data-curtain-color` on <html>). It is `html::after`, so it
   is there before any page has drawn anything, and it works the same on the app and on the plain HTML legal pages.
   The colours are the first screens of the pages it goes to: lime, the brand colour (--green-100) for the merchant page, and the pale
   green (--green-5) that the legal pages are drawn on. curtain.test.js keeps them equal to the tokens.
   `down` lets it onto the page being left; `held` is a page that arrives already covered; `lift` slides it on down, off the screen. */
html::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  background: #c4e860;
  transform: translateY(-100%);
  pointer-events: none;
}
html[data-curtain-color='pale']::after { background: #f4f6ec; }
/* While it covers, a click goes to nothing under it. */
html[data-curtain]::after { pointer-events: auto; }
html[data-curtain='down']::after { transform: translateY(0); transition: transform 750ms cubic-bezier(0.65, 0, 0.35, 1); }
html[data-curtain='held']::after { transform: translateY(0); }
html[data-curtain='lift']::after { transform: translateY(100%); transition: transform 850ms cubic-bezier(0.65, 0, 0.35, 1); pointer-events: none; }
/* For someone who asked for less motion nothing is drawn, and curtain.js leaves every link alone. */
@media (prefers-reduced-motion: reduce) {
  html::after { display: none; }
}