html { background: #fff8eb; color-scheme: light; }
/* Four full-screen colour panels follow each other from left to right. */
html.clay-leaving::after,
html.clay-arriving::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 400%;
  z-index: 2147483647;
  background: linear-gradient(90deg,
    #f3b6cb 0% 25%,
    #f4c3a4 25% 50%,
    #b8d8ce 50% 75%,
    #d8c9ee 75% 100%);
  pointer-events: auto;
}
html.clay-leaving::after {
  animation: clay-cover 680ms linear both;
}
html.clay-arriving.clay-revealing::after {
  animation: clay-uncover 360ms cubic-bezier(.4,0,.2,1) both;
}
@keyframes clay-cover {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
@keyframes clay-uncover {
  from { transform: translateX(0); }
  to { transform: translateX(25%); }
}
@media (prefers-reduced-motion: reduce) {
  html.clay-leaving::after, html.clay-arriving::after { display: none; animation: none; }
}