/* One continuous river, with only a few slowly drifting objects. */
/* Keep motion updates out of the mist and filtered reflection descendants. */
@property --boat-x{syntax:"*";inherits:false}
@property --boat-heave{syntax:"*";inherits:false}
@property --boat-pitch{syntax:"*";inherits:false}
@property --boat-wake-length{syntax:"*";inherits:false}
@property --boat-wake-opacity{syntax:"*";inherits:false}
.scene-world{visibility:visible;opacity:1}
.river-atmosphere{position:absolute;inset:0;z-index:0;isolation:isolate;pointer-events:none}
.river-atmosphere img{display:block;width:100%;height:auto;pointer-events:none}
.drifting-cloud{position:absolute;opacity:0;transition:opacity 1s ease;will-change:transform}
.drifting-cloud.is-loaded{opacity:var(--cloud-opacity,.25)}
.drifting-cloud img{filter:saturate(.25) brightness(.8) blur(3px);mask-image:radial-gradient(ellipse at 50% 45%,#000 12%,#000a 42%,transparent 73%)}
.cloud-left{left:-12%;top:6svh;width:116vw;--cloud-opacity:.30;animation:cloud-drift-left 72s ease-in-out infinite alternate}
.cloud-right{right:-36%;top:17svh;width:84vw;--cloud-opacity:.16;animation:cloud-drift-right 91s ease-in-out infinite alternate}
.cloud-right img{transform:scale(-1,.7);filter:saturate(.22) brightness(.7) blur(6px)}
/* Anchor the hull to a middle-distance waterline instead of the foreground. */
.antique-boat{position:absolute;left:0;bottom:45svh;width:clamp(160px,19.5vw,300px);transform:translate3d(var(--boat-x,14vw),0,0);opacity:0;transition:opacity 1s ease;will-change:transform}
.antique-boat.is-loaded{opacity:1}
.boat-float{position:relative;z-index:1;transform:translateY(var(--boat-heave,0px)) rotate(var(--boat-pitch,0deg));transform-origin:50% 94%;will-change:transform}
.boat-wake{position:absolute;z-index:0;left:-58%;top:94%;width:76%;height:3%;border-top:1px solid #c1cbb47a;border-bottom:1px solid #b6c8c735;border-radius:50%;transform:scaleX(var(--boat-wake-length,1));transform-origin:100% 50%;opacity:var(--boat-wake-opacity,.1);filter:blur(.8px);mask-image:linear-gradient(90deg,transparent,#0008 60%,#000);pointer-events:none;will-change:transform,opacity}
.boat-object{position:relative;z-index:2;filter:saturate(.3) contrast(.78) brightness(.64) blur(.85px);mask-image:linear-gradient(#000b,#000e 65%,#000a 90%,transparent 98%)}
.boat-reflection{position:absolute;left:0;top:94%;width:100%;opacity:.08;transform:scaleY(.36);transform-origin:50% 0;filter:url(#boat-river-reflection) blur(1.8px) saturate(.35);mask-image:linear-gradient(#000,transparent 72%)}
.boat-reflection img{transform:scaleY(-1)}
.boat-waterline{position:absolute;z-index:1;left:-4%;top:94%;width:106%;height:2px;border-radius:50%;background:#050e1670;box-shadow:0 2px 3px #bbcbd81c,18px 2px 7px #d9d9c815;transform:rotate(-1deg)}
.boat-mist{position:absolute;pointer-events:none;mask-image:radial-gradient(ellipse,#000 10%,#0008 42%,transparent 72%);will-change:transform}
.boat-mist-back{z-index:0;left:-80%;top:-40%;width:260%;opacity:.42;filter:saturate(.2) brightness(.85) blur(7px);animation:boat-mist-back 31s ease-in-out infinite alternate}
.boat-mist-back img{width:160%;max-width:none;transform:translateX(-7%)}
.boat-mist-front{z-index:3;left:-95%;top:24%;width:285%;opacity:.56;filter:saturate(.2) brightness(.9) blur(4px);animation:boat-mist-front 23s ease-in-out infinite alternate}
.boat-mist-front img{width:165%;max-width:none;transform:translateX(-45%) scaleY(.65)}
.hero-first-line{white-space:nowrap}
.opening-shade{background:radial-gradient(ellipse at 50% 44%,#01050555,transparent 67%),linear-gradient(0deg,#010505a6,transparent 17%)}
.water-intro{text-shadow:0 2px 30px #000c}
.water-ring{border-color:#b0d9d4;box-shadow:0 0 8px #9ebebe33}
.water-ring:after{border-color:#dbc49e80}
@keyframes cloud-drift-left{from{transform:translate3d(-4vw,0,0) scale(1)}to{transform:translate3d(5vw,-2svh,0) scale(1.035)}}
@keyframes cloud-drift-right{from{transform:translate3d(4vw,0,0) scale(1.02)}to{transform:translate3d(-6vw,1svh,0) scale(1)}}
/* Boat travel and buoyancy are integrated by boat-motion.js, independently of the camera. */
@keyframes boat-mist-back{from{transform:translate3d(-4%,-1%,0) scale(1)}to{transform:translate3d(5%,3%,0) scale(1.08)}}
@keyframes boat-mist-front{from{transform:translate3d(6%,2%,0) scale(1.02)}to{transform:translate3d(-5%,-4%,0) scale(1)}}
.river-asleep .drifting-cloud,.river-asleep .antique-boat,.river-asleep .boat-float,.river-asleep .boat-mist,.river-asleep .water-photo img,.river-asleep .side-curtain img,.river-asleep .curtain-fabric{animation-play-state:paused}
.river-asleep .flower-stems,.river-asleep .flower-hotspots{animation-play-state:paused}
/* The wrappers keep page measurements and project expansion independent of transforms. */
.depth-chapter{position:relative;isolation:isolate;z-index:var(--chapter-order,2)}
#ning-water-garden .depth-chapter>section{transform:translate3d(0,var(--chapter-y,0px),0) scale(var(--chapter-scale,1));transform-origin:50% 0;box-shadow:0 -26px 80px #0009;border-top:1px solid #b8a17c2b}
.depth-chapter>section:after{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;background:#010606;opacity:var(--chapter-shade,0)}
/* Create the outer scaling surface only when Work actually enters. */
#ning-water-garden .moon-stage{transform:var(--opening-exit-transform,none);transform-origin:50% 80%}
body.motion-off .depth-chapter>section,body.motion-off #ning-water-garden .moon-stage{transform:none!important}
body.motion-off .depth-chapter>section:after{opacity:0}
body.motion-off .drifting-cloud,body.motion-off .antique-boat,body.motion-off .boat-float,body.motion-off .boat-mist{animation:none}
body.motion-off .scene-world{opacity:1}
@media(max-width:760px){
  .cloud-left{left:-55%;top:14svh;width:200vw;--cloud-opacity:.25}
  .cloud-right{right:-66%;top:23svh;width:160vw;--cloud-opacity:.12}
  .antique-boat{bottom:56svh;width:23vw;min-width:0}
  .boat-mist-front{opacity:.4}
  #ning-water-garden .depth-chapter>section{box-shadow:0 -18px 45px #0008}
}
@media(prefers-reduced-motion:reduce){
  #ning-water-garden .depth-chapter>section,#ning-water-garden .moon-stage{transform:none!important}
  .depth-chapter>section:after{opacity:0}
  .drifting-cloud,.antique-boat,.boat-float,.boat-mist{animation:none}
}