/* The same woodland is visible through the source-aligned patio foreground. */
#journey-viewport{--forest-depth:-1900px;--entry-z:-90px}
#journey-viewport[data-stop=glade]{--forest-depth:-600px;--cam-z:var(--entry-z)}
#journey-viewport[data-transit=outward]{--forest-depth:-1400px}
#journey-viewport .outside-world{transform:translate3d(calc(-1*var(--world-u)),calc(-1*var(--world-v)),var(--forest-depth));transition:transform 2.2s cubic-bezier(.2,.64,.13,1)}
#journey-viewport[data-transit=outward] .outside-world{transition-duration:2.65s}
#journey-viewport[data-stop=glade] .outside-world>.trail-plate{opacity:1}
#journey-viewport .scenery-glade{background:none;overflow:visible}
#journey-viewport:not([data-stop=glade]) .scenery-glade .village-gate{visibility:hidden!important;pointer-events:none!important}
.patio-cutout{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible;pointer-events:none!important}
.intro-world{background:url('assets/trail-v11/trail-panorama-v11.webp') center 58%/cover no-repeat}
#journey-viewport:not([data-stop=glade]) .scenery-glade{transition:opacity 1.1s ease,visibility 0s 1.1s}
/* Gate joins the exact image-space posts instead of guessing a viewport offset. */
#scene-camera .scenery-glade>.village-gate{position:absolute;left:var(--source-gate-x);top:var(--source-gate-y);right:auto;bottom:auto;width:var(--source-gate-w);height:var(--source-gate-h);translate:none;transform:none!important;filter:drop-shadow(0 3px 2px #24382b55);z-index:2;opacity:1}
#scene-camera .scenery-glade>.village-gate .gate-left{inset:0;height:100%;width:100%;gap:5px}
#scene-camera .scenery-glade>.village-gate .gate-left:before{top:25%;height:9%}
#scene-camera .scenery-glade>.village-gate .gate-left:after{top:68%;height:9%}
#scene-camera .scenery-glade>.village-gate .garden-gate-touch{left:8%;top:0;width:84%;height:34%;min-height:48px}
#scene-camera .scenery-glade>.village-gate .gate-invitation{left:65%;top:20%;width:20px;height:10px}
#journey-viewport[data-gate=returning] .gate-left{transform:rotateY(-100deg)}
#journey-viewport[data-gate=returning] .gate-invitation{opacity:0}
#journey-viewport[data-transit=outward] #scene-camera{animation:through-garden-gate-v12-1 2.65s cubic-bezier(.25,.62,.2,1) both}
#journey-viewport[data-transit=outward] .village-friends{opacity:0;transition:opacity .7s}
#journey-viewport[data-transit=outward] .journey-story{opacity:.7}
@keyframes through-garden-gate-v12-1{0%,24%{transform:translate3d(0,0,var(--entry-z))}100%{transform:translate3d(-2vw,2vh,900px)}}
.catalogue-native-state{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:20px 0 14px}
.catalogue-native-state label{display:grid;gap:7px;color:#51344f;font-weight:700;font-size:14px}
.catalogue-native-state select{width:100%;min-height:48px;padding:10px 12px;border:1px solid #b3916b;border-radius:8px;background:#fff9e8;color:#432a44;font:inherit}
@media(max-width:600px){#journey-viewport{--entry-z:-70px}.catalogue-native-state{grid-template-columns:1fr;gap:12px}}
@media(max-width:600px){
 #journey-app[data-view=scene] .workbook-directions>.header-motion{right:68px;min-width:44px;width:44px;height:44px;padding:0;font-size:0;border-radius:50%}
 #journey-app[data-view=scene] .workbook-directions>.header-motion:before{content:"Ⅱ";font:700 20px/1 "Segoe UI",sans-serif}
 #journey-app[data-view=scene] .workbook-directions>.header-motion[aria-pressed=true]:before{content:"▶";font-size:15px}
 #journey-app[data-view=scene] .workbook-directions>.header-motion:disabled:before{content:"◌";font-size:25px}
}
#journey-app[data-motion=still] #scene-camera,#journey-app[data-motion=still] .outside-world{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){#scene-camera,.outside-world{animation:none!important;transition:none!important}}