/* The desert footer's styles, in the page's own stylesheet space: the host
   links this file in its head, so the footer's first paint needs no script.
   The pictures are 21:9 with the land in their lower two thirds. The scene
   box is a third of the width tall for the land plus a row for the line,
   floored for phones and capped for very wide screens; the picture covers it
   anchored low, so a wide screen crops sky and a narrow one crops the sides.
   Only the foot of that box is in the page's flow, and in a flex column
   host even that yields, down to the line's own height, before the page
   would scroll; the rest rises behind the end of the content, whose blocks
   the host keeps legible in its own way (this site lays a haze of the page
   color behind each). The scene is sized from the land, never from the
   element, so a yielded foot leaves the picture as it is. The host reaches in
   only through the --desert-footer-* custom properties, --desert-footer-night
   above all: 0 by day, 1 by night, set by the host from whatever decides its
   theme. */

/* The default is day, at no specificity, so any rule of the host's wins. */
:where(desert-footer) {
  --desert-footer-night: 0;
}

desert-footer {
  --band: clamp(var(--desert-footer-land-min, 14rem), calc(100cqw / 3), var(--desert-footer-land-max, 56rem));
  --row: var(--desert-footer-row, 4rem); /* the line's room above the land */
  /* The land that stays below the content, as the element's height; as a
     flex item it may shrink to its content, the line. The rest rises. */
  --foot: var(--desert-footer-foot, calc(var(--band) * 0.4));
  position: relative;
  display: flex;
  /* The line, the one child in the flow, starts at the bottom instead of
     being pushed there: WebKit takes where a flex item's content ends as its
     least size, so a line pushed down by flex-end would hold the whole foot,
     and a page that nearly fits would scroll. */
  flex-direction: column-reverse;
  height: var(--foot);
  container-type: inline-size;
  isolation: isolate;
}

/* Every picture layer shares one box: the whole scene, risen from the
   element's bottom to the land's full height plus the row. */
desert-footer > .desert-footer-scene {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--band) + var(--row));
  pointer-events: none;
}

desert-footer .desert-footer-picture,
desert-footer .desert-footer-night {
  position: absolute;
  inset: 0;
}

desert-footer .desert-footer-picture {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 78%;
}

/* A narrow screen keeps the riders, left of center, in its slice. */
@container (max-width: 44rem) {
  desert-footer .desert-footer-picture { background-position: 36% 78%; }
}

/* Day and night crossfade on the host's one number, but only once the page
   has loaded (the script marks it), so no first paint can animate. */
desert-footer .desert-footer-day {
  background-image: url("art/day.webp");
  opacity: calc(1 - var(--desert-footer-night));
}

desert-footer .desert-footer-night {
  opacity: var(--desert-footer-night);
  isolation: isolate; /* the stars screen onto the night picture alone */
}

desert-footer[data-ready] .desert-footer-day,
desert-footer[data-ready] .desert-footer-night {
  transition: opacity 1s ease;
}

desert-footer .desert-footer-base { background-image: url("art/night.webp"); }

/* Where the browser can read the mode in CSS, the other mode's picture is
   not fetched with the page; desert-footer.js brings it in once the page has
   loaded, so a later change of theme is instant. Elsewhere both load. */
@container style(--desert-footer-night: 1) {
  desert-footer .desert-footer-day { background-image: none; }
}

@container style(--desert-footer-night: 0) {
  desert-footer .desert-footer-base { background-image: none; }
}

desert-footer .desert-footer-stars { mix-blend-mode: screen; }
desert-footer .desert-footer-stars-1 { background-image: url("art/stars-1.webp"); animation: desert-footer-twinkle 3.6s ease-in-out infinite alternate; }
desert-footer .desert-footer-stars-2 { background-image: url("art/stars-2.webp"); animation: desert-footer-twinkle 5.3s ease-in-out -1.7s infinite alternate; }
desert-footer .desert-footer-stars-3 { background-image: url("art/stars-3.webp"); animation: desert-footer-twinkle 7.1s ease-in-out -3.4s infinite alternate; }

@keyframes desert-footer-twinkle {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

/* The host's own children, the footer's line, paint above the scene. */
desert-footer > :not(.desert-footer-scene) {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  desert-footer .desert-footer-stars { animation: none; }
}

@media print {
  desert-footer > .desert-footer-scene { display: none; }
}