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

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


body{

    overflow:hidden;

    background:#0b0b0b;

}


/* ==========================================
   IMAGE PROTECTION
========================================== */

img{

    display:block;

    user-select:none;
    -webkit-user-select:none;

    -webkit-user-drag:none;

    -webkit-touch-callout:none;

}


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

#stage{

    position:fixed;

    width:1920px;
    height:1080px;

    left:50%;
    top:50%;

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

    transform-origin:center center;

    overflow:hidden;

    user-select:none;
    -webkit-user-select:none;

    -webkit-touch-callout:none;

}


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

#closedScene,
#animationScene,
#openScene{

    position:absolute;

    inset:0;

    user-select:none;
    -webkit-user-select:none;

    -webkit-touch-callout:none;

}


/* ==========================================
   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{

    position:absolute;

    cursor:pointer;

    user-select:none;
    -webkit-user-select:none;

    -webkit-user-drag:none;
    -webkit-touch-callout:none;

}


/* ==========================================
   SECRET CLICKABLE OBJECTS
========================================== */

#candle,
#pumpkin{

    position:absolute;

    cursor:default;

    user-select:none;
    -webkit-user-select:none;

    -webkit-user-drag:none;
    -webkit-touch-callout: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;

}


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

/*
   The door has no hover reaction.

   Its interactivity remains hidden until
   the visitor clicks or taps it.
*/


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

#frontDoor.doorActivated{

    transform:
        perspective(1200px)
        rotateY(7deg)
        scale(1.05);

}


/* ==========================================
   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%;

    }

/* ==========================================
   REMOVE ANDROID CHROME TAP HIGHLIGHT
========================================== */

html,
body,
#stage,
#closedScene,
#frontDoor,
#doorKnob,
#doorKnobGlow,
#doorKnobTurn{

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}


/* Prevent selection, focus outlines and
   browser touch feedback on interactive images */

#frontDoor,
#doorKnob,
#doorKnobGlow,
#doorKnobTurn{

    outline: none;

    -webkit-user-select: none;
    user-select: none;

    -webkit-touch-callout: none;
    -webkit-user-drag: none;

    touch-action: manipulation;

}


/* Remove any focus or active outline */

#frontDoor:focus,
#doorKnob:focus,
#doorKnobGlow:focus,
#doorKnobTurn:focus,
#frontDoor:active,
#doorKnob:active,
#doorKnobGlow:active,
#doorKnobTurn:active{

    outline: none;
    box-shadow: none;

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}