/* One continuous outdoor coordinate system: the camera passes the village. */
#journey-viewport{--world-u:50%;--world-v:63%;--trail-magic:0;--cam-x:0px;--cam-y:0px;--cam-z:-90px;--cam-yaw:0deg;--cam-tilt:0deg}
#journey-viewport{background:#213d2d url('assets/trail-v11/trail-panorama-v11.webp') center/cover no-repeat}
#journey-viewport #scene-camera{transition:transform 2.2s cubic-bezier(.2,.64,.13,1)}
#journey-viewport[data-stop=trail]{--cam-z:1650px;--cam-y:0px;--cam-x:0px;--cam-yaw:0deg;--cam-tilt:0deg;--trail-magic:.07}
#journey-viewport[data-stop=fork]{--cam-z:1950px;--cam-y:0px;--cam-x:0px;--cam-yaw:0deg;--cam-tilt:0deg;--trail-magic:.58}
#journey-viewport:is([data-stop=bridge],[data-stop=garden]){--cam-z:2250px;--cam-y:0px;--cam-x:0px;--cam-yaw:0deg;--cam-tilt:0deg;--trail-magic:1}
.scenery-glade,.park-world{transition:opacity 1.7s ease,visibility 0s 1.7s}
#journey-viewport:not([data-stop=glade]) .scenery-glade,#journey-viewport:not([data-stop=glade]) .park-world{opacity:0;visibility:hidden}
#journey-viewport[data-stop=glade] .scenery-glade,#journey-viewport[data-stop=glade] .park-world{opacity:1;visibility:visible;transition:opacity 1.7s ease,visibility 0s}
.outside-world{--world-w:max(150vw,225svh);--world-h:calc(var(--world-w)*2/3);position:absolute;left:50%;top:45%;width:var(--world-w);height:var(--world-h);transform:translate3d(calc(-1*var(--world-u)),calc(-1*var(--world-v)),-1900px);transform-style:preserve-3d;transition:transform 2.2s cubic-bezier(.2,.64,.13,1);pointer-events:none!important}
.outside-world>.trail-plate{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:fill;pointer-events:none;opacity:1;transition:opacity 1.6s}
#journey-viewport[data-stop=glade] .outside-world>.trail-plate,#journey-viewport[data-stop=glade] .outside-world>.trail-foreground,#journey-viewport[data-stop=glade] .trail-atmosphere{opacity:0}
.outside-world>.trail-friends,.outside-world>.fork-friends,.outside-world>.destination-friends{position:absolute;inset:0;transform:none;transition:opacity .5s}
.outside-world .discovery-thicket{left:calc(var(--habitat-x)*100%);top:calc(var(--habitat-y)*100%);right:auto;bottom:auto;width:calc(var(--habitat-w)*100%);height:calc(var(--habitat-h)*100%);transform:none;isolation:isolate;transform-style:flat}
.outside-world .discovery-thicket>.world-friend{inset:0;width:100%;height:100%;min-width:0;min-height:0;left:0;top:0;transform:none;rotate:0deg;--actor-body-width:92%;--actor-body-height:96%;filter:none}
.outside-world .thicket-gnome .actor-body>img{object-position:center top}
.outside-world .thicket-gnome .actor-body>img{translate:-8% 6%;transition:translate .35s ease}
.outside-world .thicket-troll .actor-body>img{translate:-8% 6%;transition:translate .35s ease}
#outside-world .thicket-gnome>.thicket-branch{bottom:54%;width:110%;left:-5%}
#outside-world .thicket-troll>.thicket-branch{bottom:54%;width:120%;left:-10%}
.outside-world .thicket-gnome>.thicket-branch>i,.outside-world .thicket-troll>.thicket-branch>i{mask-image:linear-gradient(#000 0 68%,#0009 82%,transparent)}
.outside-world .discovery-thicket:is(.is-near,.is-focused,.discovered) .actor-body>img{translate:0 0}
.outside-world .thicket-owl .actor-body>img,.outside-world .thicket-raven .actor-body>img{object-position:center bottom}
.outside-world .thicket-owl .actor-body>img{translate:-7% 5%;transition:translate .35s ease}
.outside-world .thicket-raven .actor-body>img{translate:6% 5%;transition:translate .35s ease}
.outside-world .actor-body:before{display:none}
.natural-habitat-cover{position:absolute;z-index:2;left:calc(-1*var(--habitat-x)*var(--world-w));top:calc(-1*var(--habitat-y)*var(--world-h));width:var(--world-w);height:var(--world-h);background:url('assets/trail-v11/trail-panorama-v11.webp') 0 0/100% 100% no-repeat;clip-path:var(--habitat-clip);pointer-events:none!important}
.outside-world .discovery-thicket>.thicket-branch{z-index:3;left:-20%;right:auto;top:auto;bottom:-8%;width:140%;height:auto;aspect-ratio:3/2;transform-origin:48% 91%;opacity:1!important;filter:none}
.outside-world .discovery-thicket>.thicket-branch>i{background:url('assets/trail-v11/fern-fringe-v11.webp') center/100% 100% no-repeat;rotate:0deg;scale:1;filter:none}
.outside-world .thicket-raven>.thicket-branch>i,.outside-world .thicket-badger>.thicket-branch>i{scale:-1 1}
.outside-world .thicket-owl>.thicket-branch{bottom:44%;width:100%;left:0}
.outside-world .thicket-raven>.thicket-branch{bottom:48%;width:100%;left:0}
.outside-world .thicket-owl>.thicket-branch>i,.outside-world .thicket-raven>.thicket-branch>i{mask-image:linear-gradient(#000 0 72%,#0009 85%,transparent)}
#outside-world .thicket-owl>.thicket-branch,#outside-world .thicket-raven>.thicket-branch,#outside-world .thicket-troll>.thicket-branch,#outside-world .thicket-gnome>.thicket-branch{display:none!important}
.outside-world .discovery-thicket:after{display:none}
#outside-world .thicket-owl:after,#outside-world .thicket-raven:after,#outside-world .thicket-troll:after,#outside-world .thicket-gnome:after{content:"";display:block;position:absolute;inset:auto;left:12%;top:3%;width:76%;height:48%;border-radius:50%;background:radial-gradient(ellipse,#c0fff548,#82cfe938 40%,transparent 72%);opacity:calc(var(--trail-magic)*.72);filter:blur(4px);mix-blend-mode:screen;z-index:4;pointer-events:none!important;transition:opacity 1.5s}
#outside-world .thicket-raven:after{background:radial-gradient(ellipse,#d1c6ff66,#81dff53d 44%,transparent 74%)}
#outside-world .thicket-gnome:after{background:radial-gradient(ellipse,#fff2af66,#a0f4d455 44%,transparent 74%)}
.outside-world .discovery-thicket>[data-discovery-caption]{top:auto;bottom:-19px;font-size:10px;max-width:135px;padding:4px 7px;line-height:1.15;z-index:9}
.outside-world .discovery-thicket:focus-within:before{content:"";position:absolute;inset:-3px;border:2px dashed #ffe49b;border-radius:40%;z-index:8;pointer-events:none}
.outside-world .world-friend:focus-visible{outline:none}
.trail-foreground{position:absolute;width:26%;height:24%;background:url('assets/trail-v11/fern-fringe-v11.webp') center bottom/contain no-repeat;pointer-events:none;opacity:1;transition:opacity 1.6s;transform-origin:48% 91%;transform-style:preserve-3d}
.fern-left{left:1%;top:70%;transform:translateZ(160px) rotate(-8deg)}
.fern-right{right:-3%;top:72%;transform:translateZ(195px) scaleX(-1) rotate(-7deg)}
.trail-atmosphere{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none!important;opacity:1;transition:opacity 1.5s}
.trail-atmosphere:before{content:"";position:absolute;left:18%;top:25%;width:19%;height:16%;background:radial-gradient(ellipse,#91fae64a,#70d7ea26 40%,transparent 74%);filter:blur(8px);mix-blend-mode:screen;opacity:0;transition:opacity 1.8s;pointer-events:none;transform:translateZ(18px)}
#journey-viewport[data-stop=bridge] .trail-atmosphere:before{opacity:.8}
.trail-glimmer{position:absolute;left:var(--light-x);top:var(--light-y);width:5px;height:5px;border-radius:50%;background:#d6ffdc;box-shadow:0 0 5px 2px #9effe4,0 0 15px 8px #75e6da55;opacity:calc(var(--trail-magic)*.7);transform:translateZ(14px);animation:woodland-light-drift 17s var(--drift-delay) ease-in-out infinite alternate;pointer-events:none}
.glimmer-bridge{box-shadow:0 0 6px 2px #8cebe9,0 0 22px 12px #2bd6dc33;transform:translateZ(25px)}
.glimmer-garden{background:#fff1b4;box-shadow:0 0 7px 2px #fff1b4,0 0 25px 12px #a0f9de55;transform:translateZ(38px)}
@keyframes woodland-light-drift{from{translate:-3px 3px}to{translate:5px -8px}}
/* Clear wooden waymarkers stand beside the route rather than cover the birds. */
#journey-next.path-entry{left:58%;top:61%;bottom:auto;width:225px;height:auto;min-height:58px;border:2px solid #805a35;border-radius:5px 11px 7px 5px;padding:11px 21px 11px 14px;background:repeating-linear-gradient(2deg,transparent 0 6px,#92613518 7px,transparent 9px 13px),linear-gradient(100deg,#b88a4c,#f5d994 15%,#ebc780 90%,#b38a4e);color:#422a3d;font:400 19px/1.12 "Quest Display",sans-serif!important;box-shadow:0 4px 0 #715035,0 8px 10px #18352d55;isolation:isolate;translate:-50% 0;overflow:visible}
#journey-next.path-entry:before{content:"➜";position:absolute;left:auto;right:10px;top:50%;translate:0 -50%;width:auto;height:auto;rotate:0deg;background:none;border:0;box-shadow:none;opacity:1;color:#5f3d31;font-size:21px}
#journey-next.path-entry:after,#journey-next.path-entry:focus-visible:after{content:"";position:absolute;left:48%;top:calc(100% + 3px);bottom:auto;width:12px;height:82px;border:1px solid #6c523b;border-radius:0;background:linear-gradient(90deg,#765c3e,#c6a16b 45%,#8c6a44);translate:none;rotate:0deg;box-shadow:2px 3px 4px #243b2d44;opacity:1;z-index:-1;pointer-events:none;padding:0;max-width:none}
#journey-next.path-entry:hover{filter:brightness(1.07)}
#journey-next.path-entry:focus-visible{outline:3px dashed #ffebad;outline-offset:6px}
.journey-viewport>.fork-signs{position:absolute;display:grid;left:57%;top:59%;translate:-50% 0;gap:10px;width:225px;z-index:45;pointer-events:none;transform:none}
.journey-viewport>.fork-signs:before{content:"";position:absolute;top:18px;left:48%;width:13px;height:170px;background:linear-gradient(90deg,#725236,#ba925d,#805f40);border:1px solid #604a33;z-index:-1;pointer-events:none}
.journey-viewport>.fork-signs button{width:100%;min-width:0;min-height:49px;padding:9px 15px;font-size:18px;rotate:-3deg;pointer-events:auto!important}
.journey-viewport>.fork-signs button+button{rotate:3deg}
.journey-reading-dock>.journey-story{grid-row:2}
.trail-look-controls{display:none;grid-row:1;grid-template-columns:1fr 1.1fr 1fr;gap:7px;pointer-events:none}
.trail-look-controls>button{min-height:44px;padding:6px 8px;border:1px solid #917348;border-radius:8px 11px;background:#fff0cce8;color:#493448;font:400 13px "Quest Display",sans-serif;pointer-events:auto;box-shadow:0 3px 0 #70503b55}
.trail-look-controls>button[aria-pressed=true]{background:#63475c;color:#fff0bd}
.world-workbook-finds{position:absolute;inset:0;pointer-events:none!important}
.world-workbook-finds>.workbook-find{position:absolute;z-index:7;left:var(--find-left);top:var(--find-top);width:55px;height:48px;min-width:44px;min-height:44px;padding:0;border:0;background:none;pointer-events:auto!important;rotate:var(--find-angle);cursor:pointer}
.world-workbook-finds>.workbook-find-trail{--find-left:34%;--find-top:67%}
.world-workbook-finds>.workbook-find-woods{--find-left:47%;--find-top:27%}
.workbook-find:after{content:"";position:absolute;left:-28%;bottom:-10%;width:150%;height:110%;background:url('assets/trail-v11/fern-fringe-v11.webp') center bottom/contain no-repeat;transform-origin:48% 91%;transition:rotate .4s;rotate:0deg;pointer-events:none}
.workbook-find.is-near:after,.workbook-find:focus-visible:after,.workbook-find.is-peeked:after{rotate:-14deg}
.workbook-find.is-found:after{rotate:-19deg}
.patio-discoveries>.workbook-find-patio{--find-left:78%;--find-top:73%}
.workbook-pouch{--discovery-pouch-left:134px}
.village-map-stop.map-stop-trail{right:5%;top:54%;width:32%}
.village-map-stop.map-stop-fork{left:32%;top:30%;width:39%}
#outside-world>#journey-next{left:52%;top:62%;bottom:auto;width:225px;min-height:62px;padding-right:34px;font-size:20px!important;z-index:9;translate:-50% 0}
#outside-world>#fork-signs{position:absolute;display:grid;left:55%;top:27.5%;translate:-50% 0;gap:10px;width:205px;z-index:9;pointer-events:none;transform:none}
#outside-world>#fork-signs:before{content:"";position:absolute;top:18px;left:48%;width:13px;height:170px;background:linear-gradient(90deg,#725236,#ba925d,#805f40);border:1px solid #604a33;z-index:-1;pointer-events:none}
#outside-world>#fork-signs button{width:100%;min-width:0;min-height:49px;padding:9px 15px;font-size:18px;rotate:-3deg;pointer-events:auto!important}
#outside-world>#fork-signs button+button{rotate:3deg}
@media(max-width:1050px){
 .trail-look-controls:not([hidden]){display:grid}
 #journey-viewport:not([data-stop=glade]) .journey-reading-dock{bottom:78px;gap:9px}
 #journey-next.path-entry{top:57%;left:50%;width:205px;min-height:52px;font-size:16px!important}
 #journey-next.path-entry:after{height:54px}
 .journey-viewport>.fork-signs{top:52%;left:50%;width:205px;gap:8px}
 .journey-viewport>.fork-signs button{min-height:44px;font-size:16px}
 .journey-viewport>.fork-signs:before{height:140px}
 .workbook-pouch{--discovery-pouch-left:82px}
}
@media(max-width:600px){
 #journey-viewport{--cam-z:-70px}
 #journey-viewport[data-stop=trail]{--cam-z:1650px}
 #journey-viewport[data-stop=fork]{--cam-z:1950px}
 #journey-viewport:is([data-stop=bridge],[data-stop=garden]){--cam-z:2250px}
 #journey-viewport:not([data-stop=glade]) .journey-reading-dock{bottom:64px;gap:8px}
 .trail-look-controls>button{font-size:12px;padding:6px 5px}
 .outside-world .discovery-thicket>[data-discovery-caption]{font-size:9px;max-width:110px}
 .trail-glimmer:nth-child(2n){display:none}
 .patio-discoveries>.workbook-find-patio{--find-left:76%;--find-top:65%}
 .workbook-pouch{--discovery-pouch-left:97px}
 .workbook-pouch>summary{width:46px}
 .workbook-pouch-sheet{left:-85px}
}
#journey-app[data-motion=still] .outside-world,#journey-app[data-motion=still] .trail-glimmer,#journey-app[data-motion=still] .workbook-find:after{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.outside-world,.trail-glimmer,.workbook-find:after{animation:none!important;transition:none!important}}
