/* The subpages' ground (D-250), built by veld.js: Two pillars on the Lively preset (D-248). One host per [data-world] section, absolute
   over it, clipped to it, painting the section's own base; inside it a layer fixed to the screen, so every section shows the same slabs
   at the same place and a seam between two worlds is exact. Only transform and opacity move. Without the class lg-aan (no script, the
   tier stil) nothing here applies and the templates' two still planes stay. */

/* the still planes go; the section's base moves onto its host (veld.js copies it first), so the host sits between base and content */
.lg-aan body::before { display: none; }
.lg-aan .lg-sectie { background-color: transparent !important; background-image: none !important; }
.lg-rel { position: relative; }

.lg-host {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  clip-path: inset(0);
  background-color: var(--lg-basis); background-image: var(--lg-basis-img, none);
  view-timeline: --lg-sectie block;
}
.lg-laag { position: fixed; inset: 0; overflow: hidden; opacity: calc(var(--lg-sterkte, 1) * var(--luid, 1)); }
/* loud behind the page head, quieter after it (D-109): the head's layer eases to the rest level as the head leaves the screen */
.lg-host.is-kop .lg-laag { animation: lg-kop-uit linear both; animation-timeline: --lg-sectie; animation-range: exit 0% exit 100%; }
@keyframes lg-kop-uit { from { opacity: var(--lg-sterkte, 1); } to { opacity: calc(var(--lg-sterkte, 1) * var(--lg-rust, .6)); } }

/* the worlds' four tones (grond.js' WERELDEN) */
.lg-host[data-w=grafiet] { --w0: #181A1D; --w1: #25282D; --w2: #393E45; --w3: #565C64; }
.lg-host[data-w=nacht] { --w0: #0E0F11; --w1: #15171A; --w2: #1F2226; --w3: #2B2E33; }
.lg-host[data-w=kalk] { --w0: #E1DED8; --w1: #ECE9E3; --w2: #F3F1EC; --w3: #FAF9F6; }
.lg-host[data-w=dag] { --w0: #C3CCD2; --w1: #DADFE3; --w2: #ECEFF1; --w3: #FAFBFB; }
.lg-host[data-w=wit] { --w0: #E8E8E8; --w1: #F2F2F2; --w2: #F9F9F9; --w3: #FFFFFF; }

/* the slabs: today's two planes cut into long plates, in today's own tones, a little stronger so the motion can be seen. Light on the
   dark worlds, a warm shadow on the light ones (a light plate on chalk cannot be seen) */
.lg-veld { position: absolute; left: 50%; top: 50%; }
.lg-baan { position: absolute; top: 0; height: 100%; will-change: transform; }
.lg-lift { position: absolute; left: 0; top: 0; width: 100%; will-change: transform; }
.lg-plaat { position: absolute; left: 0; width: 100%; border-radius: 14px; }
.lg-host[data-toon=donker] .lg-plaat.t1 { background: linear-gradient(90deg, color-mix(in srgb, var(--w2) 30%, transparent), transparent); }
.lg-host[data-toon=donker] .lg-plaat.t2 { background: linear-gradient(90deg, color-mix(in srgb, var(--w3) 20%, transparent), transparent); }
.lg-host[data-toon=licht] .lg-plaat.t1 { background: linear-gradient(90deg, color-mix(in srgb, var(--w0) 80%, transparent), transparent); }
.lg-host[data-toon=licht] .lg-plaat.t2 { background: linear-gradient(90deg, color-mix(in srgb, var(--w0) 60%, transparent), transparent); }