@property --_y{syntax:"<length>";inherits:true;initial-value:0}@property --_h{syntax:"<length>";inherits:true;initial-value:50vh}.banner-bg{--_distance:7;block-size:var(--_h);inline-size:100%;isolation:isolate;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 120px),transparent calc(100% - 20px));mask-image:linear-gradient(180deg,#000 calc(100% - 120px),transparent calc(100% - 20px));min-block-size:300px;position:relative}.banner-bg:before{background:linear-gradient(180deg,#0006,#000c);content:"";top:0;right:0;bottom:0;left:0;position:absolute;z-index:2}.banner-bg .controls{display:flex;inline-size:100%;inset-block-start:var(--_header--height,64px);position:sticky;z-index:3}.banner-bg .controls svg{block-size:30px;inline-size:30px;inset-block-start:20px;inset-inline-end:20px;position:absolute;z-index:1;fill:#fff;cursor:pointer;transition:all .2s ease-in-out}.banner-bg .hero-image,.banner-bg .hero-video{block-size:var(--_h);inline-size:100%;top:0;right:0;bottom:0;left:0;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;opacity:1;position:absolute;transform:translateY(calc(var(--_y)/var(--_distance)));transition:all .2s ease-in-out;z-index:-1}.banner-bg .hero-image.hero-video,.banner-bg .hero-video.hero-video{z-index:auto}.banner-bg .title{align-items:center;color:var(--color--accent);display:flex;filter:drop-shadow(0 10px 20px rgba(0,0,0,.5));flex-direction:column;inset-block-end:calc(50% + 10px);inset-inline-start:50%;justify-content:center;position:absolute;transform:translate(-50%,calc(50% + var(--_y)/(var(--_distance)/-7)));z-index:3}.banner-bg .title h1{font-size:55px;font-weight:700;inline-size:auto}.banner-bg.stopped .hero-video{opacity:0}@supports (animation-timeline:scroll()){.banner-bg .hero-image,.banner-bg .hero-video,.banner-bg .title{animation-duration:1ms;animation-fill-mode:forwards;animation-name:parallax;animation-timing-function:linear;animation-timeline:scroll(block);animation-range:0 100%}}@keyframes parallax{0%{--_y:0px}to{--_y:-500px;--_h:120vh}}