.header-scale{
    position: relative;
    height: calc(100svh - var(--nav-2));
    text-align: center;
    overflow: clip;
}

.header-scale hgroup{
    position: absolute;
    bottom: calc(var(--width)*.5625);
    left: 0;
    z-index: 9;
    padding:1.618em;
    width: 100%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    transform: translateY(calc(var(--width)*.5625 - 2.618em));
    color:#fff;
}

.bg-img-scale{
    position: relative;
    margin:0;
    width: 100%;
    margin-inline: auto;
    height: calc(100svh - var(--nav-2));
}

.bg-img-wrapper{
    margin-inline:auto;
    width: 100%;
    height: calc(100svh - var(--nav-2));
    position: absolute;
    bottom: 0;
    left: 0;
}

.bg-img{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.bg-img video{
    object-fit: cover;
    height: 100%
}

.btn-wrapper{
    position: absolute;
    bottom: 0;
    right: 1em;
    padding-block: 1em;
    display: flex;
    align-items: end;
    height: 100%;
}

#mute-button{
    width: 2.618em;
    height: 2.618em;
    /*font-size: var(--small);*/
    border:1px solid #fff;
    border-radius: 50%;
    color: #fff;
    background-color: rgba(0,0,0,.5);
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(8px)
}

#mute-button img{height: 1.382em}

@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)){
    .header-scale{view-timeline:--main-header}
    
    .header-scale hgroup{
        animation: h1-anim linear both;
        animation-timeline: --main-header;
        animation-range:exit-crossing calc(var(--nav-2)*-1) exit-crossing calc(100% - var(--width));
    }
    
    .bg-img-scale{view-timeline:--bg-img-wrapper}
    
    .bg-img-wrapper{
        animation: img-scale linear both;
        animation-timeline: --bg-img-wrapper;
        animation-range:exit-crossing calc(var(--nav-2)*-1) exit-crossing calc(100% - var(--width));
    }
    
    @media(max-height:45vw){
        .header-scale hgroup{animation-range:exit-crossing calc(var(--nav-2)*-1) exit-crossing calc(100vh - var(--width))}
        .bg-img-wrapper{animation-range:exit-crossing calc(var(--nav-2)*-1) exit-crossing calc(100vh - var(--width))}
    }
    
    @keyframes h1-anim{
        90%{color: #fff}
            100%{
                color: #333;
                transform: translateY(0);
        }
    }
    
    @keyframes img-scale{
        to{
            left: calc((100vw - var(--width))/2);
            width: var(--width);
            height: calc(var(--width)*.5625);
        }
    }
}