/* "Story": Annalea's path. Everything is namespaced past-*; every surface is a real JUWEL class (.pf-card, .pf-heading,
   .pf-caption, .pf-body, .pf-btn--quiet from vendor/porcelain.css) and this file only places it. The path, the nodes and
   the paper plane are illustration; they use --jb-* tokens. Motion on UI is transform + opacity only.
   Positions that depend on the viewport (--path-y, --tag-top, card left/top) are set from ch-past.js. */

#stage > .past { position: absolute; inset: 0; pointer-events: none; }
.past > * { pointer-events: none; }

/* ---------- the track: path, nodes, labels ---------- */
.past-track { position: absolute; inset: 0; }
.past-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.past-base { fill: none; stroke: var(--jb-surface); stroke-opacity: .7; stroke-width: 3; stroke-linecap: round; }
.past-dotted { fill: none; stroke: var(--jb-surface); stroke-opacity: .85; stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 0 10; }
/* the glow is a wider, fainter stroke under the lit path (no filter to repaint while it grows) */
.past-glow { fill: none; stroke: var(--jb-violet); stroke-opacity: .28; stroke-width: 12; stroke-linecap: round; }
.past-lit { fill: none; stroke: var(--jb-violet); stroke-width: 4.5; stroke-linecap: round; }

.past-dot { fill: var(--jb-violet); opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.2);
  transition: opacity .25s, transform .4s var(--jb-ease-arrive); }
.past-dot.on { opacity: .95; transform: none; }

.past-node .pn { fill: var(--jb-surface); stroke: var(--jb-ink-4); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; transform: scale(0);
  transition: transform .5s var(--jb-ease-arrive); }
.past-node.seen .pn { transform: scale(.72); }
.past-node.on .pn { transform: scale(1.12); fill: var(--jb-violet); stroke: var(--jb-surface); stroke-width: 2.4; }
.past-node .ring { fill: none; stroke: var(--jb-violet); stroke-width: 2.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
.past-node.on .ring { animation: past-ring 1s var(--jb-ease-arrive) 1; }
@keyframes past-ring { from { opacity: .95; transform: scale(.5); } to { opacity: 0; transform: scale(2.6); } }

/* labels under the nodes: the year is there from the start, faint; it lights (with the employer and role) as she passes */
.past-tags { list-style: none; margin: 0; padding: 0; }
.past-tag { position: absolute; top: var(--tag-top); transform: translate(-50%, 6px); width: var(--tag-w, 124px); min-block-size: 24px; padding: 4px 6px; margin: 0;
  display: block; background: none; border: 0; border-radius: var(--jb-r-12); font: inherit; color: var(--jb-ink); text-align: center; cursor: default;
  opacity: 0; transition: opacity .6s ease, transform .6s var(--jb-ease-arrive); }
.past-tag.seen { opacity: .8; transform: translate(-50%, 0); }
.past-tag.on { opacity: 1; }
.past-tag .yr { display: inline-flex; align-items: center; justify-content: center; gap: var(--jb-s-4); font: var(--jb-type-label); }
.past-tag .yr .past-ico { color: var(--jb-violet-text); }
.past-tag .ts { display: none; }
.past--tight .past-tag .role { display: none; }
.past-tag .org, .past-tag .role { display: block; margin-top: 2px; font: var(--jb-type-caption); color: var(--jb-ink-2); text-wrap: balance;
  opacity: 0; transform: translateY(-4px); transition: opacity .5s .1s, transform .6s .1s var(--jb-ease-arrive); }
.past-tag .org { font-weight: var(--jb-w-bold); color: var(--jb-ink); }
.past-tag.on .org, .past-tag.on .role { opacity: 1; transform: none; }
.past.done .past-tag:not(.past-tag--plain) { pointer-events: auto; cursor: pointer; }
.past.done .past-tag:not(.past-tag--plain):hover, .past.done .past-tag[aria-pressed="true"] { background: var(--jb-surface); }
.past-ico { flex: none; }

/* ---------- the era cards: outer = what the crew prints and checks, the .pf-card inside ---------- */
.past-card { position: absolute; width: min(clamp(380px, 30vw, 440px), calc(100vw - 2 * var(--jb-s-20))); opacity: 0; }
.past-card--wide { width: min(clamp(440px, 36vw, 520px), calc(100vw - 2 * var(--jb-s-20))); }
.past-in { display: grid; gap: var(--jb-s-4); padding: var(--jb-s-16) var(--jb-s-20); }
.past-in .pf-body + .pf-body { margin-top: var(--jb-s-4); }
/* the first line leaves room for the crew's "checked" chip in the card's top-right corner */
.past-when { padding-right: 96px; }
.past-ret { display: flex; align-items: center; gap: var(--jb-s-8); margin-top: var(--jb-s-4); visibility: hidden; opacity: 0; transform: translateY(6px);
  transition: opacity .5s ease, transform .6s var(--jb-ease-arrive); }
.past-ret .past-ico { color: var(--jb-violet-text); }
.past-ret.on { visibility: visible; opacity: 1; transform: none; }

/* the Stone's signature: shown when its bubble doesn't say its job (phones, the founders' roll call) */
.past-by { display: none; flex-wrap: wrap; gap: 2px var(--jb-s-12); margin-top: var(--jb-s-8); padding-top: var(--jb-s-8); border-top: 1px solid var(--jb-line); }
.past-card--by .past-by { display: flex; }
.past-by b { font-weight: var(--jb-w-extrabold); color: var(--jb-ink); }

/* filed cards come back on hover / focus of their stop once the scene is over */
/* !important: crew.clear() (run by the director right after skip()) forces a half-printed card to inline opacity 1, which must not win over "filed" */
.past-card.filed { opacity: 0 !important; transform: translateY(10px) scale(.97); transition: opacity .3s ease, transform .45s var(--jb-ease-arrive); }
.past-card.filed.peek { opacity: 1 !important; transform: none; }

/* ---------- how she works: under the caption ---------- */
.past-who { position: absolute; left: var(--pf-gutter); top: 30%; width: min(560px, calc(100vw - 2 * var(--pf-gutter))); visibility: hidden; opacity: 0;
  transition: opacity .4s ease; }
.past-who.on { visibility: visible; opacity: 1; }
.past.peeking .past-who { opacity: .12; }
/* the principles card is the focal point: the path and its labels recede at rest, return on hover / peek */
.past.who-on:not(.peeking) .past-track { opacity: .6; transition: opacity .4s ease; }
.past.done .past-track:hover, .past.peeking .past-track { opacity: 1; }
.past-who-in { display: grid; gap: var(--jb-s-12); padding: var(--jb-s-20) var(--jb-s-24); }
.past-princ { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--jb-s-8); }
/* the principles are .pf-body lines; the size is the token headline step so they read as the point of the beat */
.past-princ li { color: var(--jb-ink); font: var(--jb-type-headline); }
.past-princ li { opacity: 0; transform: translateY(8px); transition: opacity .55s ease, transform .8s var(--jb-ease-arrive); }
.past-princ li.on { opacity: 1; transform: none; }
.past-sum { padding-top: var(--jb-s-12); border-top: 1px solid var(--jb-line); opacity: 0; transition: opacity .7s ease .1s; }
.past-who.all .past-sum { opacity: 1; }
.past-resume { justify-self: start; margin-inline-start: calc(-1 * var(--jb-s-8)); opacity: 0; transition: opacity .7s ease .2s; }
.past-who.all .past-resume { opacity: 1; }
.past-who.on .past-resume { pointer-events: auto; }

/* ---------- short desktop screens (a 1366x768 laptop leaves about 640 px): the card goes two-column so it stays above the path ---------- */
@media (max-height: 699px) and (min-width: 720px) {
  .past-who { width: min(780px, calc(86vw - 100px - var(--pf-gutter))); }
  .past-who-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--jb-s-24); align-items: start; padding: var(--jb-s-16) var(--jb-s-24); }
  .past-princ { grid-column: 1; grid-row: 1 / span 2; }
  .past-sum { grid-column: 2; grid-row: 1; padding-top: 0; border-top: 0; }
  .past-resume { grid-column: 2; grid-row: 2; }
}

/* ---------- narrow screens: years only on the path, cards and the principles fill the width ---------- */
.past--narrow .past-tag { width: 38px; padding: 2px 0; }
.past--narrow .past-tag .yr { font: var(--jb-type-caption); font-weight: var(--jb-w-bold); }
.past--narrow .past-tag .tl, .past--narrow .past-tag .org, .past--narrow .past-tag .role { display: none; }
.past--narrow .past-tag .ts { display: inline; }
.past--narrow .past-in { padding: var(--jb-s-12) var(--jb-s-16); }
.past--narrow .past-when { padding-right: 90px; }
.past--narrow .past-who-in { padding: var(--jb-s-12) var(--jb-s-16); gap: var(--jb-s-4); }
.past--narrow .past-sum { padding-top: var(--jb-s-8); }
.past--compact .past-tag .tl, .past--compact .past-tag .org, .past--compact .past-tag .role { display: none; }
.past--compact .past-tag .ts { display: inline; }
/* the years alone cannot say where she worked: on a phone the card carries the whole arc in one line */
.past-arc { display: none; margin: 0; color: var(--jb-ink-2); }
.past--narrow:not(.past--compact) .past-arc { display: block; }
.past--narrow .past-princ { gap: var(--jb-s-4); }
.past--narrow .past-princ li, .past--compact .past-princ li { font: var(--jb-type-body); font-weight: var(--jb-w-bold); }

/* ---------- short viewports (ctx.compact): the card sits beside the caption, the path runs under it, JUWEL steps aside ---------- */
.past--compact .past-who-in { grid-template-columns: minmax(0, 1fr); padding: var(--jb-s-12) var(--jb-s-20); gap: var(--jb-s-4); }
.past--compact .past-princ, .past--compact .past-resume { grid-column: 1; grid-row: auto; }
.past--compact .past-sum { display: none; }

/* the end state lands whole (skip, Pause motion, reduced motion, a jump here): nothing eases in */
.past--static, .past--static * { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .past-tag, .past-tag .org, .past-tag .role, .past-card.filed, .past-ret, .past-who, .past-princ li, .past-sum, .past-resume, .past-dot, .past-node .pn { transition: none; }
  .past-node.on .ring { animation: none; }
}

/* the plane flies in the agents layer (above JUWEL) */
#agents .past-plane { fill: var(--jb-surface); stroke: var(--jb-violet); stroke-width: 1.5; stroke-linejoin: round; }
/* crew.js check(): the scan bar, halo and head have no y for their first 0.08 s and would flash at the top of the
   screen; keep them hidden until the sweep writes it (scoped to this scene; root fix belongs in crew.js) */
body:has(#stage > .past) #agents .crew-scan > rect:not([y]), body:has(#stage > .past) #agents .crew-scan > circle:not([cy]) { visibility: hidden; }
/* same class of crew.js glitch: a pop's droplets are created without cx/cy and sit at 0,0 for one frame */
body:has(#stage > .past) #agents .crew-over circle:not([cx]) { visibility: hidden; }
/* and agents.js say(): the bubble's knob is created with r=7 but no cx/cy, so it sits at 0,0 until the next tick */
body:has(#stage > .past) #agents .talk circle:not([cx]) { visibility: hidden; }