/* Homepage journey preview (Local only): the Sneaky Thread (DESIGN-SPEC §6). The R6 reference stylesheet with the §6.1
   renames, every selector under .shh.shj, Learn tone O10 and a fallback before each color-mix(). The layer (z 2) sits
   above band backgrounds and below every content wrap (z 3); scroll-linked only, nothing moves under reduced motion. */

/* tones (§6.5); --shj-halo: each tone at .42 for browsers without color-mix() */
.shh.shj {
	--shj-hero: #3fb39d; --shj-assess: #3fb39d; --shj-train: #4ea6ec; --shj-eat: #5cb860; --shj-journey: #6ec4e8;
	--shj-help: #d6336c; --shj-learn: #b8740a; --shj-trainers: #2b8fd6; --shj-end: #3fb39d;
}
.shh.shj [data-shj-tone="hero"] { --shj-tone: var(--shj-hero); --shj-halo: rgba(63, 179, 157, .42); }
.shh.shj [data-shj-tone="assess"] { --shj-tone: var(--shj-assess); --shj-halo: rgba(63, 179, 157, .42); }
.shh.shj [data-shj-tone="train"] { --shj-tone: var(--shj-train); --shj-halo: rgba(78, 166, 236, .42); }
.shh.shj [data-shj-tone="eat"] { --shj-tone: var(--shj-eat); --shj-halo: rgba(92, 184, 96, .42); }
.shh.shj [data-shj-tone="journey"] { --shj-tone: var(--shj-journey); --shj-halo: rgba(110, 196, 232, .42); }
.shh.shj [data-shj-tone="help"] { --shj-tone: var(--shj-help); --shj-halo: rgba(214, 51, 108, .42); }
.shh.shj [data-shj-tone="learn"] { --shj-tone: var(--shj-learn); --shj-halo: rgba(184, 116, 10, .42); }
.shh.shj [data-shj-tone="trainers"] { --shj-tone: var(--shj-trainers); --shj-halo: rgba(43, 143, 214, .42); }

/* the layer: the root's first child, injected by shj-thread.js */
.shh.shj .shj-layer { position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 0; pointer-events: none; }
.shh.shj .shj-layer svg { position: absolute; left: 0; top: 0; overflow: visible; }
.shh.shj .shj-layer path { fill: none; stroke: url(#shj-grad); stroke-linecap: round; stroke-linejoin: round; }
/* ahead dotted, done solid (My Journey's grammar) */
.shh.shj .shj-ahead { stroke-width: 3; stroke-dasharray: 0 11; opacity: .5; }
/* the lit copy, revealed by moving its clip box (transform only) */
.shh.shj .shj-clip { position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; will-change: transform; }
.shh.shj .shj-clip > svg { will-change: transform; }
.shh.shj .shj-glow { stroke-width: 14; opacity: .16; }
.shh.shj .shj-line { stroke-width: 4; }
/* the gutter lane below 1024: thinner, so the glow stays clear of the content */
@media (max-width: 1023.98px) {
	.shh.shj .shj-line { stroke-width: 3; }
	.shh.shj .shj-glow { stroke-width: 9; }
	.shh.shj .shj-ahead { stroke-width: 2.5; }
}
/* the spark: where the light has reached; a white core in the current band's tone */
.shh.shj .shj-spark { position: absolute; left: 0; top: 0; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; opacity: 0;
	background: radial-gradient(circle, #fff 0 2.8px, var(--shj-spark, #3fb39d) 4.6px, transparent 12px);
	will-change: transform; }
.shh.shj .shj-spark.is-on { opacity: 1; }
/* narrow screens: beads on the gutter lane mark each section's node */
.shh.shj .shj-bead { position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2.5px var(--shj-tone, #3fb39d); }
.shh.shj .shj-bead::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: var(--shj-tone, #3fb39d); box-shadow: 0 0 8px var(--shj-tone, #3fb39d); opacity: 0; transform: scale(.4); }
.shh.shj .shj-bead.is-lit::after { opacity: 1; transform: scale(1); } /* never transform: none (R6 §4 rule 12) */
/* nodes: a halo behind and one ring as the light arrives (opacity and transform only) */
.shh.shj [data-shj-node] { position: relative; }
.shh.shj [data-shj-node]::before { content: ""; position: absolute; inset: -22px; z-index: -1; border-radius: 50%; pointer-events: none;
	background: radial-gradient(closest-side, var(--shj-halo, rgba(63, 179, 157, .42)), transparent); opacity: 0; transform: scale(.55); }
.shh.shj [data-shj-node]::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--shj-tone, #3fb39d); opacity: 0; pointer-events: none; }
.shh.shj [data-shj-node].is-lit::before { opacity: 1; transform: scale(1); }
/* without JS: a short arrival into each node, in its band's tone */
.shh.shj .shj-arrive { position: absolute; left: 50%; bottom: 100%; width: 3px; height: clamp(28px, 4vw, 56px); margin-left: -1.5px; border-radius: 3px; pointer-events: none;
	background: linear-gradient(180deg, transparent, var(--shj-tone, #3fb39d)); }
.shh.shj.shj-threaded .shj-arrive { display: none; }

/* the reference's color-mix() glows and halo */
@supports (color: color-mix(in srgb, red 50%, blue)) {
	.shh.shj .shj-spark { background: radial-gradient(circle, #fff 0 2.8px, var(--shj-spark, #3fb39d) 4.6px, color-mix(in srgb, var(--shj-spark, #3fb39d) 45%, transparent) 7px, transparent 12px); }
	.shh.shj .shj-bead::after { box-shadow: 0 0 10px 2px color-mix(in srgb, var(--shj-tone, #3fb39d) 55%, transparent); }
	.shh.shj [data-shj-node]::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--shj-tone, #3fb39d) 42%, transparent), transparent); }
}

@media (prefers-reduced-motion: no-preference) {
	.shh.shj .shj-spark { transition: opacity .3s ease; }
	.shh.shj .shj-bead::after { transition: opacity .5s ease, transform .6s cubic-bezier(.34, 1.56, .64, 1); }
	.shh.shj [data-shj-node]::before { transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.34, 1.56, .64, 1); }
	.shh.shj [data-shj-node].is-lit::after { animation: shj-ring 1s ease-out 1 both; }
}
@keyframes shj-ring { from { opacity: .85; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }
@media (prefers-reduced-motion: reduce) {
	.shh.shj .shj-spark { display: none; }
	.shh.shj .shj-layer *, .shh.shj [data-shj-node]::before, .shh.shj [data-shj-node]::after { transition: none !important; animation: none !important; }
}
@media print { .shh.shj .shj-layer, .shh.shj .shj-arrive { display: none !important; } }