/* world.css (owner: W2; the arched edges by W1): the scenic page background.
 *
 * The art at the top of every page (the home hero, the page banners) ends in the arched parchment edge
 * (components.css, .edge-arch): it is cut along a gold-rimmed arch, and the page's parchment carries on
 * under it. Further down, a soft, washed-out meadow fades in at the sides, beside the panels, and fades
 * out into the parchment again. Back to front (base.css, Layers):
 *   the canvas    body's parchment and grain (base.css); html has no background of its own, so body's
 *                 is the canvas's. Keep it that way: a background on html would paint body's over the
 *                 layer below.
 *   body::before  the world: the meadow at the foot of the hero art (img/world/, 1-2 KB: blurred and
 *                 washed out by Pillow, so the browser never blurs anything), stretched across the page
 *                 from about the foot of the hero or the page banner; it fades in and out.
 *   .fx-page, main and the footer, the header (base.css).
 * The pseudo-element is z-index -1 in the root stacking context, ends with the page (top/bottom with a
 * max-height, so a short page never grows a scrollbar), scrolls with it (no fixed layer to repaint) and
 * never catches a click.
 * Heights: .home-hero is about 690 px tall at 1024, 840 at 1440 and 890 at 1920 (more on phones, where it
 * holds the portrait art); .page-banner is at least clamp(21rem, 16rem + 14vw, 30rem) from 700 px up.
 * The custom properties below follow them.
 * img/world/ (Pillow, from art/original): wash-desktop is hero-desktop.jpg from 45 % of its height down,
 * shrunk to 480x150; wash-mobile is hero-mobile.jpg from 50 % down, shrunk to 270x240. Both: Gaussian
 * blur radius 8, colour (saturation) 0.85, then blended into #fcf4e0: 40 % at the sides, rising along a
 * cosine to 85 % (desktop) or 65 % (mobile) in the middle third, so the margins keep the flowers and the
 * middle, behind the panels, is nearly parchment. WebP quality 72, JPEG 82. */
body {
  position: relative;
}

body::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
}

/* ---- The world ------------------------------------------------------------------------------- */
body::before {
  top: var(--world-top, 0px);
  max-height: var(--world-h, 0px);
  background-image: url("/assets/img/world/wash-desktop.jpg");
  background-image: image-set(url("/assets/img/world/wash-desktop.webp") type("image/webp"), url("/assets/img/world/wash-desktop.jpg") type("image/jpeg"));
  background-size: 100% 100%;
  --world-mask: linear-gradient(180deg,
    rgb(0 0 0 / 0) 0%,
    #000 22%,
    #000 40%,
    rgb(0 0 0 / 0.62) 60%,
    rgb(0 0 0 / 0.27) 80%,
    rgb(0 0 0 / 0) 100%);
  -webkit-mask-image: var(--world-mask);
  mask-image: var(--world-mask);
}

/* Home: from about the hero's arched foot (the hero is about 740 px tall at 1024, 840 at 1440 and 960
   at 1920), so the parchment right under the arch stays plain and the meadow fades in further down,
   beside the panels. */
body:has(> main > .home-hero) {
  --world-top: calc(30rem + 25vw);
  --world-h: calc(34rem + 30vw);
}

/* ---- Page banners ----------------------------------------------------------------------------
 * The banner paints its own art, cut along its arched edge (components.css), so only the meadow is
 * here: it starts at about the banner's foot (--bh: its min-height, which its content can pass by a
 * little), so the parchment right under the arch stays plain. */
body:has(> main > .page-banner) {
  --bh: clamp(21rem, 16rem + 14vw, 30rem);
  --world-top: calc(var(--bh) + 4rem);
  --world-h: calc(var(--bh) * 1.5 + 12vw);
}

/* ---- Portrait art: phones and upright tablets ---------------------------------------------------
 * The home hero switches to the portrait art up to 820 px (home-hero.css), the page banners up to
 * 700 px (components.css): the world follows each. */
@media (max-width: 820px) {
  body:has(> main > .home-hero) {
    --world-top: calc(40rem + 60vw);
    --world-h: calc(24rem + 45vw);
  }

  body:has(> main > .home-hero)::before {
    background-image: url("/assets/img/world/wash-mobile.jpg");
    background-image: image-set(url("/assets/img/world/wash-mobile.webp") type("image/webp"), url("/assets/img/world/wash-mobile.jpg") type("image/jpeg"));
  }
}

@media (max-width: 700px) {
  body:has(> main > .page-banner) {
    --bh: 24rem;
    --world-top: calc(var(--bh) + 4rem);
    --world-h: calc(var(--bh) * 1.5 + 20vw);
  }

  body:has(> main > .page-banner)::before {
    background-image: url("/assets/img/world/wash-mobile.jpg");
    background-image: image-set(url("/assets/img/world/wash-mobile.webp") type("image/webp"), url("/assets/img/world/wash-mobile.jpg") type("image/jpeg"));
  }
}

/* Print and the Windows contrast themes: just the page. */
@media print, (forced-colors: active) {
  body::before {
    display: none;
  }
}