/******************************************************************************
 * KENOBI69
 * Entrance Animation
 ******************************************************************************/

#entrance{

    position:fixed;
    inset:0;

    display:none;

    justify-content:center;
    align-items:center;

    background:#000;

    overflow:hidden;

    z-index:9999;

}

#entrance.active{

    display:flex;

}

/************************************************/

#doorFrame{

    position:relative;

    width:700px;
    height:700px;

    display:flex;
    justify-content:center;
    align-items:center;

}
/************************************************/

#light{

    position:absolute;

    top:50%;
    left:50%;

    width:80px;
    height:250px;

    transform:translate(-50%,-50%);

    background: radial-gradient(
    ellipse at center,
    rgba(255,235,120,1) 0%,
    rgba(255,215,0,.85) 35%,
    rgba(255,215,0,.35) 70%,
    rgba(255,215,0,0) 100%
);

    border-radius:50px;

    filter:blur(100px);

    opacity:0;

    transition:
        opacity 2s ease,
        width 2s ease,
        height 2s ease;

    z-index:1;

}/************************************************/

#doorLeft,
#doorRight{

    position:absolute;

    top:0;

    width:50%;
    height:100%;

object-fit:contain;

    transition:transform 2s ease;

    z-index:2;

}

#doorLeft{

    left:0;
    object-position:right center;

}

#doorRight{

    right:0;
    object-position:left center;

}
/************************************************/

#entrance.open #light{

    opacity:.95;

    width:600px;

    height:1000px;

    filter:blur(180px);

    animation:glow 3s ease-in-out infinite;

}/************************************************/

#entrance.open #doorLeft{
    transform: translateX(-180px);
}

#entrance.open #doorRight{
    transform: translateX(180px);
}

/************************************************/
/* Licht pulsieren */
/************************************************/

@keyframes glow {

    0%{
        transform: translate(-50%,-50%) scale(1);
    }

    50%{
        transform: translate(-50%,-50%) scale(1.03);
    }

    100%{
        transform: translate(-50%,-50%) scale(1);
    }

}

/************************************************/
/* Kameraflug */
/************************************************/

#doorFrame{

    transform:scale(1);

    transition:transform 2.5s ease-in;

}

#entrance.zoom #doorFrame{

    transform:scale(4);

}
#entrance.zoom #light{

    width:2200px;

    height:2200px;

    opacity:1;

    filter:blur(250px);

}