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

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

html,
body{
    width:100%;
    height:100%;
}

body{
    overflow:hidden;
    background:#0b0b0b;
}


/* ==========================================
   STAGE VIEWPORT
========================================== */

#mobileStageViewport{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    overflow:hidden;
}

#mobileStageCanvas{
    position:relative;
    width:100%;
    height:100%;
}


/* ==========================================
   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:none;
   
    transform-origin:center center;

    transition:none;
    
    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;
}

#closedScene{
    display:block;
}

#animationScene,
#openScene{
    display:none;
}


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

#firstBackground,
#lastBackground,
#animationFrame{
    position:absolute;

    left:0;
    top:0;

    width:1920px;
    height:1080px;
}


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

    touch-action:manipulation;

    outline:none;
}


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

#frontDoor{
    left:826.339px;
    top:164.072px;

    width:350px;

    z-index:2;

    transform-origin:left center;

    transition:transform 180ms ease;
}


/*
   The door has no hover reaction.
*/


#frontDoor.doorActivated{
    transform:
        perspective(1200px)
        rotateY(7deg)
        scale(1.05);
}


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

#doorKnob{
    left:1077.2px;
    top:536.491px;

    width:65px;

    z-index:3;
}

#doorKnobGlow,
#doorKnobTurn{
    left:973px;
    top:389px;

    width:270px;
    height:456px;

    display:none;

    pointer-events:none;
}

#doorKnobGlow{
    z-index:4;
}

#doorKnobTurn{
    z-index:5;
}


/* ==========================================
   REMOVE ENTRANCE TAP HIGHLIGHTS
========================================== */

html,
body,
#stage,
#closedScene,
#frontDoor,
#doorKnob,
#doorKnobGlow,
#doorKnobTurn{
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}


/* ==========================================
   REMOVE ENTRANCE FOCUS FEEDBACK
========================================== */

#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);
}


/* ==========================================
   MOBILE
========================================== */
@media (max-width:768px){

    html,
    body{
        overscroll-behavior:none;
    }

    #stage{

        left:45%;

        touch-action:manipulation;

    }

    #candleHitbox{

        width:140px;
        height:140px;

    }

    #mobileStageViewport.mobilePanEnabled{
        overflow-x:auto;
        overflow-y:hidden;

        touch-action:pan-x;
        overscroll-behavior-x:contain;
        overscroll-behavior-y:none;

        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }

    #mobileStageViewport.mobilePanEnabled::-webkit-scrollbar{
        display:none;
    }

    #mobileStageViewport.mobilePanEnabled #stage{
        touch-action:pan-x;
    }

}


/* ==========================================
   MOBILE LOBBY PAN BAR
========================================== */

.mobilePanBar{
    --mobile-pan-track:#8a6828;
    --mobile-pan-thumb:#3b2416;
    --mobile-pan-thumb-width:52px;

    position:fixed;
    left:50%;
    bottom:calc(9px + env(safe-area-inset-bottom));
    z-index:9000;

    display:none;
    width:min(72vw, 320px);
    height:28px;
    transform:translateX(-50%);

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

    pointer-events:none;
    user-select:none;
    -webkit-user-select:none;
    -webkit-touch-callout:none;
}

@media (max-width:768px){

    body.mobileLobbyPanReady .mobilePanBar:not([hidden]){
        display:flex;
    }

    #mobilePanRange{
        width:100%;
        height:22px;
        margin:0;
        padding:0;
        border:0;
        outline:none;

        appearance:none;
        -webkit-appearance:none;

        background:transparent;
        pointer-events:auto;
        touch-action:none;

        -webkit-tap-highlight-color:transparent;
    }

    #mobilePanRange::-webkit-slider-runnable-track{
        height:8px;
        border:1px solid rgba(59,36,22,.75);
        border-radius:999px;
        background:var(--mobile-pan-track);
        box-shadow:0 1px 4px rgba(0,0,0,.38);
    }

    #mobilePanRange::-webkit-slider-thumb{
        width:var(--mobile-pan-thumb-width);
        height:18px;
        margin-top:-6px;
        border:2px solid #6e4d24;
        border-radius:999px;

        appearance:none;
        -webkit-appearance:none;

        background:var(--mobile-pan-thumb);
        box-shadow:0 2px 5px rgba(0,0,0,.5);
    }

    #mobilePanRange::-moz-range-track{
        height:8px;
        border:1px solid rgba(59,36,22,.75);
        border-radius:999px;
        background:var(--mobile-pan-track);
        box-shadow:0 1px 4px rgba(0,0,0,.38);
    }

    #mobilePanRange::-moz-range-thumb{
        width:var(--mobile-pan-thumb-width);
        height:18px;
        border:2px solid #6e4d24;
        border-radius:999px;
        background:var(--mobile-pan-thumb);
        box-shadow:0 2px 5px rgba(0,0,0,.5);
    }

    #mobilePanRange:focus-visible::-webkit-slider-thumb{
        outline:2px solid #c19a4b;
        outline-offset:2px;
    }

    #mobilePanRange:focus-visible::-moz-range-thumb{
        outline:2px solid #c19a4b;
        outline-offset:2px;
    }
}

/* ==========================================
   SCREEN FADE
========================================== */

#fadeOverlay{

    position:fixed;

    inset:0;

    background:#000;

    opacity:0;

    pointer-events:none;

    transition:opacity 800ms ease;

    z-index:9999;

}

#fadeOverlay.visible{

    opacity:1;

}