section.c-section
    img.c-section__bg(src="//unsplash.it/1920/1080?random=1", alt="")
    div.c-section__curtain
    button.c-section__btn Open something

.c-section
    display: flex
    justify-content: center
    align-items: center
    width:  100%
    height: 100vh
    position: relative
    overflow: hidden

    &__bg
        display: block
        min-width: 126%
        position: absolute
        top:  50%
        left: 50%
        transform: translate(-50%, -50%) scale(.8)
        transition: 2s cubic-bezier(.5, .5, .1, 1)
        .js-opened &
            transform: translate(-50%, -50%) scale(1)

    &__curtain
        width:  100%
        height: 100%
        position: absolute
        top:  0
        left: 0
        mix-blend-mode: exclusion
        box-shadow: inset 0 -100vh 0 black, inset 0 -50vh 0 white, inset 0 50vh 0 white
        transition: 2s cubic-bezier(.5, .5, .1, 1)
        .js-opened &
            box-shadow: inset 0 0 0 white,  inset 0 0 0 white

    &__btn
        padding: 1.5em 3em
        position: relative
        font: bold 1em sans-serif
        color: black
        background: white
        border: none
        cursor: pointer
        outline: none
        // mix-blend-mode: overlay

const $btn = document.querySelector('.c-section__btn')
const $section = document.querySelector('.c-section')

$btn.addEventListener('click', () =>
    $section.classList.toggle('js-opened'))