/* ==========================================
   RESET
========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


body{

    overflow:hidden;

    background:#0b0b0b;

}


/* ==========================================
   IMAGES
========================================== */

img{

    display:block;

}


/* ==========================================
   MAIN STAGE
========================================== */

#stage{

    position:fixed;

    width:1920px;
    height:1080px;

    left:50%;
    top:50%;

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

    transform-origin:center center;

    overflow:hidden;

}


/* ==========================================
   SCENES
========================================== */

#closedScene,
#animationScene,
#openScene{

    position:absolute;

    inset:0;

}


/* ==========================================
   INITIAL VISIBILITY
========================================== */

#closedScene{

    display:block;

}


#animationScene,
#openScene{

    display:none;

}


/* ==========================================
   FULL SCENE IMAGES
========================================== */

#firstBackground,
#lastBackground,
#animationFrame{

    position:absolute;

    left:0;
    top:0;

    width:1920px;
    height:1080px;

}


/* ==========================================
   INTERACTIVE OBJECTS
========================================== */

#frontDoor,
#doorKnob,
#doorKnobGlow,
#doorKnobTurn,
#candle,
#pumpkin{

    position:absolute;

    cursor:pointer;

    user-select:none;

    -webkit-user-drag:none;

}


/* ==========================================
   CLOSED SCENE POSITIONS
========================================== */

#frontDoor{

    position:absolute;

    left:826.339px;
    top:164.072px;

    width:350px;

    z-index:2;

    transform-origin:left center;

    transition:
        transform 180ms ease,
        filter 180ms ease;

}


/* ==========================================
   DOOR HOVER
========================================== */

#frontDoor:hover{

    transform:scale(1.01);

    filter:
        brightness(1.04)
        drop-shadow(
            0 0 8px
            rgba(255, 220, 170, 0.18)
        );

}


/* ==========================================
   DOOR CLICK ACTIVATION
========================================== */

#frontDoor.doorActivated{

    transform:
        perspective(1200px)
        rotateY(5deg)
        scale(1.01);

    filter:
        brightness(1.05)
        drop-shadow(
            0 0 10px
            rgba(255, 220, 170, 0.22)
        );

}


/* ==========================================
   DOORKNOB BASE
========================================== */

#doorKnob{

    position:absolute;

    left:1077.2px;
    top:536.491px;

    width:65px;

    z-index:3;

}


/* ==========================================
   DOORKNOB GLOW + TURN
========================================== */

#doorKnobGlow,
#doorKnobTurn{

    position:absolute;

    left:973px;
    top:389px;

    width:270px;
    height:456px;

    display:none;

    pointer-events:none;

}


#doorKnobGlow{

    z-index:4;

}


#doorKnobTurn{

    z-index:5;

}


/* ==========================================
   OPEN SCENE POSITIONS
========================================== */

#candle{

    position:absolute;

    left:1051px;
    top:261px;

    width:75px;

}


#pumpkin{

    position:absolute;

    left:1152px;
    top:755px;

    width:200px;

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width:768px){

    #stage{

        left:45%;

    }

}