/* Course index figures: F4 the hero art (.ch-*), F5 what course-journey.js adds to the page's journey (.cj-*).
   Loaded on the index only, after javascript.css and index.css. Design spec 8.6. */

/* =========================================================================================================
   F4 · course-hero (night art): one engine core, two host shells. Labels 11 px or more at 1440, 10 at 390.
   ========================================================================================================= */
[data-fx="course-hero"] { --sa: 192 132 252; --sb: 125 211 252; --sc: 251 191 36; }
[data-fx="course-hero"] > .fx-art { position: absolute; inset: 2.5%; perspective: 1500px; }
.ch {
  display: block; width: 100%; height: 100%; overflow: visible;
  transform: rotateX(var(--lean-x, 0deg)) rotateY(var(--lean-y, 0deg)); transition: transform .9s var(--fx-ease-out, ease);
}
.ch :is(rect, path, circle) { vector-effect: non-scaling-stroke; }
.ch text { font-family: var(--font-body); }
.ch-k { font-size: 15.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; fill: #c084fc; }
.ch-you { font-size: 15.5px; font-weight: 600; fill: #fbbf24; }
.ch-tg { font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; fill: #ecebf3; }
@media (max-width: 600px) { .ch-k, .ch-you, .ch-tg { font-size: 19px; } }

.ch-ring__halo { fill: none; stroke: #7dd3fc; stroke-opacity: .09; stroke-width: 9; }
.ch-ring { fill: rgba(125, 211, 252, .04); stroke: #7dd3fc; stroke-opacity: .62; stroke-width: 1.5; }
.ch-core__base { fill: #121223; }
.ch-core { fill: rgba(192, 132, 252, .2); stroke: #c084fc; stroke-opacity: .85; stroke-width: 1.5; }
.ch-chip rect { fill: rgba(251, 191, 36, .1); stroke: #fbbf24; stroke-opacity: .85; stroke-width: 1.3; }
.ch-tag rect { fill: #0f1729; stroke: #7dd3fc; stroke-width: 1.4; filter: drop-shadow(0 0 7px rgba(125, 211, 252, .3)); }
.ch-wire { fill: none; stroke: #7dd3fc; stroke-opacity: .5; stroke-width: 1.4; }
.ch-sock circle { fill: #0f1729; stroke: #7dd3fc; stroke-width: 1.5; }
.ch-ico { fill: none; stroke: #7dd3fc; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ch-fill { fill: #7dd3fc; stroke: none; }
.ch-pulse { fill: none; stroke: #fbbf24; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 14 100; stroke-dashoffset: 14; opacity: 0; filter: drop-shadow(0 0 5px rgba(251, 191, 36, .8)); }

/* The loop: 10 s. Your code's pulse goes into the page's plug (0-1.6 s, the plug glows to 3.4 s), then into Node's
   files plug (5-6.6 s, glow to 8.4 s). Still: no pulse, both plugs plain. */
.ch--loop .ch-pulse--l { animation: ch-pulse-l 10s var(--fx-ease-io, ease-in-out) infinite; }
.ch--loop .ch-pulse--r { animation: ch-pulse-r 10s var(--fx-ease-io, ease-in-out) infinite; }
.ch--loop .ch-sock--l circle { animation: ch-glow-l 10s ease-in-out infinite; }
.ch--loop .ch-sock--r circle { animation: ch-glow-r 10s ease-in-out infinite; }
@keyframes ch-pulse-l { 0% { opacity: 0; stroke-dashoffset: 14; } 2% { opacity: 1; } 15% { opacity: 1; stroke-dashoffset: -86; } 17%, 100% { opacity: 0; stroke-dashoffset: -86; } }
@keyframes ch-pulse-r { 0%, 50% { opacity: 0; stroke-dashoffset: 14; } 52% { opacity: 1; } 65% { opacity: 1; stroke-dashoffset: -86; } 67%, 100% { opacity: 0; stroke-dashoffset: -86; } }
@keyframes ch-glow-l { 0%, 14% { filter: none; } 18%, 30% { filter: drop-shadow(0 0 9px rgba(251, 191, 36, .75)); stroke: #fbbf24; } 36%, 100% { filter: none; } }
@keyframes ch-glow-r { 0%, 64% { filter: none; } 68%, 80% { filter: drop-shadow(0 0 9px rgba(251, 191, 36, .75)); stroke: #fbbf24; } 86%, 100% { filter: none; } }
[data-teaching="true"] .ch { transform: none; }
@media (prefers-reduced-motion: reduce) { .ch--loop :is(.ch-pulse, .ch-sock circle) { animation: none; } .ch { transition: none; } }
@media print { .ch { transform: none; } .ch-pulse { display: none; } }

/* =========================================================================================================
   F5 · the journey (page-owned ol.capsules[data-fx="journey"]): where to start, what is read, one light once.
   ========================================================================================================= */
.cj-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
  font: 700 .6rem/1.35 var(--font-body); letter-spacing: .09em; text-transform: uppercase; white-space: nowrap;
}
.cj-pill--here { color: var(--bg); background: var(--ink); }
.cj-pill--read { color: var(--ok); background: color-mix(in srgb, var(--ok) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); padding: 2px 8px; }
.cj-pill--read::before { content: ""; width: 9px; height: 5px; margin-top: -2px; border: solid currentColor; border-width: 0 0 1.8px 1.8px; transform: rotate(-45deg); }
/* A read capsule: a check in its node on the line (the node is the page's li::before). */
.capsules.cj > li.is-read:has(.capsule-card)::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4L18.5 7.5'/%3E%3C/svg%3E") center / 11px no-repeat, #17784f;
}
/* The next one to read: its node breathes twice, then rests. */
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="off"]) .capsules.cj > li.is-here:has(.capsule-card)::before { animation: cj-here 2.4s ease-in-out 1s 2; }
}
@keyframes cj-here { 50% { box-shadow: 0 0 0 5px var(--bg), 0 0 0 9px color-mix(in srgb, var(--ink) 18%, transparent), 0 0 26px 4px color-mix(in srgb, var(--host) 45%, transparent); } }
/* The light that runs down the written part of the line, once per visit. */
.cj-glint {
  position: absolute; z-index: 0; left: calc(var(--lead, 0px) + var(--c2, 24px) / 2 - 2px); top: 12px; width: 4px; height: 84px;
  border-radius: 4px; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .95) 50%, transparent);
  filter: drop-shadow(0 0 6px rgba(125, 211, 252, .9));
}
@media print { .cj-glint { display: none; } }