/* Clean entity-based scene. No extraction filters or painted background plates. */
.hero{background:#f4efdf;perspective:1200px}
.hero:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 78% 58%,#ffe9ae55,transparent 45%);pointer-events:none;z-index:0;animation:none}
.hero-stage{position:absolute;inset:-35px;z-index:0;pointer-events:none;isolation:isolate;overflow:hidden;opacity:0;transition:opacity 1.2s ease}
.entities-ready .hero-stage,.entities-partial .hero-stage{opacity:1}
.hero-entity{position:absolute;left:var(--entity-x);bottom:var(--entity-bottom);width:var(--entity-width);transform:translate3d(calc(var(--pointer-x,0px)*var(--entity-depth)),calc(var(--pointer-y,0px)*var(--entity-depth) + var(--hero-y,0px)*.15),0);transition:transform .9s cubic-bezier(.16,1,.3,1);transform-origin:50% 100%;pointer-events:none}
.hero-entity>img{display:block;width:100%;height:auto;transform:rotate(var(--entity-rotation));pointer-events:none;user-select:none}
.entity-distant{z-index:1;opacity:.42}.entity-hill{z-index:2;opacity:.62}.entity-water{z-index:3;opacity:1}.entity-bank{z-index:4;opacity:1}.entity-ground{z-index:2}.entity-trunk,.entity-trunk-right{z-index:7}.entity-cross{z-index:6}.entity-rock{z-index:8}.entity-grass,.entity-flower{z-index:9}.entity-foliage{z-index:10}.entity-cloud{z-index:0;opacity:.40}
.entity-trunk-right>img{transform:scaleX(-1) rotate(var(--entity-rotation))}
.entity-cloud>img{animation:entity-cloud-drift 48s ease-in-out infinite alternate;animation-delay:var(--entity-delay);animation-play-state:paused}
.entity-foliage>img,.entity-grass>img,.entity-flower>img{transform-origin:50% 95%;animation:entity-breeze 9s ease-in-out infinite alternate;animation-delay:var(--entity-delay);animation-play-state:paused}
.entity-water>img{animation:none;transform:none}
.entity-radiance{position:absolute;left:50%;top:37%;width:380%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:-1;pointer-events:none}
.entity-radiance:before{content:'';position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from 0deg,#c69c422b 0deg .6deg,transparent .8deg 7deg,#fff1bc66 7.5deg 8.5deg,transparent 9deg 14deg);mask-image:radial-gradient(circle,transparent 1%,#000 10%,#0009 28%,transparent 65%);animation:entity-sun-turn 70s linear infinite;animation-play-state:paused}
.entity-radiance:after{content:'';position:absolute;inset:20%;background:radial-gradient(circle,#ffedb170,transparent 70%);animation:entity-sun-breathe 8s ease-in-out infinite alternate;animation-play-state:paused}
.hero-leaf-entity{position:absolute;width:13px;z-index:11;opacity:0;animation:entity-leaf-flight var(--leaf-duration) linear infinite;animation-delay:var(--leaf-delay);animation-play-state:paused;pointer-events:none}
.hero-leaf-entity>img{display:block;width:100%;height:auto;animation:entity-leaf-tumble 6s ease-in-out infinite alternate;animation-delay:var(--leaf-delay);animation-play-state:paused}
.hero-feather-entity{width:19px;z-index:4}
.hero.in-view .hero-entity>img,.hero.in-view .entity-radiance:before,.hero.in-view .entity-radiance:after,.hero.in-view .hero-leaf-entity,.hero.in-view .hero-leaf-entity>img{animation-play-state:running}
.hero>.atmosphere>.sun-rays,.hero>.atmosphere>.ambient-cloud,.hero>.atmosphere>.ambient-leaf{display:none}
.motion-paused .hero-stage *,.tab-inactive .hero-stage *,.motion-paused .hero-stage *:before,.motion-paused .hero-stage *:after,.tab-inactive .hero-stage *:before,.tab-inactive .hero-stage *:after{animation-play-state:paused!important}
.motion-paused .hero-entity{transform:none!important}
@keyframes entity-cloud-drift{from{translate:-22px 2px}to{translate:55px -10px}}
@keyframes entity-breeze{from{transform:rotate(calc(var(--entity-rotation) - .6deg))}to{transform:rotate(calc(var(--entity-rotation) + .8deg))}}

@keyframes entity-sun-turn{to{rotate:360deg}}
@keyframes entity-sun-breathe{from{opacity:.45}to{opacity:.85}}
@keyframes entity-leaf-flight{0%{opacity:0;translate:0 0}8%{opacity:.55}25%{translate:calc(var(--leaf-travel)*.5) calc(var(--leaf-drop)*.2)}50%{translate:calc(var(--leaf-travel)*.15) calc(var(--leaf-drop)*.5)}75%{translate:calc(var(--leaf-travel)*.8) calc(var(--leaf-drop)*.75);opacity:.4}100%{translate:var(--leaf-travel) var(--leaf-drop);opacity:0}}
@keyframes entity-leaf-tumble{from{transform:rotate(-35deg) rotateY(-30deg)}to{transform:rotate(115deg) rotateY(55deg)}}
@media(max-width:760px){.hero-stage{left:-115px;right:-100px;top:70px;bottom:-15px}.hero-entity{transform:none}.entity-foliage{opacity:.94}.hero-leaf-entity:nth-last-child(n+6){display:none}.hero-feather-entity{width:14px}.entity-cross{--entity-x:73%!important;--entity-bottom:16%!important;--entity-width:16%!important}.entity-ground{--entity-bottom:-17%!important}.entity-distant{--entity-bottom:27%!important}.entity-hill{--entity-bottom:24%!important}.entity-cloud{opacity:.25}}
@media(prefers-reduced-motion:reduce){.hero-stage *,.hero-stage *:before,.hero-stage *:after{animation:none!important}.hero-entity{transform:none!important}.hero-leaf-entity{display:none}}

/* Keep the open valley visible between individually placed banks. */
.entity-ground{height:43%}.entity-bank{height:35%}.entity-water{height:49%}.entity-ground>img,.entity-bank>img,.entity-water>img{height:100%;object-fit:fill}
.hero-leaf-entity{transform:translate3d(calc(var(--pointer-x,0px)*1.12),calc(var(--pointer-y,0px)*1.12),0);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.hero-feather-entity{transform:translate3d(calc(var(--pointer-x,0px)*.62),calc(var(--pointer-y,0px)*.62),0)}
.entity-water:after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(175deg,transparent 0 12px,#e6f0e85c 15px,transparent 18px 36px);background-size:100% 180%;mask:url('hero-assets/river.webp') center/100% 100% no-repeat;opacity:.16;animation:water-glints 14s linear infinite;animation-play-state:paused}
.hero.in-view .entity-water:after{animation-play-state:running}
@keyframes water-glints{to{background-position:0 100%}}
@media(prefers-reduced-motion:reduce),(max-width:760px){.hero-leaf-entity{transform:none}}
.motion-paused .hero-leaf-entity{transform:none}

/* The water, soil and banks share a depth so the shoreline stays connected.
   The river continues beyond the viewport; only surface reflections move. */
.entity-water{mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 100%)}
@media(max-width:760px){.entity-water{height:45%;--entity-bottom:-13%!important}.entity-ground{height:43%}.entity-bank{height:32%}}

/* Natural color treatment retains the original clean alpha edges and engraving. */
.entity-water>img{filter:hue-rotate(135deg) saturate(.65) brightness(1.12)}
.entity-foliage>img,.hero-leaf-entity:not(.hero-feather-entity)>img{filter:hue-rotate(55deg) saturate(.82) brightness(.97)}

/* Continuous riverbed: water and its touching shoreline share one registered layer. */
.entity-riverbed{z-index:3;height:46%;mask-image:linear-gradient(to bottom,transparent 0%,#000 5%,#000 100%)}
.entity-riverbed>img{height:100%;object-fit:fill}
@media(max-width:760px){.entity-riverbed{height:39%;--entity-bottom:-7%!important}}