/* The old viewport illustration is replaced by section-sized environments. */
html[data-design="2026"] body.pathHome .appWorld,
html[data-design="2026"] body.pathHome .travelLandscape{display:none!important}
.hasSectionScenery{position:relative;isolation:isolate;z-index:0}
.sectionScenery{position:absolute;inset:0 -18px;overflow:hidden;z-index:-2;pointer-events:none;background:linear-gradient(180deg,transparent,var(--region-tint) 45%,transparent);--region-tint:#16474b44}
.sectionScenery[data-region="historic"]{--scene-water:#41776d;--scene-wall:#91b89c;--scene-far:#376456;--scene-roof:#758469;--scene-gold:#c3a974;--region-tint:#324b3d55}
.sectionScenery[data-region="north"]{--scene-water:#4a8e9f;--scene-wall:#90baac;--scene-far:#315c53;--scene-roof:#486f69;--region-tint:#253e4f66}
.sectionScenery[data-region="phuket"]{--scene-water:#399ca8;--scene-wall:#ceaa9d;--scene-far:#4c827d;--scene-roof:#648c88;--scene-gold:#d6b57e;--region-tint:#38595355}
.sectionScenery[data-region="coast"]{--scene-water:#297f98;--scene-wall:#8ec9c8;--scene-roof:#49796c;--scene-gold:#dbbc82;--region-tint:#17556a55}
.routeTerrain{position:absolute;inset:0;width:100%;height:100%;opacity:.35}
.sectionScenery .mapDetail{position:absolute;display:block;opacity:.24}
.sectionScenery .mapDetail svg{display:block;width:100%;height:auto}
.sectionScenery .mapPalmOne{left:-32px;top:9%;width:90px;transform:rotate(-8deg)}
.sectionScenery .mapPalmTwo{right:-38px;bottom:9%;width:110px;transform:scaleX(-1)}
.sectionScenery .mapLotus{left:-32px;top:66%;width:80px}
.sectionScenery .mapBoat{right:-25px;top:57%;width:100px}
.sectionScenery .mapLanterns{right:-8px;top:4%;width:90px}
.sectionScenery .mapCloud{left:-8px;top:46%;width:70px;opacity:.1}
.sectionScenery[data-region="historic"] :is(.mapBoat,.mapLanterns,.mapPalmTwo),
.sectionScenery[data-region="north"] :is(.mapBoat,.mapLotus,.mapPalmOne,.mapPalmTwo),
.sectionScenery[data-region="phuket"] .mapLotus,
.sectionScenery[data-region="coast"] :is(.mapLanterns,.mapLotus){display:none}
.sectionScenery[data-region="north"] .mapLanterns{left:-18px;right:auto;top:66%;width:100px}
.sceneryLandmark,.sceneryLandmarkSecondary{position:absolute;width:145px;right:-30px;top:25%;opacity:.42}
.sceneryLandmarkSecondary{right:auto;left:-36px;top:72%;width:138px;opacity:.22}
.sceneryLandmark>svg,.sceneryLandmarkSecondary>svg{display:block;width:100%;height:auto}
.sceneryPlace{position:absolute;top:calc(25% + 110px);right:0;width:120px;text-align:center;color:var(--sub);font-size:9px;line-height:1.5;opacity:.6}
.sceneryPlace small{display:block;font-size:8px}
html[data-theme="light"] .sectionScenery{--region-tint:#b4d4c333}
html[data-theme="light"] .routeTerrain{opacity:.2}
@media(prefers-reduced-motion:reduce){.sectionScenery *{animation:none!important}}
.sceneryPlaceSecondary{position:absolute;top:calc(72% + 110px);left:0;width:116px;text-align:center;color:var(--sub);font-size:9px;line-height:1.5;opacity:.65}
.sceneryPlaceSecondary small{display:block;font-size:8px}
.sectionScenery *{animation-play-state:paused!important}
.sectionScenery.isSceneVisible *{animation-play-state:running!important}
html[data-route-motion="paused"] .sectionScenery *{animation-play-state:paused!important}
@media(prefers-reduced-motion:no-preference){
 .sectionScenery .mapPalmOne svg,.sectionScenery .mapPalmTwo svg{transform-origin:50% 95%;animation:routePalmSway 8s ease-in-out infinite alternate}
 .sectionScenery[data-region="bangkok"] .routeTerrain>path:nth-child(2){animation:routeWaterCurrent 15s linear infinite}
 .sectionScenery[data-region="coast"] .routeTerrain>path:last-child{animation:routeSeaShimmer 5s ease-in-out infinite alternate}
}
@keyframes routePalmSway{from{transform:rotate(-2deg)}to{transform:rotate(3deg)}}
@keyframes routeWaterCurrent{to{stroke-dashoffset:-204}}
@keyframes routeSeaShimmer{from{opacity:.25;transform:translateX(-2px)}to{opacity:.65;transform:translateX(3px)}}
/* Landmarks remain complete and readable; characters live beside the path. */
.sceneryLandmark{right:8px;width:126px;opacity:.66}
.sceneryLandmarkSecondary{left:8px;width:124px;opacity:.48}
.sceneryPlace{right:4px;top:calc(25% + 100px);width:132px;opacity:.85}
.sceneryPlaceSecondary{left:4px;top:calc(72% + 100px);width:132px;opacity:.85}
.sceneryStreet{position:absolute;left:6px;top:54%;width:126px;opacity:.63}
.sceneryStreet>svg{display:block;width:100%;height:auto}
.sceneryStreet>small{display:block;text-align:left;font-size:9px;line-height:1.35;color:var(--sub);margin-top:3px;padding-left:4px;max-width:100%;box-sizing:border-box;overflow-wrap:anywhere;text-wrap:balance;-webkit-text-size-adjust:100%}
.sceneryResident{position:absolute;right:-5px;bottom:18px;width:40px;transform-origin:50% 100%}
.sceneryResident .storyPerson{display:block;width:100%;height:auto;max-width:none}
.sceneryCompanion{position:absolute;right:8px;top:46%;width:62px;opacity:.86;transform-origin:50% 100%}
.sceneryCompanion>svg{display:block;width:100%;height:auto}
@media(prefers-reduced-motion:no-preference){
 .sceneryResident{animation:routeResidentBreathe 5s ease-in-out infinite}
 .sceneryCompanion{animation:routeCompanionBob 5.5s ease-in-out infinite}
 .sceneryStreet .streetLanterns{transform-origin:120px 10px;animation:routePalmSway 7s ease-in-out infinite alternate}
}
@keyframes routeResidentBreathe{50%{transform:translateY(-1px) rotate(1deg)}}
@keyframes routeCompanionBob{50%{transform:translateY(-3px) rotate(-2deg)}}
/* A continuous environment fills the width; the opening scene begins behind the dock. */
html[data-design="2026"] .cleanJourney{overflow:visible}
.sectionScenery{left:calc(-1 * max(18px,(100vw - 580px)/2));right:calc(-1 * max(18px,(100vw - 580px)/2));background:linear-gradient(180deg,var(--region-tint),transparent 25%,var(--region-tint) 65%,transparent)}
.hasSectionScenery[data-route-section="0"]>.sectionScenery{top:calc(-1 * (var(--path-dock-height,180px) + 120px));bottom:-100px}
.sectionScenery .routeTerrain{opacity:.38}
@media(min-width:761px){.sectionScenery{left:-18px;right:-18px}}