/* 33.59 — each section is one biome; neighbours overlap and fade into each other. */
[data-route-section].hasSectionScenery{position:relative;isolation:isolate}
.hasSectionScenery>.sectionScenery{top:-110px;bottom:-110px;z-index:-2;
 -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 110px,#000 calc(100% - 110px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 110px,#000 calc(100% - 110px),transparent 100%);
 background:linear-gradient(180deg,var(--biome-base) 0%,var(--biome-mid) 50%,var(--biome-base) 100%)}
.hasSectionScenery[data-route-section="0"]>.sectionScenery{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 110px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 110px),transparent)}
.sectionScenery{--biome-base:#123f45;--biome-mid:#18505a}
.sectionScenery[data-region="historic"]{--biome-base:#1d3f37;--biome-mid:#2a5446}
.sectionScenery[data-region="north"]{--biome-base:#173a45;--biome-mid:#1f4a4f}
.sectionScenery[data-region="phuket"]{--biome-base:#1b4448;--biome-mid:#2a5a57}
.sectionScenery[data-region="coast"]{--biome-base:#0f4255;--biome-mid:#145a6c}
html[data-theme="light"] .sectionScenery{--biome-base:#e7f1ea;--biome-mid:#d7eadf}
html[data-design="2026"] body.pathHome .cleanJourney{background:none}
/* Movement back: fuller palms, swaying more, rivers flowing downstream. */
.sectionScenery .mapDetail{opacity:.42}
.sectionScenery .mapCloud{opacity:.16}
.sectionScenery .routeTerrain{opacity:.5}
.routeFlow{stroke-dasharray:4 34;opacity:.45}
@media(prefers-reduced-motion:no-preference){
 .sectionScenery .mapPalmOne svg,.sectionScenery .mapPalmTwo svg{animation:routePalmSwayWide 5.5s ease-in-out infinite alternate}
 .sectionScenery .mapLotus svg{transform-origin:50% 90%;animation:routePalmSwayWide 7s ease-in-out infinite alternate-reverse}
 .sectionScenery .mapBoat svg{animation:routeBoatDrift 9s ease-in-out infinite alternate}
 .sectionScenery .mapCloud svg{animation:routeCloudDrift 18s linear infinite alternate}
 .routeFlow{animation:routeFlowDown 7s linear infinite}
}
@keyframes routePalmSwayWide{from{transform:rotate(-5deg)}to{transform:rotate(6deg)}}
@keyframes routeBoatDrift{from{transform:translate(-6px,0) rotate(-1deg)}to{transform:translate(8px,3px) rotate(1.5deg)}}
@keyframes routeCloudDrift{from{transform:translateX(-10px)}to{transform:translateX(26px)}}
@keyframes routeFlowDown{to{stroke-dashoffset:-228}}
/* Top chips and bottom bar: solid deep teal with a mint edge, readable over any biome. */
html[data-design="2026"]:not([data-theme="light"]) .livingTopBar>:is(span,button),html[data-design="2026"]:not([data-theme="light"]) .languagePicker .languageSwitch{background:#0f3439!important;border:1px solid #2f6b66!important;box-shadow:0 4px 14px #04191c55!important}
html[data-design="2026"]:not([data-theme="light"]) #sidebar{background:#0f3439f2!important;border-color:#2f6b66!important;box-shadow:0 -6px 22px #04191c66!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html[data-design="2026"]:not([data-theme="light"]) #sidebar nav [data-page]{color:#a9c6c4}
html[data-design="2026"]:not([data-theme="light"]) #sidebar nav [data-page].active,html[data-design="2026"]:not([data-theme="light"]) #sidebar nav [data-page][aria-current=page]{background:#1d5a52!important;border-color:#52dfba!important;color:#7fe8c9!important}
/* 33.68 — no opaque panel per section: one blended backdrop, transparent scenes that fade at their edges. */
html[data-design="2026"] body.pathHome .cleanJourney{position:relative;isolation:isolate}
.routeBiomeBackdrop{position:absolute;z-index:-5;pointer-events:none;top:calc(-1 * (var(--path-dock-height,180px) + 160px));bottom:-40px;left:calc(-1 * max(18px,(100vw - 580px)/2));right:calc(-1 * max(18px,(100vw - 580px)/2));background:#164a50}
@media(min-width:761px){.routeBiomeBackdrop{left:-18px;right:-18px}}
.hasSectionScenery>.sectionScenery,.sectionScenery{background:none!important}
html[data-theme="light"] .routeBiomeBackdrop{display:none}
.sectionScenery{overflow:clip!important}
/* 33.70 — the shared river lives in the backdrop; regional terrains keep only land shapes, softly. */
.routeRiver{position:absolute;inset:0;display:block}
.sectionScenery .routeTerrain [stroke="var(--scene-water)"]{display:none}
.sectionScenery .routeTerrain{opacity:.32}
.routeFlowLayer{position:absolute;left:0;top:0;pointer-events:none}
.hasSectionScenery>.sectionScenery{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 160px,#000 calc(100% - 160px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 160px,#000 calc(100% - 160px),transparent 100%);top:-160px;bottom:-160px}
.hasSectionScenery[data-route-section="0"]>.sectionScenery{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 160px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 160px),transparent);top:calc(-1 * (var(--path-dock-height,180px) + 120px))}
.sectionScenery .routeTerrain{display:none!important}
/* 33.75 — the docked section card fades between section colours instead of switching. */
html[data-design="2026"] .pathSectionBanner{transition:background-color .8s ease,border-color .8s ease,color .8s ease}
@media(prefers-reduced-motion:reduce){html[data-design="2026"] .pathSectionBanner{transition:none}}