/* Scroll-driven scene: independent far landscape, fortress, and near bank. */
.hero.hero-depth{height:215svh;min-height:0;max-height:none;overflow:clip;background:#233b31}
.hero-sticky{position:sticky;top:0;height:100svh;min-height:620px;overflow:hidden;isolation:isolate}
.hero-scene{position:absolute;inset:0;overflow:hidden;pointer-events:none;perspective:1100px}
.hero-original,.depth-layer{position:absolute;inset:-10%;width:120%;height:120%;max-width:none;object-fit:cover;object-position:center;will-change:transform}
.hero-original{background:url('assets/panorama-user-autumn.png') center/cover;opacity:1;transition:opacity .7s}
.depth-layer{opacity:0;transition:opacity .8s}
.layers-ready .depth-layer{opacity:1}.layers-ready .hero-original{opacity:0}
.depth-back{z-index:1}.depth-fortress{z-index:2}.depth-front{z-index:3}
.depth-mist{position:absolute;z-index:4;inset:-20%;background:linear-gradient(0deg,#d1c29b00 25%,#e6ddc117 42%,transparent 65%);mix-blend-mode:screen;pointer-events:none;will-change:transform}
.hero-depth .hero-shade{z-index:5;background:linear-gradient(90deg,#0b2826d9 0%,#0a252388 36%,#11282415 65%),linear-gradient(0deg,#0e2424bd 0%,transparent 35%,#152b2420 65%);pointer-events:none}
.hero-depth .hero-content{z-index:6;padding-top:clamp(160px,24vh,275px);transform-origin:left center;will-change:transform,opacity}
.hero-depth h1{font-size:clamp(65px,7.3vw,118px);line-height:1.01;max-width:650px}
.hero-depth .hero-lead{max-width:370px;text-shadow:0 1px 8px #10262255}
.hero-depth .hero-year{z-index:6;right:55px;bottom:135px;font-size:clamp(110px,14.5vw,220px);color:#e8dfc1b8;will-change:transform,opacity}
.hero-depth .hero-bottom{z-index:8;font-size:9px}.hero-depth .hero-bottom a{font-size:10px}
.depth-ui{position:absolute;right:55px;top:118px;z-index:8;text-align:right;color:#eee5cc;display:grid;justify-items:end;gap:12px}
.depth-count{font-size:8px;letter-spacing:2px;text-shadow:0 1px 8px #1b3021}
.depth-steps{display:flex;gap:5px}.depth-steps i{width:42px;height:2px;display:block;background:#ede6ca4d;transition:background .2s}.depth-steps i.active{background:#e3bc86}
#depth-toggle{border:1px solid #e2d8b45c;padding:7px 10px;font-size:9px;backdrop-filter:blur(7px);background:#17322630;min-height:34px}
#depth-toggle:hover{background:#1732269c}
.depth-story{position:absolute;left:56px;bottom:128px;max-width:425px;color:#f0ead7;z-index:7;opacity:0;pointer-events:none;will-change:transform,opacity}
.depth-story .eyebrow{font-size:9px;margin-bottom:20px;color:#dec193}.depth-story h2{font-size:clamp(39px,4.5vw,67px);letter-spacing:-2px}.depth-story h2 em{color:#e2ca9d}.depth-story>p{font-size:13px;line-height:1.8;max-width:370px;margin-top:22px;text-shadow:0 1px 8px #102622}.depth-story .text-link{font-size:11px;margin-top:18px}.depth-story.shown{pointer-events:auto}
.hero-depth.motion-off .depth-layer,.hero-depth.motion-off .hero-original,.hero-depth.motion-off .depth-mist{will-change:auto}
.water-section{background:#dfe5d7;padding:85px 0 65px}.water-section .section-top{align-items:flex-end}.water-section h2{font-size:clamp(38px,4.5vw,66px)}.water-section .section-top>p{max-width:420px}
.water-layout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(270px,1fr);gap:45px;align-items:start}
.water-diagram{position:relative;background:#263f32;border:1px solid #9eaf93;overflow:hidden}
.water-diagram svg{display:block;width:100%;height:auto}
.water-diagram-top{position:absolute;z-index:2;left:20px;right:20px;top:15px;display:flex;justify-content:space-between;font-size:7px;letter-spacing:1.1px;color:#e6e3c8;text-shadow:0 1px 8px #19332b}
.flow-line{fill:none;stroke:#b8dbce88;stroke-width:1;stroke-dasharray:10 25;animation:river-flow 18s linear infinite}
.moat-dash{fill:none;stroke:#d2e3ceaa;stroke-width:1;stroke-dasharray:4 8}
.natural-water,.moat-water{transition:opacity .45s}
.water-diagram[data-highlight=rivers] .moat-water{opacity:.14}.water-diagram[data-highlight=moats] .natural-water{opacity:.15}
.water-key{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:13px 18px;border-top:1px solid #82957555;color:#bdcdb2;font-size:8px}.water-key span{display:flex;gap:7px;align-items:center}.water-key i{width:17px;height:6px;background:#558c94;display:inline-block}.water-key span:nth-child(2) i{height:2px;background:#b4ceba}.water-key span:last-child{color:#9caf92}
.water-explainer{padding-top:8px}.water-explainer>.eyebrow{font-size:8px;letter-spacing:1.4px;margin-bottom:18px}
.water-option{display:flex;align-items:flex-start;gap:18px;padding:21px 0;border-top:1px solid #bac7af;width:100%;text-align:left;opacity:.62;transition:opacity .3s}.water-option.active,.water-option:hover{opacity:1}.water-option>span{font:20px/1.4 var(--serif);color:#969e78}.water-option.active>span{color:#a76842}.water-option h3{font-size:27px}.water-option p{font-size:11px;line-height:1.8;color:#68765f;margin-top:10px}.water-explainer .text-link{font-size:10px;margin-top:10px}.water-caption{max-width:1150px;font-size:11px;line-height:1.9}.water-caption a{text-decoration:underline}
.legend .moat{background:#81a49b;height:3px}
.visual-workshop{padding:85px 0 0}.visual-workshop .section-top>p{max-width:370px}.user-visuals{display:grid;grid-template-columns:1fr 1fr;gap:28px}.user-visuals button{padding:0;text-align:left;background:#e6e2d4;border:1px solid #d4d8c7}.user-visuals img{width:100%;aspect-ratio:16/9;object-fit:cover}.user-visuals button:nth-child(n+3) img{object-fit:contain;background:#e7e2d3;aspect-ratio:3/2}.user-visuals button>span{display:flex;justify-content:space-between;gap:20px;padding:17px 20px;font:23px/1.2 var(--serif)}.user-visuals b{font:18px var(--sans);font-weight:400}.user-visuals button:hover{background:#d8ddc9}.visual-workshop>.caption{font-size:10px;max-width:1050px}
@keyframes river-flow{to{stroke-dashoffset:-350}}
@media(max-width:1100px){.depth-story{left:35px;max-width:350px}.depth-story h2{font-size:48px}.hero-depth .hero-year{right:35px;font-size:150px;bottom:135px}.depth-ui{right:35px}.water-layout{gap:25px;grid-template-columns:minmax(0,1.65fr) minmax(240px,1fr)}.water-option{padding:17px 0}.water-option h3{font-size:25px}.water-option p{font-size:10px}.water-key{font-size:7px;gap:12px}.water-diagram-top{font-size:6px}}
@media(max-width:800px){.water-layout{grid-template-columns:1fr}.water-explainer{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 24px}.water-explainer>.eyebrow{grid-column:1/-1}.water-option{display:block}.water-option>span{display:block;margin-bottom:10px}.water-option p{font-size:11px}.water-explainer>.text-link{grid-column:1/-1;justify-self:start}.hero-depth .hero-content{padding-top:190px}.hero-depth h1{font-size:80px}.hero-depth .hero-year{font-size:135px;bottom:140px}.depth-ui{top:110px}.depth-story{bottom:135px}}
@media(max-width:650px){.hero.hero-depth{height:205svh}.hero-sticky{min-height:650px}.hero-original,.depth-layer{inset:-6% -45%;width:190%;height:112%;object-position:56% center}.hero-original{background-position:56% center}.hero-depth .hero-shade{background:linear-gradient(90deg,#092a25c9,transparent 95%),linear-gradient(0deg,#102820cc,transparent 55%,#0d26262b)}.hero-depth .hero-content{padding-top:175px}.hero-depth .eyebrow{max-width:270px;font-size:7px;letter-spacing:1.3px;margin-bottom:24px}.hero-depth h1{font-size:clamp(54px,14vw,76px);line-height:1.05;letter-spacing:-2.5px}.hero-depth .hero-lead{font-size:12px;max-width:285px;margin-top:22px}.hero-depth .hero-actions{margin-top:25px;gap:18px}.hero-depth .hero-year{right:18px;bottom:116px;font-size:105px}.hero-depth .hero-year span{font-size:6px;letter-spacing:1.4px}.depth-ui{top:93px;right:18px;left:18px;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left}.depth-count{font-size:6px;letter-spacing:1.2px;max-width:75px;line-height:1.7}.depth-steps{gap:4px}.depth-steps i{width:21px}#depth-toggle{font-size:8px;padding:7px 9px;min-height:38px}.depth-story{left:18px;right:18px;bottom:150px;max-width:310px}.depth-story .eyebrow{margin-bottom:16px;font-size:8px}.depth-story h2{font-size:43px;letter-spacing:-1.7px}.depth-story>p{font-size:12px;max-width:285px;margin-top:18px;line-height:1.85}.depth-story .text-link{font-size:10px;margin-top:17px}.hero-depth .hero-bottom{font-size:7px;gap:10px;bottom:20px}.hero-depth .hero-bottom a{font-size:8px;letter-spacing:.2px}.hero-depth .hero-bottom b{padding-left:7px}.water-section{padding:55px 0 40px}.water-section h2{font-size:40px}.water-section .section-top>p{font-size:12px;line-height:1.85}.water-diagram{margin-inline:-4px}.water-diagram-top{top:10px;left:12px;right:12px;font-size:5px;letter-spacing:.6px}.water-key{padding:12px;font-size:7px;gap:8px 13px}.water-key span:last-child{flex-basis:100%}.water-layout{gap:26px}.water-explainer{display:block;padding:0}.water-option{display:flex;padding:20px 0;gap:18px}.water-option>span{margin-bottom:0}.water-option h3{font-size:27px}.water-option p{font-size:12px}.water-caption{font-size:10px}.visual-workshop{padding-top:55px}.user-visuals{grid-template-columns:1fr;gap:24px}.user-visuals button>span{font-size:24px;padding:17px}.visual-workshop>.caption{font-size:10px}}
@media(prefers-reduced-motion:reduce){.flow-line{animation:none}.hero-original,.depth-layer,.depth-mist,.hero-depth .hero-content,.depth-story{will-change:auto}}

/* First parallax slide: project name sized for desktop and mobile. */
.hero-depth #hero-title{font-size:clamp(48px,5.3vw,84px);line-height:1.06;max-width:820px;letter-spacing:-2.4px}
@media(max-width:800px){.hero-depth #hero-title{font-size:56px;max-width:650px}}
@media(max-width:650px){.hero-depth #hero-title{font-size:clamp(37px,10.5vw,49px);line-height:1.08;max-width:100%;letter-spacing:-1.6px}}

/* Current Roblox screenshots */
.roblox-photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:32px 0}.roblox-photo-grid button{background:#202a27;color:#eee5d4;border:1px solid #ffffff20;padding:0;text-align:left;cursor:pointer}.roblox-photo-grid img{width:100%;aspect-ratio:1.923;object-fit:contain;display:block}.roblox-photo-grid span{display:block;padding:16px;font-size:13px}.roblox-photo-grid b{float:right}.game-visual>img{object-fit:contain!important;background:#142322}@media(max-width:800px){.roblox-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:480px){.roblox-photo-grid{grid-template-columns:1fr}}