/* the first frame on desktop is flat marigold orange, painted by the stylesheet alone (no script has to run first) so the
   opening is never a dark screen; the curtain, composed for this very screen, fades in over it. (A fixed picture of a closed
   curtain cannot stand in for it: the flowers are laid out round this screen's words, so a picture of another size shows
   as a second set of flowers while the real ones fade in over it.) The picture under the curtain shows when the curtain is opaque */
.hero-first { display: none; }
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  /* the first frame can be painted before the hero's own markup is parsed (the header comes first): the page itself is
     the marigold until the picture shows, so that frame is never a dark screen. Without scripts the picture is shown at once. */
  @media (scripting: enabled) {
    html:not(:has(.hero-under.shown, .hero-wrap.done)) { background: #da7b16; }
    /* the fixed candlelight layer is opaque (it carries the ground colour), so it steps aside for that first frame */
    html:not(:has(.hero-under.shown, .hero-wrap.done)) body::before { display: none; }
  }
  /* the picture is on the page, and so painted, from the start: it lies under this opaque cover (and the curtain) until
     the curtain is opaque, so nobody sees it early, and the browser counts it as the page's largest paint when it arrives */
  .hero-wrap .hero-under { opacity: 1; }
  /* the opaque cover: flat orange, the curtain fades in over it */
  .hero-wrap .hero-first { display: block; position: absolute; inset: 0; background: #da7b16; }
  .hero-wrap .hero-under.shown ~ .hero-field .hero-first, .hero-wrap.done .hero-first { display: none; }
}