/* fx.css · story/footer-reveal, the page lifts to reveal the footer beneath · owner: Lizzy East · all rights reserved */

/* Pure layering, nothing animates: the footer sticks to the bottom of the screen
   underneath the page, and the page (opaque, above it) scrolls up off it like a
   curtain. Put the block straight inside <body> so the page takes the body's colour.
   A footer holding keyboard focus lets go of the bottom edge, so the browser scrolls
   it into view instead of leaving it under the page. */
[data-fx~="story/footer-reveal"] { position: relative; isolation: isolate; background-color: inherit; }
[data-fx~="story/footer-reveal"] > [data-fx-lift] {
  position: relative;
  z-index: 1;
  display: flow-root;
  background-color: inherit;
  border-end-start-radius: var(--fx-lift-radius, 28px);
  border-end-end-radius: var(--fx-lift-radius, 28px);
  box-shadow: var(--fx-lift-shadow, 0 28px 48px -28px rgb(0 0 0 / 0.55));
}
[data-fx~="story/footer-reveal"] > [data-fx-footer] { position: sticky; bottom: 0; z-index: 0; }
[data-fx~="story/footer-reveal"] > [data-fx-footer]:focus-within { position: relative; }