/* The chakra engine's styles: the subtle layer (a soft glow and a faint petal ring in the centre's colour, drawn with CSS only), the
   posters and canvases of the accent and signature layers (assets/js/shell/chakra.js loads those), the dark temple page helper and the
   "Why this chakra?" note. Markup comes from ds_chakra() and ds_chakra_why() (includes/shell/chakra.php).
   The seven centre colours are defined once, here, as --ck-root ... --ck-crown (the same table as diorama/site/chakra/centres.js); nothing else
   may carry a hex value for them. The layer is decoration: aria-hidden, never focusable, and nothing in it moves under reduced motion. */
:root {
  --ck-root: #FF3A1F;
  --ck-sacral: #FF7318;
  --ck-solar: #FFC82E;
  --ck-heart: #4DF273;
  --ck-throat: #47B3FF;
  --ck-third-eye: #806BFF;
  --ck-crown: #F299FF;
}

/* ---------------------------------------------------------------- the layer: behind everything, on the temple black, always dark */
.ds-chakra { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--ds-overlay-surface, var(--ds-surface-sunken)); contain: strict; }
.ds-chakra__poster, .ds-chakra__canvas { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; }
.ds-chakra__poster img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 50%; }
.ds-chakra__canvas { opacity: 0; }
.ds-chakra.is-live .ds-chakra__canvas { opacity: 1; }
.ds-chakra.is-live .ds-chakra__poster, .ds-chakra.is-live .ds-chakra__glow, .ds-chakra.is-live .ds-chakra__motif { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ds-chakra__canvas, .ds-chakra__poster, .ds-chakra__glow, .ds-chakra__motif { transition: opacity var(--ds-dur-slow, .4s) linear; }
}

/* 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 */
.ds-chakra[data-intensity="signature"]::after, .ds-chakra[data-intensity="accent"]::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ds-overlay-surface) 70%, transparent) 0%, color-mix(in srgb, var(--ds-overlay-surface) 30%, transparent) 40%, transparent 62%); }
@media (max-width: 47.99rem) {
  .ds-chakra[data-intensity="signature"]::after, .ds-chakra[data-intensity="accent"]::after { background: color-mix(in srgb, var(--ds-overlay-surface) 48%, transparent); }
}

/* ---------------------------------------------------------------- the subtle layer: a still glow and a faint petal ring */
.ds-chakra__glow { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 72% 46%, color-mix(in srgb, var(--ck, var(--ck-heart)) 16%, transparent), transparent 70%); }
.ds-chakra__motif { position: absolute; inset-block-start: 50%; inset-inline-start: 72%; inline-size: min(92vmin, 52rem); aspect-ratio: 1; margin: calc(min(92vmin, 52rem) / -2) 0 0 calc(min(92vmin, 52rem) / -2);
  background: var(--ck, var(--ck-heart)); opacity: .14; -webkit-mask: var(--ck-petals) center / contain no-repeat; mask: var(--ck-petals) center / contain no-repeat; }
.ds-chakra[data-intensity="signature"] .ds-chakra__motif { opacity: .06; }
@media (max-width: 47.99rem) {
  .ds-chakra__glow { background: radial-gradient(ellipse 90% 50% at 50% 38%, color-mix(in srgb, var(--ck, var(--ck-heart)) 16%, transparent), transparent 72%); }
  .ds-chakra__motif { inset-inline-start: 50%; inset-block-start: 38%; inline-size: min(110vmin, 40rem); margin: calc(min(110vmin, 40rem) / -2) 0 0 calc(min(110vmin, 40rem) / -2); }
}
/* a very slow drift, only where motion is welcome */
@media (prefers-reduced-motion: no-preference) {
  .ds-chakra__motif { animation: ds-chakra-turn 420s linear infinite; }
  .ds-chakra__glow { animation: ds-chakra-breathe 22s ease-in-out infinite alternate; }
  @keyframes ds-chakra-turn { to { transform: rotate(1turn); } }
  @keyframes ds-chakra-breathe { from { opacity: .72; } to { opacity: 1; } }
}
@media print { .ds-chakra { display: none; } }

/* each centre: its colour and its petal ring (the count the tradition names: 4, 6, 10, 12, 16, 2 and many) */
[data-chakra="root"] { --ck: var(--ck-root); --ck-petals: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200' fill='none' stroke='white' stroke-width='1.1'><defs><path id='a' d='M0 0C-34 -35 -27 -62 0 -78C27 -62 34 -35 0 0Z'/><g id='b'><use href='%23a'/><use href='%23a' transform='rotate(180)'/></g><g id='c'><use href='%23b'/><use href='%23b' transform='rotate(90)'/></g></defs><use href='%23c'/><circle r='9'/><circle r='88' opacity='.5'/></svg>"); }
[data-chakra="sacral"] { --ck: var(--ck-sacral); --ck-petals: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200' fill='none' stroke='white' stroke-width='1.1'><defs><path id='a' d='M0 0C-34 -35 -27 -62 0 -78C27 -62 34 -35 0 0Z'/><g id='b'><use href='%23a'/><use href='%23a' transform='rotate(180)'/></g><g id='c'><use href='%23b'/><use href='%23b' transform='rotate(60)'/><use href='%23b' transform='rotate(120)'/></g></defs><use href='%23c'/><circle r='9'/><circle r='88' opacity='.5'/></svg>"); }
[data-chakra="solar"] { --ck: var(--ck-solar); --ck-petals: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200' fill='none' stroke='white' stroke-width='1.1'><defs><path id='a' d='M0 0C-23 -35 -18 -62 0 -78C18 -62 23 -35 0 0Z'/><g id='b'><use href='%23a'/><use href='%23a' transform='rotate(180)'/></g><g id='c'><use href='%23b'/><use href='%23b' transform='rotate(36)'/><use href='%23b' transform='rotate(72)'/><use href='%23b' transform='rotate(108)'/><use href='%23b' transform='rotate(144)'/></g></defs><use href='%23c'/><circle r='9'/><circle r='88' opacity='.5'/></svg>"); }
[data-chakra="heart"] { --ck: var(--ck-heart); --ck-petals: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200' fill='none' stroke='white' stroke-width='1.1'><defs><path id='a' d='M0 0C-19 -35 -15 -62 0 -78C15 -62 19 -35 0 0Z'/><g id='b'><use href='%23a'/><use href='%23a' transform='rotate(180)'/></g><g id='c'><use href='%23b'/><use href='%23b' transform='rotate(90)'/></g><g id='d'><use href='%23c'/><use href='%23c' transform='rotate(30)'/><use href='%23c' transform='rotate(60)'/></g></defs><use href='%23d'/><circle r='9'/><circle r='88' opacity='.5'/></svg>"); }
[data-chakra="throat"] { --ck: var(--ck-throat); --ck-petals: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200' fill='none' stroke='white' stroke-width='1.1'><defs><path id='a' d='M0 0C-14 -36 -11 -64 0 -80C11 -64 14 -36 0 0Z'/><g id='b'><use href='%23a'/><use href='%23a' transform='rotate(180)'/></g><g id='c'><use href='%23b'/><use href='%23b' transform='rotate(90)'/></g><g id='d'><use href='%23c'/><use href='%23c' transform='rotate(45)'/></g><g id='e'><use href='%23d'/><use href='%23d' transform='rotate(22.5)'/></g></defs><use href='%23e'/><circle r='9'/><circle r='50'/></svg>"); }
[data-chakra="third-eye"] { --ck: var(--ck-third-eye); --ck-petals: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200' fill='none' stroke='white' stroke-width='1.1'><path d='M-80 0Q0-60 80 0Q0 60-80 0Z'/><circle r='20'/><circle r='6'/></svg>"); }
[data-chakra="crown"] { --ck: var(--ck-crown); --ck-petals: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200' fill='none' stroke='white' stroke-width='1.1'><defs><path id='a' d='M0 0C-10 -36 -8 -64 0 -80C8 -64 10 -36 0 0Z'/><g id='b'><use href='%23a'/><use href='%23a' transform='rotate(180)'/></g><g id='c'><use href='%23b'/><use href='%23b' transform='rotate(90)'/></g><g id='d'><use href='%23c'/><use href='%23c' transform='rotate(45)'/></g><g id='e'><use href='%23d'/><use href='%23d' transform='rotate(15)'/><use href='%23d' transform='rotate(30)'/></g></defs><use href='%23e'/><circle r='9'/><circle r='50'/></svg>"); }

/* ---------------------------------------------------------------- the page helper: the dark temple world (the page also wears .ds-theme-dark)
   Story beats are plain text and media on the black: no boxes, no cards, a hairline between beats at most; the scroll is fluid (no snapping). */
.ds-chakra-page { position: relative; isolation: isolate; background: transparent; color: var(--ds-text); scroll-snap-type: none; overflow-x: clip; }
/* the shell footer: positioned (the fixed layer would paint over it) and on the black in both themes; the light header is opaque, as on the homepage */
:root:has(.ds-chakra) .ds-footer { position: relative; }
:root:has(.ds-chakra-page) .ds-footer { --ds-text: var(--ds-overlay-text); --ds-text-muted: var(--ds-overlay-muted); --ds-accent: var(--ds-overlay-accent); --ds-border: var(--ds-overlay-border); --ds-focus: var(--ds-overlay-accent);
  background: color-mix(in srgb, var(--ds-overlay-surface) 84%, transparent); color: var(--ds-overlay-text); }
:root:not(.dark):has(.ds-chakra-page) .ds-header:not(.ds-theme-dark) { background: var(--ds-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
.ds-chakra-page ::selection { background: color-mix(in srgb, var(--ck, var(--ds-accent)) 40%, transparent); }
.ds-chakra-beat { position: relative; display: block; margin: 0; padding-block: var(--ds-space-8); padding-inline: var(--ds-gutter, 1rem); background: transparent; border: 0; box-shadow: none; border-radius: 0; }
.ds-chakra-beat > * { max-inline-size: 62rem; margin-inline: auto; }
.ds-chakra-beat--rule { border-block-start: 1px solid var(--ds-border); }
.ds-chakra-flat { background: transparent; border: 0; box-shadow: none; border-radius: 0; backdrop-filter: none; }
.ds-chakra-page .ds-chakra-beat :is(h1, h2) { text-shadow: 0 0 2.2rem color-mix(in srgb, var(--ck, var(--ds-accent)) 38%, transparent), 0 0 .6rem color-mix(in srgb, var(--ds-surface-sunken) 80%, transparent); }

/* ---------------------------------------------------------------- "Why this chakra?": a native disclosure in the page's flow, closed at first */
.ds-chakra-why { max-inline-size: 42rem; margin-block: var(--ds-space-6, 24px); color: var(--ds-text-muted); font-size: var(--ds-text-md); line-height: var(--ds-leading-normal); }
.ds-chakra-why > summary { display: flex; align-items: center; gap: var(--ds-space-2, 8px); min-block-size: 2.75rem; cursor: pointer; color: var(--ck-text, var(--ds-accent)); list-style: none; }
.ds-chakra-why > summary::-webkit-details-marker { display: none; }
.ds-chakra-why > summary::before { content: ""; inline-size: .55rem; block-size: .55rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform var(--ds-dur-base, .2s) var(--ds-ease-gentle, ease); }
.ds-chakra-why[open] > summary::before { transform: rotate(45deg); }
.ds-chakra-why > summary:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 3px; border-radius: var(--ds-radius-sm, 4px); }
.ds-chakra-why__body { padding-block: var(--ds-space-2, 8px) var(--ds-space-3, 12px); border-inline-start: 1px solid var(--ds-border); padding-inline-start: var(--ds-space-4, 16px); }
.ds-chakra-why__body p { margin: 0 0 var(--ds-space-3, 12px); }
.ds-chakra-why__body p:last-child { margin-block-end: 0; }
.ds-chakra-why__name { color: var(--ds-text); }
.ds-chakra-why__frame { font-size: var(--ds-text-sm); font-style: italic; }
@media (prefers-reduced-motion: reduce) { .ds-chakra-why > summary::before { transition: none; } }

/* ---------------------------------------------------------------- the subtle layer's motif variants (CSS only, no script, no raster)
   Chosen by data-aspect (CHAKRA_SUBTLE_ASPECTS in includes/shell/chakra.php). `glow` is the default above: a soft glow and the centre's petal ring.
   Every other variant is drawn from the same two spans (.ds-chakra__glow and .ds-chakra__motif) in the centre's colour (--ck), still, faint and behind
   the words: the brightest point stays under a fifth of the colour, so pale text keeps its contrast. Where a variant moves at all it is one very slow
   drift, only where motion is welcome. The layer is always dark, in both themes. */
.ds-chakra[data-intensity="subtle"] { --ckv: var(--ck, var(--ck-heart)); }
.ds-chakra[data-intensity="subtle"]:where(:not(.is-live)):where([data-aspect="bloom"], [data-aspect="lamp"], [data-aspect="seal"], [data-aspect="shelter"], [data-aspect="threshold"],
  [data-aspect="dawn"], [data-aspect="ground"], [data-aspect="anchor"], [data-aspect="foundation"]) .ds-chakra__motif { -webkit-mask: none; mask: none; background: none; opacity: 1; animation: none; }

/* bloom (the heart, giving): a ring of twelve soft petals that opens very slowly, and no further */
.ds-chakra[data-aspect="bloom"] .ds-chakra__glow { background: radial-gradient(circle 32rem at 72% 50%, color-mix(in srgb, var(--ckv) 12%, transparent), transparent 70%); }
.ds-chakra[data-aspect="bloom"] .ds-chakra__motif { opacity: .9; contain: layout;
  background: radial-gradient(circle closest-side, transparent 0 32%, color-mix(in srgb, var(--ckv) 22%, transparent) 32.4%, transparent 33.6%),
    repeating-conic-gradient(from -11deg, transparent 0deg, color-mix(in srgb, var(--ckv) 22%, transparent) 11deg, transparent 22deg 30deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 24%, black 40%, black 54%, transparent 80%); mask: radial-gradient(circle closest-side, transparent 0 24%, black 40%, black 54%, transparent 80%); }
/* the inner ring of petals, offset half a petal and a little smaller */
.ds-chakra[data-aspect="bloom"] .ds-chakra__motif::before { content: ""; position: absolute; inset: 21%;
  background: repeating-conic-gradient(from 4deg, transparent 0deg, color-mix(in srgb, var(--ckv) 24%, transparent) 11deg, transparent 22deg 30deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 14%, black 50%, transparent 92%); mask: radial-gradient(circle closest-side, transparent 0 14%, black 50%, transparent 92%); }

/* lamp (service from home): one soft flame-shaped glow over a low bowl of light */
.ds-chakra[data-aspect="lamp"] .ds-chakra__glow { background:
  radial-gradient(ellipse 5.5rem 9rem at 72% 41%, color-mix(in srgb, var(--ckv) 16%, transparent), transparent 100%),
  radial-gradient(circle 26rem at 72% 44%, color-mix(in srgb, var(--ckv) 9%, transparent), transparent 100%); }
.ds-chakra[data-aspect="lamp"] .ds-chakra__motif { inset: auto; inset-block-start: 56%; inset-inline-start: 72%; inline-size: 15rem; block-size: 2.4rem; aspect-ratio: auto; margin: 0 0 0 -7.5rem;
  background: radial-gradient(ellipse closest-side, color-mix(in srgb, var(--ckv) 24%, transparent), transparent 100%); }

/* seal (a certificate checked): fine concentric rings, like the impression of a seal */
.ds-chakra[data-aspect="seal"] .ds-chakra__glow { background: radial-gradient(circle 30rem at 72% 50%, color-mix(in srgb, var(--ckv) 8%, transparent), transparent 70%); }
.ds-chakra[data-aspect="seal"] .ds-chakra__motif { opacity: .9;
  background: radial-gradient(circle closest-side, transparent 0 78%, color-mix(in srgb, var(--ckv) 22%, transparent) 78.3%, transparent 79.3%),
    repeating-radial-gradient(circle closest-side, transparent 0 .85rem, color-mix(in srgb, var(--ckv) 24%, transparent) .85rem calc(.85rem + 1px));
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 8%, black 30%, black 64%, transparent 84%); mask: radial-gradient(circle closest-side, transparent 0 8%, black 30%, black 64%, transparent 84%); }

/* shelter (safeguarding): a soft arc held around a small light */
.ds-chakra[data-aspect="shelter"] .ds-chakra__glow { background:
  radial-gradient(circle 2.6rem at 72% 50%, color-mix(in srgb, var(--ckv) 20%, transparent), transparent 100%),
  radial-gradient(circle 22rem at 72% 50%, color-mix(in srgb, var(--ckv) 9%, transparent), transparent 100%); }
.ds-chakra[data-aspect="shelter"] .ds-chakra__motif { inline-size: min(70vmin, 36rem); margin: calc(min(70vmin, 36rem) / -2) 0 0 calc(min(70vmin, 36rem) / -2);
  background: radial-gradient(circle closest-side, transparent 0 88%, color-mix(in srgb, var(--ckv) 24%, transparent) 94%, transparent 100%);
  -webkit-mask: conic-gradient(from -105deg at 50% 50%, transparent 0deg, black 50deg, black 160deg, transparent 210deg 360deg); mask: conic-gradient(from -105deg at 50% 50%, transparent 0deg, black 50deg, black 160deg, transparent 210deg 360deg); }

/* threshold (sign in): an open doorway of light, a tall soft arch rising from the foot of the page */
.ds-chakra[data-aspect="threshold"] .ds-chakra__glow { background: radial-gradient(ellipse 22rem 70% at 72% 100%, color-mix(in srgb, var(--ckv) 10%, transparent), transparent 100%); }
.ds-chakra[data-aspect="threshold"] .ds-chakra__motif { inset: auto; inset-block-end: 0; inset-inline-start: 72%; inline-size: min(40vmin, 20rem); block-size: min(86vh, 44rem); aspect-ratio: auto; margin: 0 0 0 calc(min(40vmin, 20rem) / -2);
  border-radius: 999px 999px 0 0; border: 1px solid color-mix(in srgb, var(--ckv) 20%, transparent); border-block-end: 0;
  background: radial-gradient(ellipse 60% 90% at 50% 100%, color-mix(in srgb, var(--ckv) 10%, transparent), color-mix(in srgb, var(--ckv) 4%, transparent) 60%, transparent 100%);
  -webkit-mask: linear-gradient(to top, black 45%, rgba(0, 0, 0, .55)); mask: linear-gradient(to top, black 45%, rgba(0, 0, 0, .55)); }

/* dawn (register): a low light rising along the bottom edge, like first morning */
.ds-chakra[data-aspect="dawn"] .ds-chakra__glow { background: radial-gradient(ellipse 80% 34% at 50% 104%, color-mix(in srgb, var(--ckv) 15%, transparent), color-mix(in srgb, var(--ckv) 7%, transparent) 50%, transparent 100%); }
.ds-chakra[data-aspect="dawn"] .ds-chakra__motif { inset: auto 0 0 0; inline-size: auto; block-size: 18vh; aspect-ratio: auto; margin: 0;
  background: radial-gradient(ellipse 46% 100% at 50% 100%, color-mix(in srgb, var(--ckv) 15%, transparent), transparent 100%); }

/* ground (privacy): a low, steady band of light along the lower part of the page */
.ds-chakra[data-aspect="ground"] .ds-chakra__glow { background: linear-gradient(to top, color-mix(in srgb, var(--ckv) 10%, transparent), transparent 30%); }
.ds-chakra[data-aspect="ground"] .ds-chakra__motif { inset: auto 0 14vh 0; inline-size: auto; block-size: 9vh; aspect-ratio: auto; margin: 0;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--ckv) 15%, transparent) 50%, transparent); }

/* anchor (a privacy page): a small anchored light low on the page, a faint vertical line down to the ground */
.ds-chakra[data-aspect="anchor"] .ds-chakra__glow { background:
  radial-gradient(circle .4rem at 72% 70%, color-mix(in srgb, var(--ckv) 30%, transparent), transparent 100%),
  radial-gradient(circle 11rem at 72% 70%, color-mix(in srgb, var(--ckv) 16%, transparent), transparent 100%); }
.ds-chakra[data-aspect="anchor"] .ds-chakra__motif { inset: auto; inset-block-start: 70%; inset-block-end: 0; inset-inline-start: 72%; inline-size: 1px; block-size: auto; aspect-ratio: auto; margin: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--ckv) 30%, transparent), color-mix(in srgb, var(--ckv) 10%, transparent) 70%, transparent); }

/* foundation (accessibility): a wide, even glow at the foot of the page */
.ds-chakra[data-aspect="foundation"] .ds-chakra__glow { background: linear-gradient(to top, color-mix(in srgb, var(--ckv) 15%, transparent), color-mix(in srgb, var(--ckv) 6%, transparent) 22%, transparent 48%); }
.ds-chakra[data-aspect="foundation"] .ds-chakra__motif { inset: auto 0 0 0; inline-size: auto; block-size: 2px; aspect-ratio: auto; margin: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ckv) 30%, transparent) 20% 80%, transparent); }

@media (max-width: 47.99rem) {
  .ds-chakra[data-aspect="bloom"] .ds-chakra__glow { background: radial-gradient(circle 24rem at 50% 38%, color-mix(in srgb, var(--ckv) 12%, transparent), transparent 70%); }
  .ds-chakra[data-aspect="dawn"] .ds-chakra__glow { background: radial-gradient(ellipse 130% 26% at 50% 104%, color-mix(in srgb, var(--ckv) 15%, transparent), color-mix(in srgb, var(--ckv) 7%, transparent) 50%, transparent 100%); }
  .ds-chakra[data-aspect="lamp"] .ds-chakra__glow { background:
    radial-gradient(ellipse 4.5rem 7.5rem at 50% 33%, color-mix(in srgb, var(--ckv) 16%, transparent), transparent 100%),
    radial-gradient(circle 20rem at 50% 36%, color-mix(in srgb, var(--ckv) 9%, transparent), transparent 100%); }
  .ds-chakra[data-aspect="lamp"] .ds-chakra__motif { inset-block-start: 46%; inset-inline-start: 50%; }
  .ds-chakra[data-aspect="seal"] .ds-chakra__glow { background: radial-gradient(circle 22rem at 50% 38%, color-mix(in srgb, var(--ckv) 8%, transparent), transparent 70%); }
  .ds-chakra[data-aspect="shelter"] .ds-chakra__glow { background:
    radial-gradient(circle 2.2rem at 50% 38%, color-mix(in srgb, var(--ckv) 20%, transparent), transparent 100%),
    radial-gradient(circle 17rem at 50% 38%, color-mix(in srgb, var(--ckv) 9%, transparent), transparent 100%); }
  .ds-chakra[data-aspect="shelter"] .ds-chakra__motif { inline-size: min(88vmin, 26rem); margin: calc(min(88vmin, 26rem) / -2) 0 0 calc(min(88vmin, 26rem) / -2); }
  .ds-chakra[data-aspect="threshold"] .ds-chakra__glow { background: radial-gradient(ellipse 90% 60% at 50% 100%, color-mix(in srgb, var(--ckv) 10%, transparent), transparent 100%); }
  .ds-chakra[data-aspect="threshold"] .ds-chakra__motif { inset-inline-start: 50%; inline-size: min(60vw, 16rem); block-size: min(70vh, 32rem); margin-inline-start: calc(min(60vw, 16rem) / -2); }
  .ds-chakra[data-aspect="anchor"] .ds-chakra__glow { background:
    radial-gradient(circle .4rem at 50% 70%, color-mix(in srgb, var(--ckv) 30%, transparent), transparent 100%),
    radial-gradient(circle 9rem at 50% 70%, color-mix(in srgb, var(--ckv) 16%, transparent), transparent 100%); }
  .ds-chakra[data-aspect="anchor"] .ds-chakra__motif { inset-inline-start: 50%; }
}

/* the two slow ones, only where motion is welcome: the bloom opens once over two minutes and stays open, the dawn light rises once and stays up */
@media (prefers-reduced-motion: no-preference) {
  .ds-chakra[data-aspect="bloom"] .ds-chakra__motif { animation: ds-chakra-open 140s cubic-bezier(.25, .6, .3, 1) both; }
  .ds-chakra[data-aspect="dawn"] .ds-chakra__motif { animation: ds-chakra-rise 90s cubic-bezier(.25, .6, .3, 1) both; }
  @keyframes ds-chakra-open { from { transform: scale(.72) rotate(-10deg); opacity: .35; } to { transform: none; opacity: .9; } }
  @keyframes ds-chakra-rise { from { transform: translateY(70%); } to { transform: none; } }
}