@property --depth{syntax:"<integer>";inherits:true;initial-value:0}@keyframes depth-descend{0%{--depth:0}to{--depth:40}}@keyframes depth-sun-out{0%{opacity:1}to{opacity:0}}@keyframes depth-deep-in{0%{opacity:0}to{opacity:1}}.depth-zones{--depth:0;position:fixed;inset:0;z-index:40;pointer-events:none}.depth-deep,.depth-sun{position:absolute;inset:0;mix-blend-mode:multiply}.depth-sun{background:linear-gradient(180deg,rgba(255,205,140,.16),rgba(255,205,140,0) 65%);opacity:clamp(0,calc(1 - var(--depth) / 12),1)}.depth-deep{background:linear-gradient(180deg,rgba(0,123,171,.02),rgba(5,58,112,.07));opacity:clamp(0,calc((var(--depth) - 6) / 34),1)}.depth-readout:before{counter-reset:depth var(--depth);content:counter(depth) " m"}@supports (animation-timeline:scroll()){.depth-zones{animation:depth-descend linear both;animation-timeline:scroll(root block)}.depth-sun{animation:depth-sun-out linear both;animation-timeline:scroll(root block);animation-range:0 30%}.depth-deep{animation:depth-deep-in linear both;animation-timeline:scroll(root block);animation-range:15% 100%}}@media (prefers-reduced-motion:reduce){.depth-zones{display:none}}