/* Shared ground plane: the photographed horizon sits at 68.5% of the scene. */
:root{--bg:#000}
body,.sound,.story{background-color:#000}
.stage{position:relative}
.emblem{top:auto;bottom:31%;height:49%;filter:drop-shadow(12px 6px 5px #000d)}
.depth-slice{background:linear-gradient(125deg,#555a35 0%,#292d1d 18%,#10120d 48%,#030403 85%);transform:translate(calc(var(--depth)*1.35px),calc(var(--depth)*-.45px))}
.emblem::after{top:97.7%;left:0;right:-8%;height:3.5%;background:#000;filter:blur(3px);opacity:.95}
.emblem::before{inset:-8% -16% -4%;background:radial-gradient(ellipse at 23% 89%,#c3ef4238,transparent 43%),radial-gradient(ellipse at 86% 76%,#b2d83318,transparent 40%);filter:blur(20px)}
.rim{filter:drop-shadow(-1px -1px 1px #efffa8c0) drop-shadow(0 0 6px #d6fa4866) drop-shadow(0 0 20px #a7cd2b30)}
.reflection{top:98.4%;height:30%;mask-image:linear-gradient(#0009,transparent 85%);-webkit-mask-image:linear-gradient(#0009,transparent 85%)}
/* Fade the image into the same black used by both following sections. */
.ambient{mask-image:linear-gradient(#000 0%,#000 76%,#000b 86%,transparent 100%);-webkit-mask-image:linear-gradient(#000 0%,#000 76%,#000b 86%,transparent 100%)}
.sound:after{background:linear-gradient(90deg,#0008,transparent 68%),linear-gradient(#000,transparent 24%,transparent 76%,#000)}
.scrolled header{background:#000e}
@media(max-width:740px){
 .emblem{top:auto;bottom:31%;height:auto;width:66vw;max-width:350px}
 .ambient{background-size:auto 100%;background-position:center}
 .depth-slice{transform:translate(calc(var(--depth)*.8px),calc(var(--depth)*-.3px))}
}