/* Course index · what figures/course-hero.js and figures/course-journey.js add to the design's hero art and capsule
   map (both drawn by mobile.css). Loaded after mobile.css and index.css, on the course index only. */

/* ---------- Hero: depth on a fine pointer (the home portrait's lean) ---------- */
.stage--layers .art {
  transform: perspective(1500px) rotateX(var(--lean-x, 0deg)) rotateY(var(--lean-y, 0deg));
  transition: transform .9s var(--ease-out);
}

/* ---------- The map: where to start, what is read ---------- */
.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. */
.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,
    var(--wire-deep);
}
/* The next one to read: its node breathes twice, then rests. */
@media (prefers-reduced-motion: no-preference) {
  .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, #7a5cff 30%, transparent), 0 0 30px 6px rgba(122, 92, 255, .55); }
}
/* The light that runs down the written part of the line, once. */
.cj-glint {
  position: absolute; z-index: 0; left: calc(var(--lead) + var(--c2) / 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(122, 92, 255, .9));
}

/* Presenting: the phone faces the class. */
[data-teaching="true"] .stage--layers .art { transform: none; }

@media print { .cj-glint { display: none; } .stage--layers .art { transform: none; } }