/* (9) Page transition main <-> menu, with the same logo waves as the menu overlay (waves.css):
   leaving, the waves roll up over the page; the next page opens covered and they roll back down.
   On only while <html> has the class "page-bands" (both pages); remove the class to switch it off.
   bands.js places the layer; with reduced motion the waves just fade (waves.css). */
.page-waves {
  position: fixed;
  inset: 0;
  z-index: 100;
}
/* idle (rolled away): out of the page entirely. iOS Safari tints its status and tab bars from boxes
   fixed at the screen edges and ignores that the ivory layer is only translated off-screen, so a
   layer left in place painted the bars ivory over the dark page */
.page-waves[hidden] { display: none; }
/* the ivory cover of an arriving page (html.bands-arrive) is inlined in each page's <head>, so it
   paints before any stylesheet arrives */