/* The Growth stage (index.html, growth.js): the scene as separate objects
   over the animated sky, in one 16:9 frame that fills the width (what is
   left over cropped equally top and bottom). Everything is scoped to
   .growth-page (the stage's root in index.html; growth-rings.html's body).
   growth-parts.html is the experiment this was built from and stays as it is. */
.growth-page {
  --fw: 1536;
  --fh: 864;
  --ink: #0b0908;
  --cream: #f4e7cf;
  background: var(--ink);
}
body.growth-page { margin: 0; height: 100%; overflow: hidden; }
.growth-page .stage { position: fixed; inset: 0; background: var(--ink); overflow: hidden; }
.growth-page .frame {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  aspect-ratio: var(--fw) / var(--fh);
  transform: translateY(-50%);
  overflow: hidden;
}
.growth-page .frame > * { position: absolute; display: block; }
.growth-page .frame video { inset: 0; width: 100%; height: 100%; object-fit: fill; }
/* the ink over the sky at first: drawn away from the bottom up while Wuzhay
   raises her arms (growth.js moves its mask's edge) */
.growth-page .cover { inset: 0; width: 100%; height: 100%; background: var(--ink); }
.growth-page .frame img, .growth-page .frame svg { width: auto; height: auto; }
.growth-page .carpet { inset: 0; width: 100%; height: 100%; }
.growth-page .eye { pointer-events: none; }
/* the paintings and the TV fade in (growth.js sets their opacity) */
.growth-page .painting, .growth-page .tv { opacity: 0; }
/* a side painting that opens a page (growth.js `door`): it lifts a little under the cursor */
.growth-page .painting.door { cursor: pointer; transition: transform 250ms ease-out, filter 250ms ease-out; }
.growth-page .painting.door:hover { transform: scale(1.04); filter: brightness(1.12); }
/* its title version, over it at the same box: hidden until the door is
   hovered, then cross-faded in (and lifted with the door) — the picture
   underneath fades out through it because the title's canvas is opaque */
.growth-page .painting.title { opacity: 0; pointer-events: none; transition: opacity 380ms ease-in-out, transform 250ms ease-out; }
.growth-page .painting.title.shown { opacity: 1; transform: scale(1.04); }