#ytArea {
	position: fixed;
    top: 0;
    left: 0;

    z-index: 200;
}

#ytFlame {
    /* constant */
	position: fixed;

    box-sizing: border-box;
    border: solid #FFF889 1px;

    /* variable */
	opacity: 0;
	visibility: hidden;
    z-index: -1;
    
    inset: 0;
    width: 100vw;
    height: 100vh;
}

.opened #ytFlame {
	animation: ytFlameOpen .75s forwards;
}
@keyframes ytFlameOpen {
    0%{
        z-index: 22;
    }
    65% {
        opacity: 1;
        visibility: visible;
        z-index: 22;
        
        inset: 0;
        width: 100vw;
        height: 100vh;
    }
    100% {
        opacity: 1;
	    visibility: visible;
        z-index: 22;

        top: calc(calc(100vh - 54vw) / 2);
        left: 2vw;
        width: 96vw;
        height: 54vw;
    }
}

.closed #ytFlame {
    animation: ytFlameClose .2s forwards;
}
@keyframes ytFlameClose {
    0% {
        opacity: 1;
	    visibility: visible;
        z-index: 22;

        top: calc(calc(100vh - 54vw) / 2);
        left: 2vw;
        width: 96vw;
        height: 54vw;
    }
    99.9% {
        opacity: 0;
	    visibility: hidden;
        z-index: 22;

        top: calc(calc(100vh - 54vw) / 2);
        left: 2vw;
        width: 96vw;
        height: 54vw;
    }
    100% {
        z-index: -1;
    }
}

.landscape .opened #ytFlame {
	animation: ytFlameOpenLand .75s forwards;
}
@keyframes ytFlameOpenLand {
    0%{
        z-index: 22;
    }
    65% {
        opacity: 1;
	    visibility: visible;
        z-index: 22;
        
        inset: 0;
        width: calc(100vw - 1px);
        height: calc(100vh - 1px);
    }
    100% {
        opacity: 1;
	    visibility: visible;
        z-index: 22;

        top: 12.1vh;
        left: calc(calc(100vw - 145.6vh) / 2);
        width: 145.6vh;
        height: 81.9vh;
    }
}

.landscape .closed #ytFlame {
    animation: ytFlameCloseLand .2s forwards;
}
@keyframes ytFlameCloseLand {
    0% {
        opacity: 1;
	    visibility: visible;
        z-index: 22;

        top: 12.1vh;
        left: calc(calc(100vw - 145.6vh) / 2);
        width: 145.6vh;
        height: 81.9vh;
    }
    99.9% {
        opacity: 0;
	    visibility: hidden;
        z-index: 22;

        top: 12.1vh;
        left: calc(calc(100vw - 145.6vh) / 2);
        width: 145.6vh;
        height: 81.9vh;
    }
    100%{
        z-index: -1;
    }
}

#closeBtn {
    /* constant */
	position: absolute;

    top: max(calc(-10px - 50px),calc(-10px - 8vw));
    right: 0;
    width: 8vw;
    height: 8vw;
    max-width: 50px;
    max-height: 50px;

    background-image:url(../img/closeBtn.svg);
    background-repeat:  no-repeat;
    background-position:center;
    background-size:cover;

    cursor: pointer;

    /* variable */
	opacity: 0;
	visibility: hidden;
    z-index: -1;
}

.landscape #closeBtn {
    top: -6.1vh;
    right: 0;
    width: 5vh;
    height: 5vh;
}

.opened #closeBtn {
    animation: closeBtnOpen .2s forwards .75s;
}
@keyframes closeBtnOpen {
    0%{
        z-index: 23;
    }
    0.1% {
        opacity: 0;
	    visibility: hidden;
        z-index: 23;
    }
    100% {
        opacity: 1;
	    visibility: visible;
        z-index: 23;
    }
}

.closed #closeBtn {
    animation: closeBtnClose .2s forwards;
}
@keyframes closeBtnClose {
    0%{
        opacity: 1;
	    visibility: visible;
        z-index: 23;
    }
    99.9% {
        opacity: 0;
	    visibility: hidden;
        z-index: 23;
    }
    100% {
        z-index: -1;
    }
}


#ytTarget {
    /* constant */
    display: block;
    position: absolute;

    inset: 0;
    margin: auto;
    width: calc(100% - 1px);
    height: calc(100% - 1px);

    /* variable */
	opacity: 0;
	visibility: hidden;
    z-index: -1;
}

.opened #ytTarget {
    animation: ytTargetOpen .2s forwards .8s;
}
@keyframes ytTargetOpen {
    0%{
        z-index: 21;
    }
    0.1% {
        opacity: 0;
	    visibility: hidden;
        z-index: 21;
    }
    100% {
        opacity: 1;
	    visibility: visible;
        z-index: 21;
    }
}

.landscape .opened #ytTarget {
    animation: ytTargetOpenLand .2s forwards .8s;
}
@keyframes ytTargetOpenLand {
    0%{
        z-index: 21;
    }
    0.1% {
        opacity: 0;
	    visibility: hidden;
        z-index: 21;
    }
    100% {
        opacity: 1;
	    visibility: visible;
        z-index: 21;
    }
}

.closed #ytTarget {
    animation: ytTargetClose .2s forwards;
}
@keyframes ytTargetClose {
    0%{
        opacity: 1;
	    visibility: visible;
        z-index: 21;
    }
    99.9% {
        opacity: 0;
	    visibility: hidden;
        z-index: 21;
    }
    100% {
        z-index: -1;
    }
}



#ytMask {
    /* constant */
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.8);

    /* variable */
	opacity: 0;
	visibility: hidden;
    z-index: -1;
}

.opened #ytMask {
    animation: ytMaskOpen .1s forwards;
}
@keyframes ytMaskOpen {
    0%{
        z-index: 20;
    }
    0.1% {
        opacity: 0;
	    visibility: hidden;
        z-index: 20;
    }
    100% {
        opacity: 1;
	    visibility: visible;
        z-index: 20;
    }
}

.closed #ytMask {
    animation: ytMaskClose .2s forwards;
}
@keyframes ytMaskClose {
    0%{
        opacity: 1;
	    visibility: visible;
        z-index: 20;
    }
    99.9% {
        opacity: 0;
	    visibility: hidden;
        z-index: 20;
    }
    100%{
        z-index: -1;
    }
}