/* A scroll-bound storyboard. Without enhancement, every phase remains readable. */
.journey-section { --journey-color:#58d6ff; --journey-top:100px; --journey-progress:0; --journey-card-width:270px; --journey-gap:24px; }
.journey-section > .container > .section-heading { max-width:720px; margin-bottom:36px; }
.journey-section > .container > .section-heading > p:last-child { line-height:1.8; }
.journey-section, #journey-title { scroll-margin-top:180px; }
.journey-runway { position:relative; }
.journey-sticky { position:relative; }
.journey-toolbar { min-height:46px; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:0 0 14px; }
.journey-mode { display:flex; align-items:center; gap:8px; font-size:.7rem; color:#90a4b9; }
.journey-mode > i { width:5px; height:5px; border-radius:50%; background:var(--journey-color); box-shadow:0 0 8px var(--journey-color); }
.journey-view-toggle { font-size:.7rem; color:#b4c7db; background:#111c28; border:1px solid #90b3cd36; border-radius:6px; padding:8px 11px; flex:none; cursor:pointer; }
.journey-view-toggle:hover { border-color:#90b3cd99; color:#edf5ff; }
.journey-view-toggle[hidden],.journey-footer [hidden] { display:none; }
.journey-scene { position:relative; isolation:isolate; border:1px solid #71a6c633; border-radius:20px; background:radial-gradient(ellipse at 50% 28%,#12344575,transparent 60%),linear-gradient(140deg,#101a28,#090e17 80%); overflow:hidden; }
.journey-scene-grid { position:absolute; inset:0; z-index:-1; background-image:linear-gradient(#67b2d408 1px,transparent 1px),linear-gradient(90deg,#67b2d408 1px,transparent 1px); background-size:44px 44px; mask-image:radial-gradient(ellipse,#000,transparent 78%); pointer-events:none; }
.journey-chapter { display:none; }
.journey-hub { width:220px; margin:32px auto; padding:14px 20px; border:1px solid #62d4f55c; border-radius:10px; background:linear-gradient(150deg,#192b3bf5,#0a1222); box-shadow:0 0 32px #40c9f018; text-align:center; position:relative; }
.journey-hub-label { display:block; font-size:7px; letter-spacing:.12em; color:#8fb3c9; margin-bottom:12px; white-space:nowrap; }
.journey-hub img { width:132px; height:auto; margin:0 auto; }
.journey-hub-line { display:none; }
.journey-track { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; list-style:none; padding:0 24px 24px; margin:0; }
.journey-card { min-width:0; border:1px solid color-mix(in srgb,var(--phase-color) 42%,#152431); border-radius:12px; background:linear-gradient(145deg,#152332,#090f1b); padding:18px; box-shadow:0 10px 25px #0004; }
.journey-card-top { display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--phase-color); }
.journey-card-top > span { font-size:.63rem; font-variant-numeric:tabular-nums; letter-spacing:.08em; }
.journey-card-top > svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.journey-card-art { height:46px; margin:17px 0 20px; position:relative; overflow:hidden; }
.journey-card h3 { font-size:1.12rem; color:#e1ebf9; letter-spacing:-.025em; margin-bottom:10px; }
.journey-card > p { margin:0; font-size:.76rem; line-height:1.65; color:#9fadc0; }
.journey-footer { padding:0 24px 20px; }
.journey-document { display:grid; gap:6px; width:62%; margin:auto; padding:5px 10px; border-left:1px solid var(--phase-color); }
.journey-document i { height:3px; background:#6194ac55; border-radius:2px; }
.journey-document i:nth-child(2n) { width:74%; }
.journey-film { display:flex; gap:4px; height:25px; }
.journey-film i { flex:1; border-radius:3px; background:linear-gradient(150deg,#7798ab,#293f56 46%,#162232 47%,#3e5065); }
.journey-film i:nth-child(2) { filter:hue-rotate(25deg); }
.journey-edit { display:grid; gap:3px; margin-top:5px; }
.journey-edit i { height:3px; background:#537ed7; width:90%; }
.journey-edit i:nth-child(2) { width:65%; margin-left:18%; background:#8771d5; }
.journey-edit i:nth-child(3) { width:78%; background:#40bba9; }
.journey-storage { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; height:100%; }
.journey-storage i { border:1px solid #58d6ff44; border-radius:4px; background:repeating-linear-gradient(180deg,#58d6ff1a 0 4px,transparent 4px 11px); }
.journey-sync { display:flex; align-items:center; justify-content:center; height:100%; gap:22px; color:var(--phase-color); }
.journey-sync i { width:40px; height:30px; border:1px solid #58d6ff55; border-radius:4px; background:#58d6ff0d; }
.journey-sync b { font-size:22px; font-weight:400; }
.journey-wireframe { display:block; width:64%; height:80%; border:1px solid #928aff99; transform:perspective(100px) rotateY(-18deg) rotateX(12deg); margin:4px auto; background:repeating-linear-gradient(90deg,transparent 0 15px,#928aff44 15px 16px),repeating-linear-gradient(0deg,transparent 0 8px,#928aff44 8px 9px); }
.journey-wave { height:100%; display:flex; align-items:center; justify-content:space-between; gap:3px; }
.journey-wave i { width:4px; height:var(--bar); background:var(--phase-color); border-radius:2px; opacity:.65; }
.journey-subtitles { display:grid; gap:7px; padding:4px 12px; height:100%; background:linear-gradient(150deg,#283b56,#111d2e); border-radius:4px; }
.journey-subtitles i { height:4px; background:#a6b4d1; width:76%; margin:auto; border-radius:2px; }
.journey-subtitles i:nth-child(2) { width:90%; }
.journey-wheels { display:flex; justify-content:space-around; padding:3px 20px; }
.journey-wheels i { width:37px; height:37px; border-radius:50%; background:conic-gradient(#5a98d8,#9c62e4,#eb669e,#e8ac63,#63d5c1,#5a98d8); position:relative; }
.journey-wheels i::after { content:''; position:absolute; inset:4px; border-radius:inherit; background:#101b29; }
.journey-key-window { display:flex; align-items:center; justify-content:center; gap:15px; height:100%; border-bottom:1px solid #ffb26d44; color:#ffb26d; }
.journey-key-window i { width:26px; height:3px; background:#ffb26d66; }
.journey-delivery { display:flex; gap:8px; height:100%; }
.journey-delivery i { display:flex; align-items:center; justify-content:center; flex:1; border:1px solid #ffb26d44; border-radius:4px; color:#dfc4a8; font-size:8px; font-style:normal; background:#ffb26d08; }
.journey-end { scroll-margin-top:180px; }
/* Only the enhanced view is pinned; the page keeps its normal vertical scroll. */
.journey-section.is-enhanced .journey-runway { height:calc(100svh + 2100px); }
.journey-section.is-enhanced .journey-sticky { position:sticky; top:var(--journey-top); }
.journey-section.is-enhanced .journey-scene { height:clamp(400px,calc(100svh - var(--journey-top) - 95px),510px); }
.journey-section.is-enhanced .journey-chapter { position:absolute; top:20px; left:24px; right:24px; display:flex; align-items:center; justify-content:space-between; color:var(--journey-color); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; }
.journey-chapter > span:last-child { font-size:.66rem; color:#7992a9; font-variant-numeric:tabular-nums; }
.journey-chapter b { color:#e0edf9; font-weight:500; }
.journey-section.is-enhanced .journey-hub { position:absolute; top:52px; left:50%; transform:translateX(-50%); width:220px; margin:0; border-color:color-mix(in srgb,var(--journey-color) 60%,transparent); box-shadow:0 0 35px color-mix(in srgb,var(--journey-color) 10%,transparent); }
.journey-section.is-enhanced .journey-hub-line { display:block; position:absolute; left:50%; top:100%; width:1px; height:35px; background:var(--journey-color); box-shadow:0 0 7px var(--journey-color); }
.journey-section.is-enhanced .journey-hub-line::after { content:''; position:absolute; width:5px; height:5px; border-radius:50%; left:-2px; bottom:0; background:var(--journey-color); box-shadow:0 0 10px var(--journey-color); }
.journey-section.is-enhanced .journey-window { position:absolute; top:173px; left:0; right:0; height:240px; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.journey-section.is-enhanced .journey-track { display:flex; gap:var(--journey-gap); padding:0; width:max-content; height:236px; transform:translate3d(var(--journey-offset,0px),0,0); will-change:transform; }
.journey-section.is-enhanced.is-stepwise .journey-track { transition:transform 180ms ease-out; }
.journey-section.is-enhanced .journey-track::before { content:''; position:absolute; top:8px; left:0; right:0; height:1px; background:linear-gradient(90deg,#58d6ff88,#928aff88 50%,#41e4cb88 75%,#ffb26d88); box-shadow:0 0 7px #61c7f133; }
.journey-section.is-enhanced .journey-card { position:relative; flex:0 0 var(--journey-card-width); width:var(--journey-card-width); height:230px; opacity:var(--card-opacity,1); transform:translateY(calc((1 - var(--card-focus,1))*6px)) scale(calc(.94 + var(--card-focus,1)*.06)); transform-origin:center; }
.journey-section.is-enhanced .journey-card[aria-current=step] { border-color:var(--phase-color); box-shadow:0 0 0 3px color-mix(in srgb,var(--phase-color) 7%,transparent),0 0 30px color-mix(in srgb,var(--phase-color) 11%,transparent),0 12px 28px #0006; }
.journey-section.is-enhanced .journey-footer { position:absolute; bottom:15px; left:0; right:0; padding:0 24px; }
.journey-progress { height:2px; border-radius:2px; overflow:hidden; background:#9ec5ff1c; margin-bottom:14px; }
.journey-progress i { display:block; width:100%; height:100%; background:linear-gradient(90deg,#58d6ff,#928aff 50%,#41e4cb 75%,#ffb26d); transform:scaleX(var(--journey-progress)); transform-origin:left; }
.journey-scroll-hint { margin:0; font-size:.68rem; color:#a7b8c9; }
.journey-scroll-hint > span { margin-left:8px; color:var(--journey-color); }
.journey-skip { display:inline-block; margin-top:7px; font-size:.63rem; color:#7c93a9; text-decoration:underline; text-underline-offset:4px; }
.journey-skip:hover { color:#d6e6f8; }
@media(max-width:800px) {
 .journey-track { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .journey-section { --journey-card-width:246px; --journey-gap:18px; }
}
@media(max-width:480px) {
 .journey-section { --journey-card-width:232px; --journey-gap:14px; padding-top:64px; padding-bottom:64px; }
 .journey-section .section-heading { margin-bottom:28px; }
 .journey-section .section-kicker { font-size:.65rem; line-height:1.7; }
 .journey-section .section-heading h2 { font-size:2rem; line-height:1.08; }
 .journey-section .section-heading > p:last-child { font-size:.9rem; }
 .journey-toolbar { gap:10px; min-height:45px; padding-bottom:12px; }
 .journey-mode { font-size:.58rem; gap:5px; max-width:150px; line-height:1.4; }
 .journey-view-toggle { font-size:.59rem; padding:7px 8px; }
 .journey-scene { border-radius:14px; }
 .journey-track { grid-template-columns:minmax(0,1fr); padding:0 16px 16px; }
 .journey-card { padding:16px; }
 .journey-card-art { margin:14px 0 15px; height:40px; }
 .journey-card h3 { font-size:1.1rem; }
 .journey-card > p { font-size:.73rem; }
 .journey-section.is-enhanced .journey-scene { height:clamp(398px,calc(100svh - var(--journey-top) - 90px),470px); }
 .journey-section.is-enhanced .journey-chapter { left:16px; right:16px; top:16px; font-size:.56rem; }
 .journey-section.is-enhanced .journey-hub { top:42px; width:200px; padding:13px 16px; }
 .journey-hub-label { font-size:6px; margin-bottom:10px; }
 .journey-hub img { width:118px; }
 .journey-section.is-enhanced .journey-hub-line { height:27px; }
 .journey-section.is-enhanced .journey-window { top:146px; height:224px; }
 .journey-section.is-enhanced .journey-track { height:224px; }
 .journey-section.is-enhanced .journey-card { height:218px; }
 .journey-section.is-enhanced .journey-footer { padding:0 16px; bottom:13px; }
 .journey-scroll-hint { font-size:.6rem; }
 .journey-skip { font-size:.56rem; }
}
@media(max-width:360px) {
 .journey-section { --journey-card-width:218px; }
 .journey-mode { max-width:128px; font-size:.54rem; }
 .journey-view-toggle { font-size:.54rem; padding:7px; }
}
@media(max-height:650px) and (min-width:801px) {
 .journey-section.is-enhanced .journey-scene { height:360px; }
 .journey-section.is-enhanced .journey-hub { top:41px; padding:9px 16px; width:190px; }
 .journey-section.is-enhanced .journey-hub img { width:100px; }
 .journey-section.is-enhanced .journey-hub-label { font-size:6px; margin-bottom:7px; }
 .journey-section.is-enhanced .journey-hub-line { height:20px; }
 .journey-section.is-enhanced .journey-window { top:123px; height:169px; }
 .journey-section.is-enhanced .journey-card { height:166px; padding:13px 16px; }
 .journey-section.is-enhanced .journey-card-art { height:22px; margin:8px 0 10px; }
 .journey-section.is-enhanced .journey-card h3 { font-size:1rem; margin-bottom:6px; }
 .journey-section.is-enhanced .journey-card > p { font-size:.68rem; }
 .journey-section.is-enhanced .journey-footer { bottom:9px; }
 .journey-progress { margin-bottom:8px; }
 .journey-skip { margin-top:3px; }
}
@media(prefers-reduced-motion:reduce) {
 .journey-section *, .journey-section *::before, .journey-section *::after { scroll-behavior:auto; transition:none !important; }
}
@media(max-width:800px) and (max-height:700px) {
 .journey-section.is-enhanced .journey-scene { height:360px; }
 .journey-section.is-enhanced .journey-hub { top:38px; padding:9px 16px; width:185px; }
 .journey-section.is-enhanced .journey-hub img { width:100px; }
 .journey-section.is-enhanced .journey-hub-label { font-size:5px; margin-bottom:7px; }
 .journey-section.is-enhanced .journey-hub-line { height:19px; }
 .journey-section.is-enhanced .journey-window { top:119px; height:169px; }
 .journey-section.is-enhanced .journey-card { height:166px; padding:12px 16px; }
 .journey-section.is-enhanced .journey-card-art { height:22px; margin:8px 0 10px; }
 .journey-section.is-enhanced .journey-card h3 { font-size:1rem; margin-bottom:6px; }
 .journey-section.is-enhanced .journey-card > p { font-size:.68rem; }
 .journey-section.is-enhanced .journey-footer { bottom:10px; }
 .journey-progress { margin-bottom:8px; }
 .journey-skip { margin-top:3px; }
}
