/* ========== Career journey module ========== */
.career-journey {
    --cj-paper: #f7efe3;
    --cj-ink: #1c1511;
    --cj-step: 92vh;
    --t: 1;
    --p: .125;
    --swing: 0;
    --lift: 0;
    --bag: 0;
    position: relative;
    color: var(--c-text);
    background: var(--c-bg);
}

@supports (height: 1svh) { .career-journey { --cj-step: 92svh; } }

/* Intro */
.cj-intro { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s-6) var(--s-8); align-items: end; padding-block: clamp(3rem, 7vw, 6.5rem) clamp(2rem, 4vw, 3.5rem); }
.cj-intro h2 { margin: var(--s-4) 0 0; font: 700 clamp(2.6rem, 1.4rem + 4.8vw, 6.2rem)/.98 var(--f-display); letter-spacing: -.05em; }
.cj-intro h2 > span { background: linear-gradient(100deg, var(--c-accent) 10%, var(--c-accent-hi) 60%, #ffd2a6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cj-intro__side > p { margin: 0; color: var(--c-text-muted); font-size: var(--fs-lg); line-height: 1.6; max-width: 38ch; }
.cj-intro__facts { display: flex; gap: var(--s-6); margin: var(--s-6) 0 var(--s-5); }
.cj-intro__facts div { display: flex; flex-direction: column-reverse; gap: 2px; }
.cj-intro__facts dt { font: .7rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-faint); }
.cj-intro__facts dd { margin: 0; font: 700 clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem)/1 var(--f-display); letter-spacing: -.03em; }
.cj-skip { display: inline-flex; gap: var(--s-2); align-items: center; min-height: 44px; font: .78rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--c-accent-hi); text-decoration: none; border-bottom: 1px solid var(--c-accent-soft); }
.cj-skip:hover { border-color: var(--c-accent); }
.cj-skip:focus-visible, .cj-rail a:focus-visible, .cj-motion:focus-visible { outline: 2px solid var(--c-accent-hi); outline-offset: 4px; }

/* Track + pinned stage */
.cj-track { position: relative; }
.cj-pin { position: relative; height: clamp(460px, 76vh, 760px); overflow: hidden; }
[data-journey-ready] .cj-track { height: calc(var(--cj-steps) * var(--cj-step) + 100vh); }
[data-journey-ready] .cj-pin { position: sticky; top: 0; height: 100vh; }
@supports (height: 1svh) {
    [data-journey-ready] .cj-track { height: calc(var(--cj-steps) * var(--cj-step) + 100svh); }
    [data-journey-ready] .cj-pin { height: 100svh; }
}
.cj-stage {
    --ground: 15cqh;
    --char-left: 21cqw;
    --char-h: min(33cqh, 50cqw);
    --b-left: 41cqw;
    --b-w: min(54cqw, 78cqh);
    --hud-top: 18px;
    position: absolute; inset: 0; overflow: hidden; container-type: size; isolation: isolate;
    background: #0c0a10;
}
[data-journey-ready] .cj-stage { --hud-top: calc(var(--header-h) + 10px); }
.cj-scene { position: absolute; inset: 0; }

/* Sky: night → dawn → day → golden hour, driven by --p */
.cj-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #07060d 0%, #120f1f 55%, #2a1a26 100%); }
.cj-sky__layer { position: absolute; inset: 0; }
.cj-sky__layer--dawn { background: linear-gradient(180deg, #1b1430 0%, #4a2440 52%, #b8553a 100%); opacity: max(0, min(1, (var(--p) - .05) * 4, (.62 - var(--p)) * 4)); }
.cj-sky__layer--day { background: linear-gradient(180deg, #0f2a3e 0%, #1f5468 55%, #b48a5c 100%); opacity: max(0, min(1, (var(--p) - .38) * 4, (1.02 - var(--p)) * 4)); }
.cj-sky__layer--gold { background: linear-gradient(180deg, #24122a 0%, #6b2d32 45%, #f08a3a 100%); opacity: max(0, min(1, (var(--p) - .78) * 4.5)); }
.cj-stars { position: absolute; top: 6%; left: 0; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: max(0, 1 - var(--p) * 3.2); animation: cj-twinkle 3.5s ease-in-out infinite alternate;
    box-shadow: 4vw 3vh #fff, 9vw 12vh #ffffffaa, 15vw 6vh #fff, 21vw 18vh #ffffff88, 27vw 4vh #fff, 33vw 14vh #ffffffaa, 38vw 8vh #fff, 44vw 21vh #ffffff77, 49vw 2vh #fff, 55vw 11vh #ffffffaa, 61vw 17vh #fff, 66vw 5vh #ffffff88, 72vw 13vh #fff, 78vw 22vh #ffffffaa, 83vw 7vh #fff, 89vw 16vh #ffffff88, 94vw 3vh #fff, 12vw 26vh #ffffff66, 58vw 27vh #ffffff66, 86vw 28vh #ffffff66; }
.cj-sun { position: absolute; width: 10cqh; height: 10cqh; border-radius: 50%; left: calc(10cqw + var(--p) * 70cqw); top: calc(58cqh - sin(var(--p) * 170deg + 6deg) * 42cqh);
    background: radial-gradient(circle, #fff3d6 0 35%, #ffd08a 60%, #ff9c4a 100%); box-shadow: 0 0 80px 30px #ffb46a33, 0 0 220px 80px #ff8a3a1f; }
.cj-cloud { position: absolute; height: 2.4cqh; border-radius: 999px; background: #ffffff10; filter: blur(1px); transform: translateX(calc(var(--t) * -9cqw)); }
.cj-cloud::before { content: ""; position: absolute; left: 22%; bottom: 40%; width: 46%; height: 180%; border-radius: 50%; background: inherit; }
.cj-cloud--a { top: 16cqh; left: 30cqw; width: 14cqw; }
.cj-cloud--b { top: 26cqh; left: 74cqw; width: 10cqw; }
.cj-cloud--c { top: 12cqh; left: 110cqw; width: 18cqw; }

.cj-years { position: absolute; inset: 0; transform: translate3d(calc(var(--t) * -55cqw), 0, 0); }
.cj-year { position: absolute; left: calc(var(--i) * 55cqw + 40cqw); bottom: calc(var(--ground) + 26cqh); font: 800 min(34cqh, 30cqw)/.8 var(--f-display); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px #ffffff14; white-space: nowrap; }

.cj-far { position: absolute; left: 0; bottom: calc(var(--ground) - 1px); width: calc(100cqw + var(--cj-steps) * 22cqw); height: 30cqh; transform: translate3d(calc(var(--t) * -22cqw), 0, 0); }
.cj-far__city { fill: #120f16; opacity: .85; }
.cj-far__hills { fill: #0c0a0f; }

/* World: one segment per stop, each 100cqw wide */
.cj-world { position: absolute; inset: 0; transform: translate3d(calc(var(--t) * -100cqw), 0, 0); will-change: transform; }
.cj-seg { position: absolute; top: 0; bottom: 0; left: calc(var(--i) * 100cqw); width: 100cqw; }
.cj-building { position: absolute; left: var(--b-left); bottom: var(--ground); width: var(--b-w); aspect-ratio: 480 / 340; }
.cj-building svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cj-building svg svg { overflow: hidden; }
.cj-sign { position: absolute; left: calc(var(--b-left) + 1cqw); bottom: calc(var(--ground) + var(--b-w) * .72 + 3cqh); max-width: min(30rem, 44cqw); padding: .7rem 1rem .75rem; border-left: 3px solid var(--c-accent); border-radius: 4px 12px 12px 4px; background: #0d0b0fe6; box-shadow: 0 18px 40px -18px #000; }
.cj-sign strong { display: block; font: 700 clamp(1.1rem, .7rem + 1.4vw, 2rem)/1.05 var(--f-display); letter-spacing: -.03em; color: #fff6ea; }
.cj-sign__date, .cj-sign__role { display: block; font: .66rem/1.5 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.cj-sign__date { color: var(--c-accent-hi); margin-bottom: .25rem; }
.cj-sign__role { color: #bdb2a6; margin-top: .3rem; text-transform: none; letter-spacing: .02em; }
.cj-seg--uni .cj-sign, .cj-seg--sovos .cj-sign { bottom: calc(var(--ground) + var(--b-w) * .72 + 5cqh); }

/* SVG building vocabulary */
.cjb-wall { fill: #221d23; stroke: #463b40; stroke-width: 2; }
.cjb-glass { fill: #15222b; stroke: #36525e; stroke-width: 2; }
.cjb-win { fill: #ffc877; }
.cjb-win--dim { fill: #3b3139; }
.cjb-label { font: 600 13px var(--f-mono); letter-spacing: .12em; fill: #ffd9ad; }
.cjb-label--dark { fill: #1c1511; }
.cjb-label--muted { fill: #9e9187; font-size: 11px; }
.cjb-counter { font: 600 24px var(--f-mono); letter-spacing: .08em; fill: #ff9a3a; }
.cjb-neon { font: 700 26px var(--f-mono); fill: #ffb066; filter: drop-shadow(0 0 6px #ff7f00); }
.cjb-ticker { font: 600 12px var(--f-mono); letter-spacing: .1em; fill: #ff9a3a; }
.cjb-q { font: 800 34px var(--f-display); fill: var(--c-accent-hi); }
.cjb-led { fill: #3ddc97; }
.cjb-led--b { fill: #ff9a3a; }
.cj-board { position: absolute; left: var(--b-left); bottom: calc(var(--ground) + 6cqh); width: min(34rem, 50cqw); padding: 1.2rem 1.3rem 1.3rem; border: 1px solid #ff7f0055; border-radius: 18px; background: #0d0b0fee; box-shadow: 0 30px 60px -30px #000; }
.cj-board__title { display: block; margin-bottom: .8rem; font: 700 clamp(1.2rem, .8rem + 1vw, 1.8rem) var(--f-display); letter-spacing: -.02em; }
.cj-seg--next .cj-building { left: 80cqw; width: min(24cqw, 40cqh); }
.cj-seg--next .cj-board { left: 36cqw; bottom: calc(var(--ground) + 2cqh); width: min(42rem, 44cqw); }
.cj-board ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cj-board li { padding: 5px 9px; border-radius: 999px; border: 1px solid var(--c-line-strong); font: .68rem var(--f-mono); color: #e7ddd2; }

/* Collectibles along the road */
.cj-item { position: absolute; left: calc(var(--at) * 100cqw); bottom: calc(var(--ground) + var(--char-h) * .5); display: flex; flex-direction: column; align-items: center; gap: 6px; transform: translateX(-50%); }
.cj-item--high { bottom: calc(var(--ground) + var(--char-h) * .78); }
.cj-item__gem { width: max(18px, 3.2cqh); aspect-ratio: 1; transform: rotate(45deg); border-radius: 5px; background: linear-gradient(135deg, #ffd29a, var(--c-accent)); box-shadow: 0 0 0 4px #ff7f0022, 0 0 24px #ff7f0088; animation: cj-float 2.4s ease-in-out infinite alternate; }
.cj-item__label { padding: 5px 10px; border-radius: 999px; background: #0d0b0fe0; border: 1px solid #ff7f0055; font: 500 .68rem var(--f-mono); color: #ffd9ad; white-space: nowrap; }
.cj-item.is-collected .cj-item__gem { animation: cj-collect .55s var(--ease-out) forwards; }
.cj-item.is-collected .cj-item__label { opacity: 0; transform: translateY(-14px); transition: opacity .35s, transform .35s; }

.cj-road { position: absolute; left: 0; right: 0; bottom: 0; height: var(--ground); background: #141218; }
.cj-road__walk { position: absolute; left: 0; right: 0; top: 0; height: 3.2cqh; background: repeating-linear-gradient(90deg, #2c2830 0 7cqw, #262229 7cqw 7.3cqw); background-position-x: calc(var(--t) * -100cqw); border-top: 2px solid #4a4248; }
.cj-road__lane { position: absolute; left: 0; right: 0; top: 52%; height: 4px; background: repeating-linear-gradient(90deg, #d9b98a55 0 4cqw, transparent 4cqw 9cqw); background-position-x: calc(var(--t) * -100cqw); }
.cj-front { position: absolute; left: 0; right: 0; bottom: 0; height: 5cqh; background: repeating-linear-gradient(90deg, transparent 0 30cqw, #0a090c 30cqw 30.6cqw, transparent 30.6cqw 61cqw); background-position-x: calc(var(--t) * -135cqw); pointer-events: none; }

/* Traveller (scroll-scrubbed walk cycle) */
.cj-traveller { position: absolute; z-index: 3; left: var(--char-left); bottom: calc(var(--ground) - 2.2cqh); height: var(--char-h); aspect-ratio: 120 / 200; }
.cj-person { width: 100%; height: 100%; overflow: visible; transition: transform .35s var(--ease-out); }
[data-facing="left"] .cj-person { transform: scaleX(-1); }
.cj-person * { transform-box: view-box; }
.cj-person__shadow { fill: #000; opacity: .45; }
.cj-leg { transform-origin: 60px 112px; }
.cj-leg--back { transform: rotate(calc(var(--swing) * -26deg)); }
.cj-leg--front { transform: rotate(calc(var(--swing) * 26deg)); }
.cj-shin { transform-origin: 60px 146px; }
.cj-leg--back .cj-shin { transform: rotate(calc(max(0, var(--swing)) * 34deg)); }
.cj-leg--front .cj-shin { transform: rotate(calc(max(0, var(--swing) * -1) * 34deg)); }
.cj-body { transform: translateY(calc(var(--lift) * -3px)); }
.cj-arm--back { transform-origin: 55px 66px; transform: rotate(calc(var(--swing) * 22deg)); }
.cj-arm--front { transform-origin: 67px 66px; transform: rotate(calc(var(--swing) * -8deg)); }
.cj-pack__glow { fill: var(--c-accent); opacity: calc(.15 + var(--bag) * .85); filter: drop-shadow(0 0 4px #ff7f00); }
.cj-badge { opacity: 0; transition: opacity .4s; }
[data-employed] .cj-badge { opacity: 1; }
.cj-steam { opacity: 0; }
[data-motion="on"]:not(.is-moving) .cj-steam { animation: cj-steam 2.6s ease-in-out infinite; }
[data-motion="on"]:not(.is-moving) .cj-head { transform-origin: 62px 50px; animation: cj-nod 4s ease-in-out infinite; }
.cj-eyes { transform-origin: 72px 29px; animation: cj-blink 5s infinite; }
.cj-pop { position: absolute; left: 50%; bottom: 100%; padding: 4px 10px; border-radius: 999px; background: var(--c-accent); color: var(--c-on-accent); font: 600 .72rem var(--f-mono); white-space: nowrap; opacity: 0; transform: translate(-50%, 0); pointer-events: none; }
.cj-pop.is-on { animation: cj-pop 1.1s var(--ease-out); }

/* Thought bubbles */
.cj-thoughts { position: absolute; z-index: 4; left: calc(var(--char-left) + 2cqw); bottom: calc(var(--ground) + var(--char-h) + 2cqh); width: min(31rem, 46cqw); }
.cj-thought { position: absolute; left: 0; bottom: 0; width: 100%; padding: 1rem 1.25rem 1.1rem; border-radius: 26px 26px 26px 10px; background: var(--cj-paper); color: var(--cj-ink); box-shadow: 0 24px 50px -20px #000c; opacity: 0; transform: translateY(12px) scale(.92); transform-origin: 10% 100%; transition: opacity .3s, transform .45s var(--ease-out); pointer-events: none; }
.cj-thought::before, .cj-thought::after { content: ""; position: absolute; border-radius: 50%; background: var(--cj-paper); }
.cj-thought::before { left: 18px; bottom: -16px; width: 18px; height: 18px; }
.cj-thought::after { left: 8px; bottom: -32px; width: 10px; height: 10px; }
.cj-thought.is-active { opacity: 1; transform: none; }
.cj-thought__label { display: block; margin-bottom: .35rem; font: 600 .62rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #b25a06; }
.cj-thought p { margin: 0; font: 600 clamp(.98rem, .72rem + .75vw, 1.35rem)/1.32 var(--f-display); letter-spacing: -.01em; text-wrap: pretty; }
.cj-thought--transit { width: auto; display: inline-flex; align-items: center; gap: .7rem; padding: .7rem 1rem; font: .76rem var(--f-mono); }
.cj-thought--transit strong { font-family: var(--f-display); font-size: .95rem; }
.is-transit .cj-thought--transit { opacity: 1; transform: none; }
.cj-dots { display: inline-flex; gap: 4px; }
.cj-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); animation: cj-dot 1s ease-in-out infinite; }
.cj-dots i:nth-child(2) { animation-delay: .15s; }
.cj-dots i:nth-child(3) { animation-delay: .3s; }

/* HUD */
.cj-hud { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.cj-hud > * { pointer-events: auto; }
.cj-hud__top { position: absolute; top: var(--hud-top); left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-inline: var(--gutter); transition: top var(--t-med) var(--ease-out); }
.cj-now { display: flex; align-items: center; gap: .8rem; padding: .55rem .9rem .55rem .6rem; border-radius: 14px; background: #0b0a0dcc; border: 1px solid var(--c-line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cj-now__count, .cj-now__text, .cj-bag__text strong, .cj-motion { white-space: nowrap; }
.cj-now__count { padding: .35rem .5rem; border-radius: 8px; background: var(--c-accent-soft); color: var(--c-accent-hi); font: 600 .72rem var(--f-mono); }
.cj-now__text { display: flex; flex-direction: column; }
.cj-now__text strong { font: 700 .95rem/1.2 var(--f-display); }
.cj-now__text span { font: .64rem var(--f-mono); color: var(--c-text-muted); letter-spacing: .04em; }
.cj-hud__right { display: flex; align-items: flex-start; gap: .6rem; }
.cj-bag { position: relative; display: flex; align-items: center; gap: .6rem; padding: .55rem .9rem; border-radius: 14px; background: #0b0a0dcc; border: 1px solid var(--c-line); color: var(--c-accent-hi); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cj-bag svg { width: 24px; height: 24px; }
.cj-bag__text { display: flex; flex-direction: column; font: .62rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-muted); }
.cj-bag__text strong { font: 600 .95rem var(--f-mono); color: var(--c-text); letter-spacing: 0; }
.cj-bag__text b { color: var(--c-accent-hi); }
.cj-toast { position: absolute; right: 0; top: calc(100% + 8px); padding: 5px 10px; border-radius: 999px; background: var(--c-accent); color: var(--c-on-accent); font: 600 .7rem var(--f-mono); white-space: nowrap; opacity: 0; transform: translateY(-6px); }
.cj-toast.is-on { animation: cj-toast 1.6s var(--ease-out); }
.cj-motion { display: none; min-height: 44px; padding: 0 .9rem; border-radius: 14px; border: 1px solid var(--c-line-strong); background: #0b0a0dcc; color: var(--c-text); font: .66rem var(--f-mono); letter-spacing: .05em; cursor: pointer; }
.cj-motion:hover { border-color: var(--c-accent); }
[data-journey-ready] .cj-motion { display: block; }
.cj-toast:empty, .career-journey:not([data-journey-ready]) .cj-bag { display: none; }

.cj-rail { position: absolute; left: 50%; bottom: 1.6cqh; transform: translateX(-50%); width: min(var(--container), calc(100% - var(--gutter) * 2)); display: grid; grid-template-columns: repeat(var(--cj-stops), minmax(0, 1fr)); }
.cj-rail__line { position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: var(--c-line-strong); }
.cj-rail__line > i { position: absolute; inset: 0 auto 0 0; width: calc(clamp(0, (var(--t) - 1) / (var(--cj-stops) - 1), 1) * 100%); background: var(--c-accent); box-shadow: 0 0 12px var(--c-accent); }
.cj-rail a { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 44px; padding-top: 6px; color: var(--c-text-muted); text-decoration: none; font: .66rem var(--f-mono); }
.cj-rail__dot { width: 16px; height: 16px; border-radius: 50%; background: #18161b; border: 2px solid var(--c-line-strong); transition: background .3s, border-color .3s, box-shadow .3s; }
.cj-rail__no { color: var(--c-text-faint); }
.cj-rail__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cj-rail a:hover, .cj-rail a[aria-current] { color: var(--c-text); }
.cj-rail a[aria-current] .cj-rail__dot { background: var(--c-accent); border-color: var(--c-accent-hi); box-shadow: 0 0 0 5px #ff7f0033; }

/* Ambient building animations run only near the traveller */
.cj-seg *, .cj-item__gem { animation-play-state: paused; }
.cj-seg.is-near * { animation-play-state: running; }
.cjb-flag { transform-origin: 242px 37px; animation: cj-flag 1.6s ease-in-out infinite alternate; }
.cjb-win--flicker { animation: cj-flicker 4s steps(1) infinite; }
.cjb-smoke { animation: cj-rise 4s ease-in-out infinite; }
.cjb-code path { stroke-dasharray: 40; animation: cj-type 2.4s steps(8) infinite; }
.cjb-sign-path { stroke-dasharray: 360; stroke-dashoffset: 360; animation: cj-sign 3.6s ease-in-out infinite; }
.cjb-led { animation: cj-led 1.2s steps(2) infinite; }
.cjb-led--b { animation-delay: .4s; }
.cjb-flow { animation: cj-flow .8s linear infinite; }
.cjb-node { animation: cj-node 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.cjb-node--2 { animation-delay: .5s; }
.cjb-node--3 { animation-delay: 1s; }
.cjb-truck { animation: cj-idle .35s ease-in-out infinite alternate; }
.cjb-queue { animation: cj-queue 2.2s linear infinite; }
.cjb-vault { transform-box: fill-box; transform-origin: center; animation: cj-spin 12s linear infinite; }
.cjb-pin { transform-box: fill-box; transform-origin: 50% 100%; animation: cj-bounce 1.2s ease-in-out infinite; }
.cjb-car { animation: cj-drive 5s ease-in-out infinite alternate; }
.cjb-shine { transform-box: fill-box; transform-origin: center; animation: cj-shine 2.4s ease-in-out infinite; }
.cjb-ticker { animation: cj-ticker 9s linear infinite; }
.cjb-beacon { animation: cj-led 1.6s steps(2) infinite; }
.cjb-paper { animation: cj-paper 4.5s ease-in infinite; }
.cjb-paper--2 { animation-delay: 1.5s; }
.cjb-paper--3 { animation-delay: 3s; }
.cj-dots i, .cj-stars { animation-play-state: running; }

@keyframes cj-twinkle { to { opacity: max(0, .6 - var(--p) * 3.2); } }
@keyframes cj-float { to { transform: rotate(45deg) translate(-4px, -4px); } }
@keyframes cj-collect { 40% { transform: rotate(45deg) scale(1.35); opacity: 1; } to { transform: rotate(45deg) translate(-30px, 40px) scale(0); opacity: 0; } }
@keyframes cj-pop { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.8); } 20% { opacity: 1; transform: translate(-50%, -6px) scale(1); } 75% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -30px); } }
@keyframes cj-toast { 0% { opacity: 0; transform: translateY(-6px); } 15%, 75% { opacity: 1; transform: none; } to { opacity: 0; } }
@keyframes cj-steam { 0% { opacity: 0; transform: translateY(4px); } 40% { opacity: 1; } to { opacity: 0; transform: translateY(-6px); } }
@keyframes cj-nod { 0%, 70%, 100% { transform: none; } 80% { transform: rotate(-4deg); } }
@keyframes cj-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes cj-dot { 50% { transform: translateY(-4px); opacity: .5; } }
@keyframes cj-flag { to { transform: skewY(-8deg) scaleX(.9); } }
@keyframes cj-flicker { 0%, 100% { fill: #ffc877; } 40% { fill: #3b3139; } 46% { fill: #ffc877; } 50% { fill: #3b3139; } 56% { fill: #ffc877; } }
@keyframes cj-rise { 0% { opacity: 0; transform: translateY(10px); } 50% { opacity: 1; } to { opacity: 0; transform: translateY(-16px); } }
@keyframes cj-type { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
@keyframes cj-sign { 0% { stroke-dashoffset: 360; } 60%, 85% { stroke-dashoffset: 0; } to { stroke-dashoffset: 0; opacity: 0; } }
@keyframes cj-led { 50% { opacity: .25; } }
@keyframes cj-flow { to { stroke-dashoffset: -12; } }
@keyframes cj-node { 50% { transform: scale(1.25); } }
@keyframes cj-idle { to { transform: translateY(1px); } }
@keyframes cj-queue { from { transform: translateX(-44px); } to { transform: translateX(0); } }
@keyframes cj-spin { to { transform: rotate(360deg); } }
@keyframes cj-bounce { 50% { transform: translateY(-8px); } }
@keyframes cj-drive { to { transform: translateX(46px); } }
@keyframes cj-shine { 0%, 100% { transform: scale(.4); opacity: .3; } 50% { transform: scale(1); opacity: 1; } }
@keyframes cj-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes cj-paper { 0% { transform: translate(200px, 60px) rotate(0); opacity: 0; } 10% { opacity: 1; } to { transform: translate(420px, -40px) rotate(160deg); opacity: 0; } }

/* Logbook */
.cj-log { padding-block: var(--s-section); }
.cj-log__head { margin-bottom: var(--s-7); }
.cj-log__title { margin: var(--s-3) 0 0; font: 700 var(--fs-2xl)/1.05 var(--f-display); letter-spacing: -.04em; }
.cj-log__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
.cj-chapter { display: grid; grid-template-columns: clamp(5rem, 12vw, 10rem) minmax(0, 1fr); gap: var(--s-5); scroll-margin-top: calc(var(--header-h) + 1rem); }
.cj-chapter__year { position: sticky; top: calc(var(--header-h) + 1rem); align-self: start; font: 800 clamp(2rem, 1.2rem + 3vw, 4rem)/1 var(--f-display); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px var(--c-line-strong); }
.cj-chapter:target .cj-chapter__year { -webkit-text-stroke-color: var(--c-accent); }
.cj-chapter__card { padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: linear-gradient(160deg, var(--c-surface), var(--c-bg-2)); }
.cj-chapter__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; margin-bottom: var(--s-4); font: .7rem/1.6 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.cj-chapter__meta > span { color: var(--c-accent-hi); }
.cj-chapter time { color: var(--c-text-muted); }
.cj-chapter h4 { margin: 0 0 .3rem; font: 700 clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem)/1.1 var(--f-display); letter-spacing: -.04em; }
.cj-role { margin: 0 0 var(--s-4); font-size: var(--fs-sm); color: var(--c-accent-hi); }
.cj-chapter__story { margin: 0 0 var(--s-4); color: var(--c-text); font-size: var(--fs-base); line-height: 1.7; }
.cj-chapter__points { margin: 0 0 var(--s-5); padding: 0; list-style: none; display: grid; gap: .45rem; }
.cj-chapter__points li { position: relative; padding-left: 1.2rem; color: var(--c-text-muted); font-size: var(--fs-sm); line-height: 1.6; }
.cj-chapter__points li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 2px; transform: rotate(45deg); background: var(--c-accent); }
.cj-learning > span { font: .66rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-faint); }
.cj-learning ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; }
.cj-learning li { padding: 7px 12px; border: 1px solid var(--c-line-strong); border-radius: 999px; font: .74rem var(--f-mono); color: #ded4c9; }
.cj-learning li:first-child { border-color: #ff7f0066; color: #ffc18a; background: var(--c-accent-soft); }
.cj-note { margin: var(--s-4) 0 0; color: var(--c-text-faint); font-size: var(--fs-xs); }

.cj-skills { margin-top: var(--s-section); }
.cj-skills__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--s-4); margin-top: var(--s-6); }
.cj-skills__group { padding: var(--s-5); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); }
.cj-skills__group h4 { margin: 0 0 var(--s-4); font: .74rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent-hi); }
.cj-skills__group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.cj-skills__group li { display: flex; flex-direction: column; gap: 2px; }
.cj-skills__group strong { font: 600 1rem var(--f-display); }
.cj-skills__group span { color: var(--c-text-muted); font-size: var(--fs-xs); line-height: 1.5; }
.cj-finish { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-5); margin-top: var(--s-section); padding: clamp(1.5rem, 1rem + 2vw, 3rem); border-radius: var(--r-xl); border: 1px solid #ff7f0040; background: radial-gradient(120% 140% at 0 0, #ff7f0024, transparent 60%), var(--c-surface); }
.cj-finish p { margin: 0; font: 600 clamp(1.3rem, 1rem + 1.2vw, 2rem)/1.3 var(--f-display); letter-spacing: -.02em; }
.cj-finish strong { color: var(--c-accent-hi); }
.cj-finish__links { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Narrow / portrait stages */
@container (max-width: 760px) {
    .cj-stage { --char-left: 7cqw; --char-h: min(30cqh, 46cqw); --b-left: 34cqw; --b-w: min(82cqw, 52cqh); --ground: 14cqh; }
    .cj-thoughts { left: 5cqw; width: 90cqw; bottom: calc(var(--ground) + var(--char-h) + 3cqh); }
    .cj-sign { left: 34cqw; max-width: 62cqw; bottom: calc(var(--ground) + var(--b-w) * .72 + 1.5cqh); padding: .5rem .7rem; }
    .cj-seg--uni .cj-sign, .cj-seg--sovos .cj-sign { bottom: calc(var(--ground) + var(--b-w) * .72 + 3cqh); }
    .cj-sign__role { display: none; }
    .cj-sign, .cj-seg--uni .cj-sign, .cj-seg--sovos .cj-sign { top: calc(var(--hud-top) + 76px); bottom: auto; }
    .cj-item__label { display: none; }
    .cj-item, .cj-item--high { bottom: calc(var(--ground) + var(--char-h) * .55); }
    .cj-seg--next .cj-building { display: none; }
    .cj-seg--next .cj-board { left: 42cqw; width: 54cqw; bottom: calc(var(--ground) + 1.5cqh); max-height: calc(var(--char-h) + 2cqh); overflow: hidden; padding: .7rem; border-radius: 14px; -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent); }
    .cj-board__title { font-size: 1rem; margin-bottom: .5rem; }
    .cj-board ul { gap: 4px; }
    .cj-board li { padding: 3px 7px; font-size: .58rem; }
    .cj-hud__top { gap: .5rem; }
    .cj-hud__right { gap: .4rem; }
    .cj-bag { padding: .45rem .65rem; gap: .4rem; }
    .cj-bag svg { width: 20px; height: 20px; }
    .cj-motion { width: 44px; padding: 0; font-size: 0; }
    .cj-motion::before { content: "❚❚"; font-size: .8rem; letter-spacing: -.1em; }
    .cj-motion[aria-pressed="true"]::before { content: "▶"; letter-spacing: 0; }
    .cj-rail { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; bottom: 1cqh; }
    .cj-rail__line, .cj-rail__no { display: none; }
    .cj-rail a { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 6px; padding: 0 10px; border-radius: 999px; background: #0b0a0dcc; border: 1px solid var(--c-line); }
    .cj-rail__dot { width: 9px; height: 9px; }
    .cj-now { padding: .4rem .6rem .4rem .4rem; }
    .cj-now__text span, .cj-bag__text > span { display: none; }
    .cj-motion { padding: 0 .6rem; }
    .cj-thought p { font-size: 1rem; }
}
@container (max-height: 520px) {
    .cj-stage { --char-h: 30cqh; }
    .cj-sign, .cj-thought__label, .cj-rail__no { display: none; }
    .cj-thought { padding: .6rem .9rem; }
    .cj-thought p { font-size: .92rem; }
}
@media (max-width: 760px) {
    .cj-intro { grid-template-columns: minmax(0, 1fr); }
    .cj-chapter { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
    .cj-chapter__year { position: static; }
}

/* Motion off: no parallax, no walk cycle, no ambient animation; the scene snaps between stops */
[data-motion="off"] .cj-years, [data-motion="off"] .cj-far, [data-motion="off"] .cj-cloud { transform: none; }
[data-motion="off"] .cj-person, [data-motion="off"] .cj-thought { transition: none; }
[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
    .career-journey *, .career-journey *::before, .career-journey *::after { animation: none !important; transition: none !important; }
    .cj-years, .cj-far, .cj-cloud { transform: none; }
}
@media print {
    .cj-track { display: none; }
}