/* The painted scene behind the family's pages: one per language and theme
   (docs/home-redesign.md). Shared by the home pages (News, Publications, Lab
   and the home page) and LifeRPG, whose build copies this file and
   site/scenes/. A page opts in with body.scenic and the scene's markup
   (sceneMarkup in scripts/build.mjs; LifeRPG's index.html). Load it after
   theme.css and before the page's own styles. */

/* Each scene sets the sky (a gradient over the whole page) and the colors of
   text, accents and the translucent panels that float over its pictures. */
:root[data-theme="light"]:not([lang^="zh"]) .scenic {
  --sky-top: #b7dcef;
  --sky: linear-gradient(180deg, #b7dcef 0%, #f7e7c8 34%, #9ecfd3 68%, #e7c18c 100%);
  --ink: #10202f; --ink-dim: #3b4b5b; --ink-faint: #5b6979; --accent: #0a5fc2; --kicker: #c2410c;
  --glass: rgba(255, 255, 255, .68); --glass-line: rgba(255, 255, 255, .72); --bar: rgba(236, 245, 255, .84);
  --scene-glass-wash: rgba(255, 255, 255, .035);
}
:root[data-theme="dark"]:not([lang^="zh"]) .scenic {
  --sky-top: #050817;
  --sky: linear-gradient(180deg, #050817 0%, #0a1230 34%, #111e46 72%, #060a1a 100%);
  --ink: #eef1ff; --ink-dim: #b9c0dd; --ink-faint: #8b93b6; --accent: #8ab4ff; --kicker: #b69cff;
  --glass: rgba(12, 15, 42, .64); --glass-line: rgba(255, 255, 255, .1); --bar: rgba(6, 8, 24, .82);
  --scene-glass-wash: rgba(4, 7, 20, .055);
}
:root[data-theme="light"][lang^="zh"] .scenic {
  --sky-top: #f4efe2;
  --sky: linear-gradient(180deg, #f4efe2 0%, #ddebe5 34%, #c8deda 70%, #98c3bf 100%);
  --ink: #1d2a24; --ink-dim: #45554d; --ink-faint: #67766e; --accent: #2e6b5c; --kicker: #b23a2a;
  --glass: rgba(250, 248, 240, .7); --glass-line: rgba(255, 255, 255, .75); --bar: rgba(244, 242, 234, .86);
  --scene-glass-wash: rgba(255, 252, 241, .045);
}
:root[data-theme="dark"][lang^="zh"] .scenic {
  --sky-top: #07111f;
  --sky: linear-gradient(180deg, #07111f 0%, #0d2140 34%, #173552 70%, #0a1728 100%);
  --ink: #eef0f6; --ink-dim: #bcc3d2; --ink-faint: #8c95aa; --accent: #e6b968; --kicker: #e6b968;
  --glass: rgba(10, 16, 32, .68); --glass-line: rgba(255, 255, 255, .09); --bar: rgba(8, 12, 26, .82);
  --scene-glass-wash: rgba(5, 12, 25, .06);
}
body.scenic { position: relative; background: var(--sky); background-color: var(--sky-top); }
/* Bars over the scene (a banner once the page scrolls, a footer) share one
   translucent color. */
.scenic { --chrome: color-mix(in srgb, var(--bar) 72%, transparent); --chrome-line: color-mix(in srgb, var(--glass-line) 60%, transparent); }

/* The scene: three picture layers per scene; only the active scene shows, so
   only its images load. Without parallax the layers sit at the top, middle
   and end of the page (on LifeRPG, a page one window tall: all three at
   once); with it (.parallax, the home pages' app.js) they move slower than
   the page. */
/* Below everything in <main> (z-index -1): a positioned scene at z-index 0
   would be painted over content that is not positioned itself. */
.scene { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
/* The blur and opacity are baked into the images
   (scripts/build-scene-assets.sh): done here as a backdrop-filter over layers
   that move with the scroll, they flickered sharp now and then. Only the faint
   wash of color stays, which costs nothing to draw. */
.scene-set { display: none; position: absolute; inset: 0; z-index: 0; }
.scene::after { content: ""; position: absolute; z-index: 1; inset: 0; background: var(--scene-glass-wash); }
:root[data-theme="light"]:not([lang^="zh"]) .scene-set[data-scene="en-light"],
:root[data-theme="dark"]:not([lang^="zh"]) .scene-set[data-scene="en-dark"],
:root[data-theme="light"][lang^="zh"] .scene-set[data-scene="zh-light"],
:root[data-theme="dark"][lang^="zh"] .scene-set[data-scene="zh-dark"] { display: block; }
/* A layer is --k times as wide as the window (1, or larger on phones), and
   --x places it: 0 shows its left end, 1 its right end. */
.layer { position: absolute; left: calc((1 - var(--k, 1)) * var(--x, 0) * 100%); width: calc(var(--k, 1) * 100%); background: no-repeat center top / 100% 100%; }
.layer-top { top: 0; aspect-ratio: 16 / 10; }
.layer-middle { top: 50%; translate: 0 -50%; aspect-ratio: 16 / 10; }
/* The bottom picture ends --shift of its height below the window, under the
   footer (its plain ground or water), so the figures sit lower, clear of the
   content; app.js reads --shift too. */
.layer-bottom { --shift: .1; bottom: 0; translate: 0 calc(var(--shift) * 100%); aspect-ratio: 9 / 5; }
.parallax .scene { position: fixed; height: 100vh; }
.parallax .layer { top: 0; bottom: auto; translate: none; will-change: transform; }
.scene-set[data-scene="en-light"] .layer-top { background-image: url(scenes/en-light/top-1920.webp); }
.scene-set[data-scene="en-light"] .layer-middle { background-image: url(scenes/en-light/middle-1920.webp); }
.scene-set[data-scene="en-light"] .layer-bottom { background-image: url(scenes/en-light/bottom-1920.webp); }
.scene-set[data-scene="en-dark"] .layer-top { background-image: url(scenes/en-dark/top-1920.webp); }
.scene-set[data-scene="en-dark"] .layer-middle { background-image: url(scenes/en-dark/middle-1920.webp); }
.scene-set[data-scene="en-dark"] .layer-bottom { background-image: url(scenes/en-dark/bottom-1920.webp); }
.scene-set[data-scene="zh-light"] .layer-top { background-image: url(scenes/zh-light/top-1920.webp); }
.scene-set[data-scene="zh-light"] .layer-middle { background-image: url(scenes/zh-light/middle-1920.webp); }
.scene-set[data-scene="zh-light"] .layer-bottom { background-image: url(scenes/zh-light/bottom-1920.webp); }
.scene-set[data-scene="zh-dark"] .layer-top { background-image: url(scenes/zh-dark/top-1920.webp); }
.scene-set[data-scene="zh-dark"] .layer-middle { background-image: url(scenes/zh-dark/middle-1920.webp); }
.scene-set[data-scene="zh-dark"] .layer-bottom { background-image: url(scenes/zh-dark/bottom-1920.webp); }
@media (min-width: 1921px), (min-width: 1200px) and (min-resolution: 1.5dppx) {
  .scene-set[data-scene="en-light"] .layer-top { background-image: url(scenes/en-light/top.webp); }
  .scene-set[data-scene="en-light"] .layer-middle { background-image: url(scenes/en-light/middle.webp); }
  .scene-set[data-scene="en-light"] .layer-bottom { background-image: url(scenes/en-light/bottom.webp); }
  .scene-set[data-scene="en-dark"] .layer-top { background-image: url(scenes/en-dark/top.webp); }
  .scene-set[data-scene="en-dark"] .layer-middle { background-image: url(scenes/en-dark/middle.webp); }
  .scene-set[data-scene="en-dark"] .layer-bottom { background-image: url(scenes/en-dark/bottom.webp); }
  .scene-set[data-scene="zh-light"] .layer-top { background-image: url(scenes/zh-light/top.webp); }
  .scene-set[data-scene="zh-light"] .layer-middle { background-image: url(scenes/zh-light/middle.webp); }
  .scene-set[data-scene="zh-light"] .layer-bottom { background-image: url(scenes/zh-light/bottom.webp); }
  .scene-set[data-scene="zh-dark"] .layer-top { background-image: url(scenes/zh-dark/top.webp); }
  .scene-set[data-scene="zh-dark"] .layer-middle { background-image: url(scenes/zh-dark/middle.webp); }
  .scene-set[data-scene="zh-dark"] .layer-bottom { background-image: url(scenes/zh-dark/bottom.webp); }
}

/* Phones (docs/home-redesign.md §9). */
@media (max-width: 760px) {
  /* The scene, larger: each picture twice the window's width, so it fills the
     sky. The top one shows its right half (the sun, the galaxy, the
     mountains), the middle one its left edge, the bottom one the figures,
     a little smaller; its ground shows through the tab bar. The layers move
     more (--factor, read by app.js), so the parallax shows on a small
     screen. */
  .layer-top { --k: 2; --x: 1; --factor: .35; }
  .layer-middle { --k: 2; --x: 0; --factor: .65; }
  .layer-bottom { --k: 1.7; --x: .72; --shift: 0; --factor: 1.6; }
  /* Phone files: more blur and less opacity than the laptop's, which looked
     sharp and strong at this size (scripts/build-scene-assets.sh --phone). */
  .scene-set[data-scene="en-light"] .layer-top { background-image: url(scenes/en-light/top-phone.webp); }
  .scene-set[data-scene="en-light"] .layer-middle { background-image: url(scenes/en-light/middle-phone.webp); }
  .scene-set[data-scene="en-light"] .layer-bottom { background-image: url(scenes/en-light/bottom-phone.webp); }
  .scene-set[data-scene="en-dark"] .layer-top { background-image: url(scenes/en-dark/top-phone.webp); }
  .scene-set[data-scene="en-dark"] .layer-middle { background-image: url(scenes/en-dark/middle-phone.webp); }
  .scene-set[data-scene="en-dark"] .layer-bottom { background-image: url(scenes/en-dark/bottom-phone.webp); }
  .scene-set[data-scene="zh-light"] .layer-top { background-image: url(scenes/zh-light/top-phone.webp); }
  .scene-set[data-scene="zh-light"] .layer-middle { background-image: url(scenes/zh-light/middle-phone.webp); }
  .scene-set[data-scene="zh-light"] .layer-bottom { background-image: url(scenes/zh-light/bottom-phone.webp); }
  .scene-set[data-scene="zh-dark"] .layer-top { background-image: url(scenes/zh-dark/top-phone.webp); }
  .scene-set[data-scene="zh-dark"] .layer-middle { background-image: url(scenes/zh-dark/middle-phone.webp); }
  .scene-set[data-scene="zh-dark"] .layer-bottom { background-image: url(scenes/zh-dark/bottom-phone.webp); }
}