/* Long trails with matched 3:1 scenery planes and one uniform actor scale. */
.panoramic .panorama-far{position:absolute;left:0;z-index:-3;will-change:transform;pointer-events:none}
.panoramic .scenery-art{position:absolute;left:0;top:0;object-fit:fill!important;width:100%;height:100%;max-width:none;transition:none!important;will-change:transform,opacity}
.panoramic #worldSpace{position:absolute;left:0;top:0;transform-origin:0 0;z-index:3;will-change:transform;pointer-events:none;isolation:isolate}
.panoramic .terrain-tile{position:absolute;left:0;top:0;width:3600px;height:1200px;max-width:none;z-index:-1;pointer-events:none}
.panoramic .panorama-foreground{position:absolute;left:0;z-index:9;pointer-events:none;will-change:transform}
.panoramic .panorama-foreground>img{display:block;width:100%;height:auto;object-fit:contain;opacity:.82;transform-origin:50% 100%;animation:foliageWind 7s ease-in-out infinite alternate}
.panoramic #worldSpace .scene-actor{transition:none!important;aspect-ratio:auto;transform:translate(-50%,-100%);will-change:left,top}
.panoramic #worldSpace .bridge-object,.panoramic #worldSpace .gate-object,.panoramic #worldSpace .flower-object,.panoramic #worldSpace .ground-lantern,.panoramic #worldSpace .river-sheen{right:auto;bottom:auto;aspect-ratio:auto;transition:filter .8s,opacity .8s}
.panoramic #worldSpace .bridge-object>img,.panoramic #worldSpace .gate-object>img,.panoramic #worldSpace .flower-object>img{width:100%;height:100%;object-fit:contain}
.panoramic #worldSpace .bridge-object{z-index:1;opacity:1!important}
.panoramic #worldSpace .gate-object{opacity:1}
.panoramic #world[data-flower-carried=true] #worldSpace .flower-object{opacity:0}
.panoramic #worldSpace .flower-object{z-index:4}
.panoramic .world-hotspot{transition:opacity .25s,filter .25s}
.panoramic .world-hotspot:hover{transform:none;filter:drop-shadow(0 0 8px #d4dfb0)}
.panoramic .sky-clouds{position:absolute;z-index:-2;left:-10%;top:4%;width:130%;height:40%;pointer-events:none;opacity:.2;background:radial-gradient(ellipse at 17% 40%,#c9deeb44,transparent 31%),radial-gradient(ellipse at 62% 28%,#c1d6e733,transparent 26%),radial-gradient(ellipse at 93% 68%,#d2deee26,transparent 27%);filter:blur(21px);animation:cloudPass 48s ease-in-out infinite alternate}
.panoramic .distant-mist{position:absolute;inset:30% -10% 28%;z-index:0;pointer-events:none;opacity:.18;background:radial-gradient(ellipse at 55% 75%,#aac6d777,transparent 64%);animation:mistBreathe 13s ease-in-out infinite alternate}
.panoramic .bank-mist{position:absolute;left:0;top:700px;width:3600px;height:220px;background:radial-gradient(ellipse at 30% 65%,#bdd6cb1f,transparent 50%),radial-gradient(ellipse at 78% 70%,#8ebac826,transparent 45%);z-index:0;pointer-events:none;animation:bankMist 17s ease-in-out infinite alternate}
.panoramic #worldSpace .mei-actor .actor-art{animation:meiBreathe 4.6s ease-in-out infinite;transform-origin:50% 95%}
.panoramic #worldSpace .abby-actor .actor-art{animation:catBreathe 3.8s ease-in-out infinite;transform-origin:50% 90%}
.panoramic #worldSpace .luma-actor .actor-art{animation:lumaDrift 3.4s ease-in-out infinite alternate}
.panoramic #world[data-travel-kind=journey] #worldSpace .mei-actor .actor-art{animation:meiTravel .48s ease-in-out infinite alternate}
.panoramic #world[data-travel-kind=journey] #worldSpace .abby-actor .actor-art{animation:catTravel .34s ease-in-out infinite alternate}
.panoramic #world[data-travel-kind=journey] #worldSpace .luma-actor .actor-art{animation:lumaTravel 1.1s ease-in-out infinite alternate}
.panoramic #world[data-travel-kind=approach] #worldSpace .abby-actor .actor-art{animation:catTravel .45s ease-in-out infinite alternate}
.panoramic #world.casting #worldSpace .mei-actor .actor-art{animation:meiSpell 1s ease-in-out}
.panoramic #world.casting[data-action=bridge] #worldSpace .abby-actor .actor-art{animation:catLeapTilt 1.75s ease-in-out both}
.panoramic #world.casting[data-action=bridge][data-abby-route=under] #worldSpace .abby-actor .actor-art{animation:catTravel .4s ease-in-out infinite alternate}
.panoramic #world.casting[data-action=gate] #worldSpace .mei-actor .actor-art{animation:meiCelebrate 1.3s ease-in-out}
.panoramic #world.casting[data-action=gate] #worldSpace .luma-actor .actor-art{animation:lumaCelebrate 1.3s ease-in-out}
.panoramic #worldSpace .ground-shadow{transform-origin:center;animation:shadowBreathe 4.6s ease-in-out infinite}
.panoramic #world[data-travel-kind=leap] #worldSpace .abby-actor .ground-shadow{opacity:.18;filter:blur(10px)}
.panoramic #worldSpace .carried-lantern{transform-origin:50% 0;animation:lanternSwing 3.5s ease-in-out infinite alternate}
.panoramic #world[data-travel-kind=journey] #worldSpace .carried-lantern{animation-duration:.48s}
.panoramic #worldSpace .carried-flower{transform-origin:50% 100%;animation:flowerSway 4s ease-in-out infinite alternate}
.panoramic .cast-ring{left:600px;top:700px;width:140px}
.panoramic .spell-mote{width:5px;height:5px}
.skip-travel{color:#e7dcc3;background:#14333ca6;border:1px solid #c6d5bb59;border-radius:7px;padding:7px 9px;min-height:36px;font:10px system-ui;letter-spacing:0;text-transform:none;pointer-events:auto;margin-left:7px}
@keyframes cloudPass{to{transform:translateX(5%)}}
@keyframes mistBreathe{to{opacity:.29;transform:translateX(-1.5%)}}
@keyframes bankMist{to{opacity:.5;transform:translateX(30px)}}
@keyframes meiBreathe{50%{transform:translateY(-2px) rotate(.35deg)}}
@keyframes catBreathe{50%{transform:translateY(-1.5px) rotate(-.45deg)}}
@keyframes lumaDrift{to{transform:translate(7px,-14px) rotate(2.5deg)}}
@keyframes meiTravel{from{transform:translateY(0) rotate(-1.8deg)}to{transform:translateY(-7px) rotate(1.8deg)}}
@keyframes catTravel{to{transform:translateY(-7px) rotate(-2.5deg)}}
@keyframes lumaTravel{to{transform:translate(12px,-22px) rotate(4deg)}}
@keyframes meiSpell{0%,100%{transform:none}35%{transform:translate(-3px,-5px) rotate(-6deg)}68%{transform:translate(3px,-3px) rotate(2deg)}}
@keyframes catLeapTilt{0%{transform:rotate(-8deg)}48%{transform:rotate(5deg)}100%{transform:none}}
@keyframes meiCelebrate{35%{transform:translateY(-20px) rotate(-4deg)}68%{transform:translateY(-5px) rotate(2deg)}}
@keyframes lumaCelebrate{40%{transform:translate(15px,-22px) rotate(7deg)}100%{transform:none}}
@keyframes shadowBreathe{50%{opacity:.65}}
@keyframes lanternSwing{to{transform:rotate(4deg)}}
@keyframes flowerSway{to{transform:rotate(-3deg)}}
@keyframes foliageWind{to{transform:translateY(-1px) rotate(.13deg)}}
.panoramic #world[data-flower-glowing=true] .flower-object span{animation:livingFlower 3.8s ease-in-out infinite alternate}
.panoramic #world[data-gate-open=true] .gate-radiance{animation:livingGate 4.5s ease-in-out infinite alternate}
@keyframes livingFlower{to{opacity:.6;transform:scale(1.05)}}
@keyframes livingGate{to{filter:blur(14px);opacity:.7}}
/* The title retains the approved 1.2 composition; the journey begins on entry. */
.at-title.panoramic #farPlane{left:0!important;top:0!important;width:100%!important;height:100%!important;transform:none!important}
.at-title.panoramic #farPlane>#valleyArt{object-fit:cover!important}
.at-title.panoramic #terrainArt,.at-title.panoramic #foregroundPlane,.at-title.panoramic .bank-mist,.at-title.panoramic .distant-mist{opacity:0}
.at-title.panoramic #worldSpace{width:100%!important;height:100%!important;transform:none!important}
.at-title.panoramic #worldSpace .mei-actor{left:69%!important;top:81%!important;height:43%!important;width:auto!important;aspect-ratio:362/537}
.at-title.panoramic #worldSpace .abby-actor{left:81%!important;top:80%!important;height:25%!important;width:auto!important;aspect-ratio:374/380}
.at-title.panoramic #worldSpace .luma-actor{left:84%!important;top:43%!important;height:18%!important;width:auto!important;aspect-ratio:403/511}
@media(max-width:760px){
 .at-title.panoramic #worldSpace .mei-actor{left:71%!important;top:83%!important;height:30%!important}
 .at-title.panoramic #worldSpace .abby-actor{left:84%!important;top:82%!important;height:19%!important}
 .at-title.panoramic #worldSpace .luma-actor{left:83%!important;top:50%!important;height:13%!important}
 .skip-travel{font-size:9px;padding:5px 7px;min-height:30px}
}
.reduce-motion.panoramic *, .reduce-motion.panoramic *:before,.reduce-motion.panoramic *:after{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.panoramic *, .panoramic *:before,.panoramic *:after{animation:none!important;transition:none!important}}

/* Matched scene layers use uniform 3:1 geometry; art is never stretched. */
.panoramic .panorama-near{position:absolute;left:0;z-index:1;pointer-events:none;will-change:transform}
.panoramic .terrain-tile{mask-image:linear-gradient(90deg,transparent 0,#000 100px,#000 calc(100% - 100px),transparent 100%)}
.panoramic .terrain-tile:first-child{mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 100px),transparent 100%)}
.panoramic .terrain-tile:nth-of-type(5){mask-image:linear-gradient(90deg,transparent 0,#000 100px,#000 100%)}
.panoramic .panorama-foreground>.foreground-tile{position:absolute;top:0;width:3600px;height:1200px;max-width:none;mask-image:linear-gradient(90deg,transparent,#000 120px,#000 calc(100% - 120px),transparent)}
.panoramic .bank-mist{width:var(--world-width)}
.mirror-flower-object,.gate-river-sheen{position:absolute;pointer-events:none;z-index:4}
.mirror-flower-object{display:none;filter:brightness(.65)}
.mirror-flower-object img{width:100%;height:100%;object-fit:contain}
#world[data-scene-step="4"] .mirror-flower-object{display:block}
#world[data-flower-glowing=true] .mirror-flower-object{filter:brightness(1.25) drop-shadow(0 0 12px #f9e7bc66)}
.gate-river-sheen{opacity:0;background:repeating-linear-gradient(178deg,transparent 0 18px,#b9f5ef33 19px,transparent 21px 34px);clip-path:polygon(0 7%,100% 0,91% 100%,17% 93%)}
#world[data-scene-step="6"][data-water-flowing=true] .gate-river-sheen{opacity:.6;animation:riverDrift 5s linear infinite}
.at-title.panoramic #nearPlane,.at-title.panoramic .terrain-tile,.at-title.panoramic .mirror-flower-object{opacity:0}
.at-title.panoramic #farArtB{display:none}
.at-title.panoramic #farPlane>#valleyArt{left:0!important;width:100%!important;height:100%!important;transform:none!important;opacity:1!important;object-fit:cover!important}