/* The gem scene's look, part one: the chakra layer and the page ground (loaded 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"], so nothing here can reach a page that draws the particle scenes.
   In gem mode the pages follow the visitor's theme (Temple Dark, or Temple Dawn on parchment) instead of staying in Temple Dark: the server leaves the .ds-theme-dark classes off
   the page wrapper, the header and the footer, and this sheet puts back what those classes used to give (a layer that takes the theme's own ground, a footer in the theme's colours).
   The glass header, menus, phone bar and footer are the glass shell's (assets/css/ds/glass-shell.css, on every public page, not only these). The page sheets
   (assets/css/ds/pages/*.css, chakra.css) load first and stay as they are; the rules below are written one step more specific so they win, in either order. Tokens only. */

/* ---------------------------------------------------------------- the chakra layer: on the page's own ground in either theme (the particle layer is always the temple black) */
html[data-scene="gems"] .ds-chakra { --ck-ground: var(--ds-surface); --ck-veil: var(--ds-surface); background: var(--ck-ground); transition: background-color .5s ease; }
html[data-scene="gems"].dark .ds-chakra, html[data-scene="gems"][data-theme="dark"] .ds-chakra { --ck-ground: var(--ds-surface-sunken); --ck-veil: var(--ds-overlay-surface); }
/* the poster is a background so that only the one for this theme and orientation is fetched (the four are set inline by ds_chakra()); it fills the viewport */
html[data-scene="gems"] .ds-chakra__poster { background: var(--ck-ll, var(--ck-ld, none)) 50% 50% / cover no-repeat; }
html[data-scene="gems"].dark .ds-chakra__poster, html[data-scene="gems"][data-theme="dark"] .ds-chakra__poster { background-image: var(--ck-ld, var(--ck-ll, none)); }
@media (max-width: 47.99rem) {
  html[data-scene="gems"] .ds-chakra__poster { background-image: var(--ck-pl, var(--ck-ll, var(--ck-pd, none))); }
  html[data-scene="gems"].dark .ds-chakra__poster, html[data-scene="gems"][data-theme="dark"] .ds-chakra__poster { background-image: var(--ck-pd, var(--ck-ld, var(--ck-pl, none))); }
}
/* keeps the words readable over the light: a soft shade on the text side (the scene sits right of centre), an even veil on phones */
html[data-scene="gems"] .ds-chakra[data-intensity="signature"]::after { background: linear-gradient(90deg, color-mix(in srgb, var(--ck-veil) 72%, transparent) 0%, color-mix(in srgb, var(--ck-veil) 34%, transparent) 40%, transparent 62%); }
@media (max-width: 47.99rem) {
  html[data-scene="gems"] .ds-chakra[data-intensity="signature"]::after { background: color-mix(in srgb, var(--ck-veil) 50%, transparent); }
}

/* ---------------------------------------------------------------- the page: it follows the theme, so the footer takes the theme's own colours again (its ground is the glass shell's) */
html[data-scene="gems"]:has(.ds-chakra-page) .ds-footer { --ds-text: unset; --ds-text-muted: unset; --ds-accent: unset; --ds-border: unset; --ds-focus: unset; color: var(--ds-text); }
html[data-scene="gems"] .ds-chakra-page .ds-chakra-beat :is(h1, h2) { text-shadow: 0 0 2.2rem color-mix(in srgb, var(--ck, var(--ds-accent)) 30%, transparent), 0 0 .6rem color-mix(in srgb, var(--ds-surface-sunken) 80%, transparent); }