/* Motion restored from bf1a4b55 (9 November, 20:18). Scoped to the journey. */
/* A single persistent architecture, driven by reading position. */
.journey{max-width:1360px;margin:auto;padding:2rem var(--page-gutter) 5rem;color:#edf4f3;--transfer:0}
.journey-heading{text-align:center;max-width:750px;margin:1rem auto 2.5rem}
.journey-heading h2{font:600 clamp(2.2rem,4.7vw,4.5rem)/1.06 var(--font-display);letter-spacing:-.055em;margin:1rem 0}
.journey-heading h2 span{color:var(--accent-bright)}
.journey-heading>p:last-child{color:#aab9bd}
.journey-nav{display:flex;justify-content:center;gap:.4rem;margin:0 auto 2rem;position:sticky;top:0;z-index:5;padding:.8rem;background:#0b0d10f5;backdrop-filter:blur(16px);border-bottom:1px solid #2a393c}
.journey-nav a{display:flex;align-items:center;gap:.6rem;color:#aab9bd;text-decoration:none;font-size:.85rem;padding:.55rem .8rem;border-radius:6px}
.journey-nav b{font: .7rem var(--font-mono);color:#6b8386}
.journey-nav a[aria-current]{background:#5ec4b420;color:#83dacb}
.journey-nav a:focus-visible{outline:2px solid #83dacb;outline-offset:3px}
.journey-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(250px,1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.concept-stage{position:sticky;top:100px;background:#10171c;border:1px solid #334449;border-radius:16px;overflow:hidden;box-shadow:0 30px 90px #0005}
.concept-toolbar{padding:1rem;display:flex;justify-content:space-between;border-bottom:1px solid #2a393c;font: .65rem var(--font-mono);color:#91a7ac;gap:10px}
.concept-toolbar b{font-weight:400;color:#d3e7e2}.concept-toolbar i{display:inline-block;background:#5ec4b4;width:6px;height:6px;border-radius:50%;margin-right:8px}
.concept-canvas{position:relative;aspect-ratio:800/570;background:radial-gradient(ellipse at 50% 40%,#173a383d,transparent 70%),radial-gradient(#36494e75 1px,transparent 1px);background-size:auto,20px 20px}
.concept-node{position:absolute;z-index:2;transform:translate(-50%,-50%);width:26%;min-height:65px;padding:12px 10px;display:flex;align-items:center;gap:9px;border:1px solid #40545b;border-radius:10px;background:#18232a;box-shadow:0 8px 20px #0003}
.concept-node small{display:block;font:500 clamp(7px,.65vw,10px)/1.6 var(--font-mono);color:#9ab1b7;white-space:nowrap}
.concept-node strong{display:block;font-size:clamp(10px,1.1vw,16px);font-weight:500;white-space:nowrap}.node-icon{font:20px var(--font-mono);color:#6fd1c0}.node-check{margin-left:auto;color:#6fd1c0}
.repo-node{left:50%;top:16%;border-color:#5a9186}.app-node{left:23%;top:51%}.db-node{left:77%;top:51%}.storage-node{left:50%;top:78%}
.public-node{left:20%;top:24%;opacity:0}.network-zone{position:absolute;inset:34% 5% 30% 32%;border:1px dashed #5ec4b4;border-radius:18px;background:#5ec4b40a;opacity:0}.network-zone>span{position:absolute;top:12px;left:16px;font:8px var(--font-mono);color:#7dd8c9}
.concept-wires{position:absolute;inset:0;width:100%;height:95%}.wire{fill:none;stroke:#54867d;stroke-width:1.5;stroke-dasharray:5 5}.infra-wire,.network-wire,.transfer-wire{opacity:0}
.terraform-panel,.audit-panel,.migration-panel,.live-panel{position:absolute;z-index:3;opacity:0;pointer-events:none;transform:translateY(12px);border:1px solid #3c565a;background:#111e25;border-radius:12px;left:44%;right:5%;top:20%;padding:20px;box-shadow:0 15px 35px #0003}
.terraform-panel>span{display:block;font:11px var(--font-mono);color:#e2efec;border-bottom:1px solid #334449;padding-bottom:12px}.terraform-panel b{display:block;color:#7b9b9f;font-size:7px;margin-top:6px}.terraform-panel code{display:block;margin-top:16px;background:none;color:#c3d4d7;font:clamp(8px,.9vw,12px)/1.9 var(--font-mono);white-space:pre-wrap}.terraform-panel em{color:#76d6c3;font-style:normal}.terraform-panel small,.live-panel small{display:block;color:#8fa8ae;font-size:9px;margin-top:12px}
.scene-eyebrow{display:block;font:8px var(--font-mono);letter-spacing:.06em;color:#91acb2;margin-bottom:15px}.audit-panel>strong,.live-panel>strong{font:500 clamp(15px,1.6vw,23px) var(--font-display)}.audit-panel>div{display:flex;gap:12px;align-items:center;padding:16px 0;border-bottom:1px solid #334449;font-size:12px}.audit-panel b{color:#f3cd86;font:10px var(--font-mono)}.audit-panel small{display:block;color:#99afb5;font-size:10px;margin-top:5px}.audit-panel p{color:#7ed7c6;font-size:11px;margin-bottom:0}
.migration-panel>div{display:flex;justify-content:space-between;gap:8px;font-size:11px;margin:18px 0 8px}.migration-panel b{font-weight:400;color:#9ab5b8;font-size:9px}.migration-panel i{display:block;height:5px;background:#293c42;border-radius:5px;overflow:hidden}.migration-panel i:after{content:"";display:block;width:100%;height:100%;background:#6fd1c0;transform:scaleX(var(--transfer));transform-origin:left}.migration-panel>small{display:block;color:#9ab5b8;font-size:10px;margin-top:20px}
.live-panel{left:10%;right:10%;top:48%}.live-panel>div{display:flex;gap:10px;margin-top:12px;font:9px var(--font-mono);color:#7ed7c6}.live-panel>div span:before{content:'✓ ';}.live-panel svg{width:100%;height:55px;margin-top:10px}.live-panel path{fill:none;stroke:#6fd1c0;stroke-width:2}
.scene-caption{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;padding:12px 18px;background:#111a20;border-top:1px solid #2c4146;gap:10px}.scene-caption span{font:8px var(--font-mono);color:#7ed7c6}.scene-caption b{font-size:10px;font-weight:400;color:#b9cecd}
.journey-step{min-height:75vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;scroll-margin-top:160px;padding:3rem 0}.journey-step h3{font:600 clamp(2rem,3.5vw,3.4rem)/1.06 var(--font-display);letter-spacing:-.045em;margin:1rem 0;color:#f2f7f6}.journey-step>p:not(.landing-kicker){color:#adbdc2;max-width:34ch;font-size:1.04rem;line-height:1.7}.journey-step>a{color:#71cebe;font-size:.9rem;text-underline-offset:5px}.journey-step .landing-kicker{font-size:.65rem;letter-spacing:.08em}
 .journey[data-stage="0"] .origins-panel,.journey[data-stage="1"] .github-panel,.journey[data-stage="2"] .terraform-panel,.journey[data-stage="3"] .network-zone,.journey[data-stage="3"] .public-node,.journey[data-stage="3"] .network-wire,.journey[data-stage="4"] .audit-panel,.journey[data-stage="5"] .migration-panel,.journey[data-stage="6"] .build-panel,.journey[data-stage="7"] .live-panel,.journey[data-stage="8"] .operations-panel{opacity:1;transform:translateY(0)}
.journey[data-stage="3"] .public-node{transform:translate(-50%,-50%)}
.source-wire{display:none}
.journey[data-stage="0"] .app-node,.journey[data-stage="0"] .db-node,.journey[data-stage="0"] .storage-node{opacity:0}
@media(prefers-reduced-motion:no-preference){.terraform-panel,.audit-panel,.migration-panel,.live-panel,.network-zone,.public-node,.wire{transition:opacity .3s ease,transform .3s ease}}
@media(max-width:1050px){.journey-layout{gap:2rem;grid-template-columns:minmax(0,1.5fr) minmax(230px,1fr)}.concept-node{gap:5px;padding:8px;min-height:54px}.node-icon{font-size:15px}.terraform-panel,.audit-panel,.migration-panel{padding:12px}.audit-panel>div{gap:6px}.journey-nav a{padding:.5rem}.concept-toolbar{font-size:8px}}
@media(max-width:799px){.journey{padding-inline:var(--page-gutter)}.journey-layout{display:flex;flex-direction:column;gap:0}.concept-stage{width:100%;top:56px;z-index:4}.journey-nav{gap:0;justify-content:space-between;padding:.5rem 0;margin-bottom:1rem}.journey-nav a{flex-direction:column;gap:3px;font-size:9px;padding:6px}.journey-nav b{font-size:8px}.journey-copy{width:100%}.journey-step{min-height:85vh;justify-content:flex-end;padding:3rem 0 4rem;scroll-margin-top:55vh}.journey-step h3{font-size:2rem;max-width:20ch}.journey-step>p:not(.landing-kicker){max-width:45ch;font-size:.95rem}.concept-canvas{aspect-ratio:800/530}.concept-node strong{font-size:clamp(10px,2.5vw,15px)}.concept-node small{font-size:7px}.concept-toolbar{padding:9px}.terraform-panel code{font-size:clamp(8px,2vw,12px)}.scene-caption{padding:9px}.scene-caption b{font-size:8px}.audit-panel>strong{font-size:15px}.audit-panel>div{padding:10px 0;font-size:10px}.audit-panel small{font-size:8px}.audit-panel p{font-size:9px}.scene-eyebrow{font-size:7px;margin-bottom:10px}.live-panel{padding:12px}.live-panel svg{height:28px}.live-panel small{font-size:7px;margin-top:4px}.network-zone>span{font-size:6px;left:8px}.journey-heading h2{font-size:2.4rem}}
@media(max-height:650px) and (min-width:800px){.concept-stage{top:75px}.journey-nav{padding:.4rem}.concept-canvas{max-height:430px}.journey-step{min-height:90vh}}
@media(prefers-reduced-motion:reduce){.journey *{transition:none!important;scroll-behavior:auto!important}}

@media(max-width:799px){.journey-step{min-height:65vh;justify-content:flex-start;padding:2rem 0 4rem;scroll-margin-top:calc(66vw + 110px)}}

.journey:not(.motion-ready) .journey-step{min-height:auto;padding:2rem 0}.journey:not(.motion-ready) .concept-stage{position:relative;top:auto}

/* Editorial hierarchy: one hero, then the story immediately. */
.journey-heading{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;max-width:none;text-align:left;margin:0 0 1rem;padding-top:1rem;border-top:1px solid #2b3c40}
.journey-heading h2{font:500 1.05rem/1.4 var(--font-sans);letter-spacing:0;margin:0;color:#d3e2df}.journey-heading>p:last-child{font-size:.8rem;margin:0}
.journey{padding-top:1rem}.journey-nav{gap:0;justify-content:space-between}.journey-nav a{font-size:.72rem;padding:.55rem .45rem;gap:.3rem}
.origins-panel,.github-panel,.build-panel,.operations-panel{position:absolute;z-index:3;left:43%;right:5%;top:20%;padding:20px;background:#111e25;border:1px solid #3c565a;border-radius:12px;opacity:0;transform:translateY(12px);pointer-events:none}
.origins-panel{left:8%;right:8%;top:27%;background:transparent;border:0;padding:0}.origin-group{display:flex;align-items:center;gap:14px;border:1px solid #425159;border-radius:10px;padding:17px;margin:10px 0;background:#18232a}.origin-group>small{width:28%;font:8px var(--font-mono);color:#94aaaf}.origin-group>span{display:flex;align-items:center;gap:8px;font-size:13px;white-space:nowrap}.origin-group img,.github-panel img,.node-icon img{filter:brightness(0) invert(1)}.origin-note{font-size:9px;color:#92a9ad;display:block;margin-top:15px}
.github-panel>strong,.build-panel>strong,.operations-panel>strong{display:block;font:500 clamp(15px,1.5vw,23px)/1.2 var(--font-display);margin:10px 0 18px}.github-panel dl{font-size:12px}.github-panel dt{font:9px var(--font-mono);color:#91a9ae;margin-top:13px}.github-panel dd{margin:4px 0;color:#8edccc}.github-panel>small,.operations-panel>small{font-size:9px;color:#94aaaf}.build-route{display:flex;gap:12px;padding:16px 0;border-top:1px solid #34494e;font-size:12px}.build-route b{color:#7cd8c5;font:10px var(--font-mono)}.build-route small{display:block;font-size:9px;color:#9eb5b8;margin-top:6px}.build-panel p{font-size:10px;color:#80cdbc;margin:0}.operation-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.operation-grid>span{border:1px solid #3e5a5f;border-radius:7px;padding:10px;color:#84dac9;font-size:12px}.operation-grid small{display:block;font-size:8px;color:#a1b8bc;margin-top:5px}.branch-demo{font-size:9px;margin:18px 0;padding:9px;background:#203138;border-radius:6px}.branch-demo b{color:#a7e1d3;font-weight:500}
@media(prefers-reduced-motion:no-preference){.origins-panel,.github-panel,.build-panel,.operations-panel{transition:opacity .3s,transform .3s}}
@media(max-width:1050px){.origin-group{gap:8px;padding:12px}.origin-group>span{font-size:10px;gap:5px}.origin-group>small{font-size:7px}.origin-group img{width:18px;height:18px}.github-panel,.build-panel,.operations-panel{padding:12px}.build-route{font-size:10px;padding:12px 0}.operation-grid>span{font-size:10px;padding:8px}.journey-nav a{font-size:10px}}
@media(max-width:799px){.journey-heading{display:block}.journey-heading h2{font-size:1rem}.journey-heading>p:last-child{margin-top:6px}.journey-nav{overflow-x:auto;justify-content:flex-start;gap:4px}.journey-nav a{min-width:47px;font-size:8px;flex-shrink:0}.origin-group>small{font-size:6px}.origin-group>span{font-size:9px}.origin-group img{width:16px;height:16px}.origin-group{padding:10px 8px;gap:6px}.origin-note{font-size:7px}.github-panel>img{width:20px;height:20px}.github-panel>strong,.build-panel>strong,.operations-panel>strong{font-size:13px;margin:6px 0 10px}.github-panel dl{font-size:10px;margin:0}.github-panel dt{font-size:7px;margin-top:6px}.github-panel>small,.operations-panel>small{font-size:7px}.operation-grid{gap:4px}.operation-grid>span{font-size:9px;padding:6px}.operation-grid small{font-size:6px}.branch-demo{font-size:7px;padding:5px;margin:9px 0}.build-route{font-size:9px;padding:10px 0;gap:6px}.build-route small{font-size:7px}.build-panel p{font-size:8px}}
/* Keep the original display face inside the restored component. */
.journey{--font-display:"Space Grotesk",ui-sans-serif,sans-serif}
.sr-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* Mobile and reduced motion keep the full text in normal document flow. */
@media(max-width:799px),(prefers-reduced-motion:reduce){
  .journey-layout{display:block}
  .concept-stage{display:none}
  .journey-nav{position:relative;top:auto;overflow-x:auto;justify-content:flex-start}
  .journey-nav a{flex-shrink:0}
  .journey-step{min-height:0;padding:2rem 0 3rem;scroll-margin-top:24px}
}