/* The scene band: a painted strip of the Meadows across the top of the account pages (join, sign in, account,
   unsubscribed, the sign-in confirm page) and the hero of the founders' page. Built on the parallax pieces in
   site.css. Loaded after site.css. How to use it: design/README.md, "Scene bands".

   The backdrop is the same four-layer art as the home page. The stage is sized from the viewport (--k times as
   wide as the band) and slid up or down so the grass line always sits --feet above the bottom of the band; the
   characters stand on that line. Without JS (or with reduced motion, or on the confirm page) it is just a picture. */

.band {
  --k: 2;                                   /* backdrop width as a multiple of the band: bigger = closer in */
  --feet: 58px;                             /* how far the grass line sits above the bottom of the band */
  --band-h: clamp(240px, 66vw, 320px);
  position: relative;
  height: var(--band-h);
  overflow: hidden;
  background: linear-gradient(#35a4fe, #5ab4fb 88%);
  border-bottom: var(--line);
}
.scene { position: absolute; inset: 0; }
.scene picture { display: contents; }
.scene .parallax__stage {
  width: calc(var(--k) * 100%);
  left: calc((100% - var(--k) * 100%) / 2);
  aspect-ratio: 1672 / 941;
  bottom: calc(var(--feet) - var(--k) * 17.56vw);
}
.scene .parallax__layer--sky { -webkit-mask-image: linear-gradient(transparent, #000 22%); mask-image: linear-gradient(transparent, #000 22%); }
.scene__cast { position: absolute; inset: 0; z-index: 3; }
.scene .char { bottom: var(--feet); }

/* The cast. Width is in px so a character is the same size whatever the band does; the slots are where they
   stand across the band: l1 and l2 on the left, r2 and r1 on the right. */
.c-ram { --w: clamp(84px, 11vw, 150px); --ar: 1.1864; --act-h: 96%; --depth: 0.62; }
.c-grunt { --w: clamp(70px, 9.5vw, 128px); --ar: 0.9136; --act-h: 93%; --depth: 0.58; }
.c-king { --w: clamp(92px, 11vw, 160px); --ar: 0.85; --act-h: 94%; --depth: 0.66; }
.c-mega { --w: clamp(96px, 12vw, 170px); --ar: 1.1864; --act-h: 98%; --depth: 0.6; }
.c-catapult { --w: clamp(72px, 8.4vw, 116px); --ar: 0.8475; --depth: 0.55; }
.at-l1 { --x: 3%; }
.at-l2 { --x: 27%; }
.at-r2 { --x: 55%; }
.at-r1 { --x: 68%; }

@media (min-width: 600px) {
  .band { --k: 1.4; --band-h: 300px; --feet: 62px; }
}
@media (min-width: 900px) {
  .band { --k: 1; --band-h: clamp(300px, 24vw, 400px); --feet: 70px; }
  .at-l1 { --x: calc(50% - 31rem); }
  .at-l2 { --x: calc(50% - 20rem); }
  .at-r2 { --x: calc(50% + 12rem); }
  .at-r1 { --x: calc(50% + 22rem); }
}
@media (min-width: 1700px) {
  .band { --band-h: 420px; }
}

/* Phones keep the cast small and few: the band is short and the header sits across the top of it. */
@media (max-width: 599px) {
  .band .only-wide { display: none; }
}

/* Without script (and on the sign-in confirm page, which runs none) the phone menu cannot collapse and its links
   wrap, so the header gets a solid bar instead of floating over the painting. */
@media (max-width: 899px) {
  html:not(.js) .site-header--over { position: relative; background: var(--sage); border-bottom: 2px dashed rgba(42, 29, 18, 0.25); }
}