/* The backdrop follows the native vertical scroll; its layers need no JS. */
#descent-scroll{--descent-night-color:#000000;position:fixed;inset:0;z-index:8;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;overflow-anchor:none;touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:none;background:var(--descent-night-color,#000000);color-scheme:dark}
#descent-scroll::-webkit-scrollbar{display:none}
#descent-scroll:focus{outline:none}
body.is-descending #journey{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 92%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 92%,transparent 100%)}
.descent-surface{height:100vh;background:#336e80;pointer-events:none}
.descent-depth{position:relative;isolation:isolate;width:100%;height:360vh;overflow:hidden;background:linear-gradient(180deg,#336e80 0%,#194c59 29%,#203c42 45%,#10232d 68%,var(--descent-night-color,#000000) 100%)}
.descent-ocean,.descent-earth,.descent-night{position:absolute;left:0;width:100%;pointer-events:none}
.descent-ocean{top:0;height:155vh;overflow:hidden;background:linear-gradient(180deg,#336e80 0%,#2d6d7d 17%,#285f70 41%,#1e4b5e 67%,#153a4b 89%,#14333f 100%)}
.descent-ocean{-webkit-mask-image:linear-gradient(transparent 0,#000 12vh);mask-image:linear-gradient(transparent 0,#000 12vh)}
.descent-ocean::before{content:'';position:absolute;inset:-5% -10% 0;background:linear-gradient(107deg,transparent 20%,#e5edd51a 24%,#e5edd508 28%,transparent 32%),linear-gradient(96deg,transparent 39%,#dcebd41c 42%,#dcebd408 45%,transparent 49%),linear-gradient(78deg,transparent 62%,#dcebd414 65%,#dcebd405 69%,transparent 74%);-webkit-mask-image:linear-gradient(#0009,#000 15%,#0007 50%,transparent 84%);mask-image:linear-gradient(#0009,#000 15%,#0007 50%,transparent 84%)}
.descent-ocean::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 14% 12%,transparent 0 3px,#d3e8d740 3.5px 4.5px,transparent 5px),radial-gradient(circle at 18% 19%,transparent 0 1.5px,#c5e3d33d 2px 3px,transparent 3.5px),radial-gradient(circle at 76% 21%,transparent 0 4px,#d3e8d738 4.5px 5.5px,transparent 6px),radial-gradient(circle at 72% 25%,transparent 0 1px,#c5e3d33d 1.5px 2.5px,transparent 3px),radial-gradient(circle at 33% 38%,transparent 0 2.5px,#d3e8d730 3px 4px,transparent 4.5px),radial-gradient(circle at 35% 43%,transparent 0 1px,#c5e3d330 1.5px 2.5px,transparent 3px),radial-gradient(circle at 82% 51%,transparent 0 3px,#c5e3d32e 3.5px 4.5px,transparent 5px),radial-gradient(circle at 66% 63%,transparent 0 1px,#c5e3d325 1.5px 2.5px,transparent 3px),radial-gradient(circle at 25% 67%,transparent 0 2px,#c5e3d325 2.5px 3.5px,transparent 4px)}
.descent-earth{top:94vh;height:222vh;background-image:url('assets/descent-earth.svg');background-repeat:no-repeat;background-position:center top;background-size:max(100%,1000px) 100%;-webkit-mask-image:linear-gradient(#000 0 78%,transparent 100%);mask-image:linear-gradient(#000 0 78%,transparent 100%)}
.descent-night{top:274vh;bottom:0;background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--descent-night-color,#000000) 40%,transparent) 21%,var(--descent-night-color,#000000) 70%,var(--descent-night-color,#000000) 100%)}
.descent-legacy{position:relative;z-index:1;height:200vh;margin-top:-100vh;background:transparent}
.descent-legacy-viewport{position:sticky;top:0;width:100%;height:100vh;overflow:hidden;background:transparent}
#legacy-2024-frame{display:block;width:100%;height:100%;border:0;background:var(--descent-night-color,#000000)}
@media(max-width:700px){.descent-earth{background-size:1000px 100%}.descent-ocean::before{inset:-5% -35% 0}}