/* ==========================================================================
   Preview — the page embedded in the 16:9 frame of the component sheet.

   The component, a background, nothing else.

   This page is not a site: it is a frame. On a site, "narrow screen" means "a
   phone". Here, narrow means "small frame": so nothing about the composition
   changes, the scale is fitted to the space available.
   ========================================================================== */

html,
body {
  height: 100%;
  margin: 0;
  /* Without this the body's padding adds to its 100% height: the component is
     centred in an area taller than the frame and drifts down by the whole of
     the top padding. */
  box-sizing: border-box;
}

body {
  display: grid;
  place-items: center;
  background: #0e0c0e;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   The scale.

   A single constant, keyed to the width and with no cap — here it is the one
   the component gives itself: max(100cqw, 100cqh × ratio), that is, "cover your
   box". We let it do the work instead of writing another, and the important
   point still holds: at a constant width in the component's own units, the
   layout is identical at every size, so nothing has to be recomposed when the
   frame changes. A min(…) would break that property; there is none.

   1.24 is the only value in the file, and it can be demonstrated. Two
   constraints meet, in a frame of width L:

     the sky has to cover     it renders at 131.4% of the scene, so the scene
                              must be ≥ L / 1.314 = 0.761 L, otherwise the edge
                              of the plate shows against black;
     the ridges have to fit   the nearest one peaks at 88% of the height of the
                              scene; in the tighter of the two frames the
                              preview is shown in — the 2:1 of the thumbnail,
                              against the 16:9 of the component sheet — that
                              imposes a scene ≤ 0.81 L.

   0.806 L falls between the two, with room on both sides. No cap: at every size
   the layout is the same, so this single constant frames the preview whatever
   the frame. A min(…) would break that property.
   -------------------------------------------------------------------------- */

.parallax-scene {
  width: 100vw;
  height: 100vh;
  aspect-ratio: auto;
  --pxs-scene-width: calc(100vw / 1.24);
}