.kk-layer__top {
    width: 100%; height: 0;
    position: absolute; left: 0; top: 0; z-index: 99999;
}
.kk-layer__top.visible {
    height: 0
}

.kk-layer__blackout {
    width: 100vw; height: 0;
    position: fixed; left: 0; top: 0; z-index: 0;
    background-color: rgba(0, 0, 0, 0);
    box-shadow: inset 0 0 300px rgba(0, 0, 0, 0);
    transition: background-color .7s ease, box-shadow .7s ease
}
.kk-layer__blackout.visible {
    height: 100vh;
    background-color: rgba(0, 0, 0, .7);
    box-shadow: inset 0 0 300px rgba(0, 0, 0, .35)
}

.kk-layer__page {
    position: relative;
}

.kk-layer__viewport {
    width: 100vw; height: 0;
    position: fixed; left: 0; top: 0; z-index: 1;
    overflow: hidden;
}

.kk-layer__viewport.visible {
    height: 100vh;
}