.architecture-journey { height:340vh; position:relative; z-index:3; }
.journey-sticky { position:sticky; top:0; height:100svh; overflow:hidden; background:rgba(7,17,25,.78); isolation:isolate; }
.journey-copy { position:absolute; top:16%; left:7%; z-index:5; opacity:var(--intro,1); transform:translateY(var(--copy-y,0px)); pointer-events:none; }
.journey-copy span,.journey-final>span { color:#ffb05b; font-size:11px; letter-spacing:3px; font-weight:700; }
.journey-copy h2,.journey-final h2 { font-size:clamp(2rem,3.2vw,3.2rem); line-height:1.06; letter-spacing:-.05em; font-weight:500; margin:12px 0; color:#fff; text-shadow:0 3px 16px #0008; }
.journey-copy p { color:#eef5fb; font-size:14px; margin:0; }
.journey-skip { position:absolute; top:130px; right:5%; color:#fff; z-index:8; font-size:12px; background:#091925aa; padding:10px 16px; border:1px solid #ffffff40; border-radius:30px; }
.journey-scene { position:absolute; inset:0; perspective:1100px; }
.journey-plan,.journey-frame,.journey-facade { position:absolute; width:74%; height:52%; left:13%; top:36%; transform-origin:center; }
.journey-plan { color:#5ac9ff; opacity:var(--plan,.1); transform:translateY(var(--plan-y,0px)) rotateX(12deg) scale(.96); }
.journey-plan svg { width:100%; height:100%; filter:drop-shadow(0 0 12px #25adff66); }
.journey-frame { border:9px solid #506b7b; box-shadow:inset 0 0 0 2px #9fb2bd; display:flex; justify-content:space-around; transform:translateY(var(--frame-y,0px)); opacity:var(--frame,1); }
.journey-frame i { width:8px; background:linear-gradient(90deg,#354d5e,#8fa5b3,#273f51); height:100%; }
.journey-facade { transform:translateY(var(--facade-y,0px)); opacity:var(--facade,1); }
.journey-wall { position:absolute; top:8%; height:82%; width:32%; background:repeating-linear-gradient(0deg,#d7cfc0 0 39px,#a69d8e 40px,#d7cfc0 41px); box-shadow:inset -12px -10px 20px #0002,0 18px 32px #0005; }
.journey-wall.left { left:0; transform:translateX(var(--left-x,0px)) rotateY(var(--angle,0deg)); }
.journey-wall.right { right:0; background:repeating-linear-gradient(90deg,#8c5839 0 12px,#4d3020 13px,#b97b50 15px); transform:translateX(var(--right-x,0px)) rotateY(calc(-1 * var(--angle,0deg))); }
.journey-slab { position:absolute; top:0; height:10%; width:104%; left:-2%; background:linear-gradient(#eae4da,#a7aaa7); box-shadow:0 12px 0 #263c49,0 18px 28px #0005; transform:translateY(var(--slab-y,0px)); }
.journey-floor { position:absolute; bottom:0; height:10%; left:-4%; width:108%; background:linear-gradient(#c7c8c1,#858f94); transform:skewX(-15deg); }
.journey-window { position:absolute; left:39%; top:41%; width:22%; height:39%; overflow:hidden; border:8px solid #1e3544; box-shadow:0 0 0 2px #a6bcc9,0 22px 50px #0008; transform:scale(var(--zoom,1)); transform-origin:50% 50%; z-index:4; }
.journey-window img { width:100%; height:100%; object-fit:cover; }
.journey-mullions { position:absolute; inset:0; background:linear-gradient(90deg,transparent 49%,#253b49 49% 51%,transparent 51%); opacity:var(--mullion,1); }
.journey-final { position:absolute; z-index:6; bottom:18%; left:7%; opacity:var(--final,0); visibility:hidden; padding:25px; background:linear-gradient(90deg,#07111ce6,#07111c55); border-left:3px solid #ff8e24; }
.architecture-journey.is-arrived .journey-final { visibility:visible; }
.journey-final h2 { font-size:clamp(2rem,4vw,4rem); }
.journey-final p { font-size:12px; color:#fff; }
.journey-final a { display:inline-block; color:#111b22; background:#ff982f; padding:12px 20px; margin-top:20px; border-radius:7px; font-size:13px; font-weight:700; }
.journey-status { position:absolute; bottom:5%; left:7%; right:7%; display:flex; align-items:center; gap:25px; z-index:7; font-size:11px; letter-spacing:1px; color:#fff; text-shadow:0 2px 5px #000; }
.journey-status>div { flex:1; background:#ffffff40; height:2px; }
.journey-status i { display:block; height:100%; background:#ff921f; transform:scaleX(var(--progress,0)); transform-origin:left; }
@media(max-width:768px) { .architecture-journey { height:290vh; } .journey-copy { top:20%; } .journey-copy h2 { font-size:2.7rem; } .journey-skip { top:100px; } .journey-plan,.journey-frame,.journey-facade { width:90%; left:5%; height:35%; top:48%; } .journey-window { top:51%; height:27%; left:34%; width:32%; border-width:5px; } .journey-final { left:5%; right:5%; bottom:17%; padding:18px; } .journey-status { gap:12px; font-size:9px; } }
@media(prefers-reduced-motion:reduce) { .architecture-journey { height:100svh; } .journey-copy,.journey-plan,.journey-frame,.journey-facade,.journey-mullions { display:none; } .journey-window { inset:0; width:100%; height:100%; transform:none; border:0; } .journey-final { visibility:visible; opacity:1; } .journey-status { display:none; } }