/* The gem scene's look, part two: the homepage journey and the pages' own looks (loaded after gems-theme.css by includes/journey-scene.php, journey_scene_head(), only while the gem
   scene is active for the page; never in particles mode). Every rule sits under html[data-scene="gems"]. The journey follows the visitor's theme (Temple Dark: the dusk look, light
   that adds; Temple Dawn: parchment, ink and pigment) instead of always wearing Temple Dark: its ground, glow and veil come from tokens (--jny-ground, --jny-halo, --jny-glow,
   --jny-ckmix) and the page sheets (journey.css, about.css, brahm-gyan.css) are left as they are. Tokens only. */

/* ---------------------------------------------------------------- the journey (assets/css/ds/pages/journey.css) */
html[data-scene="gems"] { --jny-outer: var(--ds-surface); --jny-ground: var(--ds-surface); --jny-halo: 0%; --jny-glow: 10%; --jny-ckmix: 22%; }   /* the scene's ground and the soft glow behind words: light and quiet on parchment */
html[data-scene="gems"].dark, html[data-scene="gems"][data-theme="dark"] { --jny-ground: var(--ds-surface-sunken); --jny-halo: 55%; --jny-glow: 38%; --jny-ckmix: 55%; }
html[data-scene="gems"] .jny-world { background: var(--jny-ground); }
html[data-scene="gems"] .jny { background: var(--jny-ground); }
html[data-scene="gems"] .jny-stage { background: var(--jny-ground); }
html[data-scene="gems"] .jny-seq { background: 50% 50% / cover no-repeat; }
/* the poster is the theme's frame 0 (the four are set inline by home.php; only the one for this theme and orientation is fetched); journey.js sets the later frames */
html[data-scene="gems"] .jny-seq--a { background-image: var(--jf-pl, none); }
html[data-scene="gems"].dark .jny-seq--a, html[data-scene="gems"][data-theme="dark"] .jny-seq--a { background-image: var(--jf-pd, none); }
@media (min-width: 48rem) {
  html[data-scene="gems"] .jny-seq--a { background-image: var(--jf-ll, none); }
  html[data-scene="gems"].dark .jny-seq--a, html[data-scene="gems"][data-theme="dark"] .jny-seq--a { background-image: var(--jf-ld, none); }
}
/* once the live scene is up the poster and the sequence's frames leave (the canvas is transparent, so they must not show through) */
html[data-scene="gems"] .jny[data-journey-mode="scene"] .jny-seq { opacity: 0; animation: none; transition: opacity .8s linear; }
html[data-scene="gems"] .jny-shade {
  background: linear-gradient(90deg, color-mix(in srgb, var(--jny-ground) 66%, transparent) 0%, color-mix(in srgb, var(--jny-ground) 26%, transparent) 36%, transparent 56%),
    linear-gradient(0deg, color-mix(in srgb, var(--jny-ground) 70%, transparent), transparent 34%); }
html[data-scene="gems"] .jny .jny-title { text-shadow: 0 0 2.5rem color-mix(in srgb, var(--ds-action) var(--jny-halo), transparent); }
html[data-scene="gems"] .jny-centre .ds-term__btn { color: color-mix(in srgb, var(--ck) var(--jny-ckmix), var(--ds-text)); }
html[data-scene="gems"] .jny .jny-h { text-shadow: 0 0 2.4rem color-mix(in srgb, var(--ck) var(--jny-glow), transparent), 0 0 .6rem color-mix(in srgb, var(--jny-ground) 80%, transparent); }
html[data-scene="gems"] .jny-node__dot { background: color-mix(in srgb, var(--ck) calc(var(--lit, 0) * 100%), var(--jny-ground)); }
html[data-scene="gems"] .jny-node__name { text-shadow: 0 0 .6rem var(--jny-ground); }
/* below the wide layout (phones and tablets) the scene is centred, so the words sit low under it, on a veil */
@media (max-width: 63.99rem) {
  html[data-scene="gems"] .jny-cap { justify-content: flex-end; padding-block-end: var(--ds-space-8); }
  html[data-scene="gems"] .jny-open { align-items: flex-start; }
  html[data-scene="gems"] .jny-shade { background: linear-gradient(0deg, color-mix(in srgb, var(--jny-ground) 90%, transparent) 0%, color-mix(in srgb, var(--jny-ground) 74%, transparent) 40%, color-mix(in srgb, var(--jny-ground) 30%, transparent) 66%, transparent 88%); }
  html[data-scene="gems"] .jny-open .jny-shade { display: none; }
}
html[data-scene="gems"] .jny-world .jny-fh { text-shadow: 0 0 2.2rem color-mix(in srgb, var(--ds-action) var(--jny-halo), transparent); }
html[data-scene="gems"] .ds-footer.ds-footer--home { background: var(--jny-ground); }
@media (hover: hover) { html[data-scene="gems"] .jny-world-ic::after { background: var(--jny-ground); } }
html[data-scene="gems"] .jny-world .ds-button--secondary { background: color-mix(in srgb, var(--jny-ground) 30%, transparent); }
/* Temple Dawn, where the scene sits behind the words (phones and tablets): the muted lines take a little of the full ink, so they stay at AA over the warm wash of the centre in view */
@media (max-width: 63.99rem) {
  html[data-scene="gems"]:root:not(.dark):not([data-theme="dark"]) .jny .jny-bg { color: color-mix(in srgb, var(--ds-text-muted) 82%, var(--ds-text)); }
}

/* ---------------------------------------------------------------- the chakra pages: the footer keeps the scene's light behind it (the shell's footer is not positioned, so the fixed layer would paint over it) */
html[data-scene="gems"]:has(.about-world) .ds-footer { position: relative; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ds-surface-sunken) 90%, transparent) 5rem); border-block-start: 0; }

/* Temple Dawn: the backplate behind a portrait is a soft warm plate (raised parchment, a gentle amber edge) and the lights that rise are fainter; the portrait itself is untouched */
html[data-scene="gems"]:root:not(.dark):not([data-theme="dark"]) .about-swaroop__plate, html[data-scene="gems"]:root:not(.dark):not([data-theme="dark"]) .gyan-swaroop__plate {
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ds-surface-raised) 92%, transparent) 40%, color-mix(in srgb, var(--ds-accent) 16%, transparent) 72%, transparent 100%); }
html[data-scene="gems"]:root:not(.dark):not([data-theme="dark"]) .about-swaroop__plate::before, html[data-scene="gems"]:root:not(.dark):not([data-theme="dark"]) .gyan-swaroop__plate::before { opacity: .4; }
html[data-scene="gems"]:root:not(.dark):not([data-theme="dark"]) .about-swaroop__plate::after, html[data-scene="gems"]:root:not(.dark):not([data-theme="dark"]) .gyan-swaroop__plate::after { opacity: .15; }