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

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

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

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

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

    touch-action:manipulation;
    outline:none;
}


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

#candle,
#candle1,
#candle2,
#candle3,
#candle4,
#pumpkin{
    position:absolute;

    cursor:default;

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


/* 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;
}


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

#candle{
    left:1035px;
    top:257px;

    width:100px;
    height:80px;

    display:none;

    z-index:3;
}

#candle1{
    left:733px;
    top:9px;

    width:700px;
    height:600px;

    display:none;

    z-index:3;
}

#candle2{
    left:733px;
    top:9px;

    width:700px;
    height:600px;

    display:none;

    z-index:3;
}

#candle3{
    left:568px;
    top:-262px;

    width:1000px;
    height:1200px;

    display:none;

    z-index:3;
}

#candle4{
    left:568px;
    top:-262px;

    width:1000px;
    height:1200px;

    display:none;

    z-index:3;
}

#pumpkin{
    left:1152px;
    top:755px;

    width:200px;

    z-index:3;
}


/* ==========================================
   CANDLE MEMORY POPUP
========================================== */

.memoryPopup{
    position:fixed;
    inset:0;

    z-index:1000;

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

    padding:24px;

    background:rgba(8, 5, 3, 0.78);

    font-family:"Fredoka", sans-serif;
}

.memoryPopup.isOpen{
    display:flex;
}

.memoryPopupPanel{
    position:relative;

    width:min(520px, 100%);
    max-height:85vh;

    overflow-y:auto;

    padding:42px 34px 34px;

    border:1px solid rgba(201, 162, 107, 0.45);
    border-radius:18px;

    background:
        linear-gradient(
            180deg,
            rgba(39, 27, 18, 0.98),
            rgba(20, 14, 10, 0.98)
        );

    color:#f1dfbf;

    text-align:center;
}

.memoryPopupPanel h2{
    margin-bottom:12px;

    color:#e2bd82;

    font-size:28px;
    font-weight:500;
}

.memoryIntroduction{
    max-width:390px;

    margin:0 auto 28px;

    color:rgba(241, 223, 191, 0.78);

    line-height:1.55;
}

.memoryPopupClose{
    position:absolute;

    top:10px;
    right:15px;

    border:0;

    padding:4px 9px;

    background:transparent;

    color:#d6b27d;

    font-family:inherit;
    font-size:32px;
    line-height:1;

    cursor:pointer;

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

.memoryDetails{
    display:grid;
    gap:10px;

    text-align:left;
}

.memoryDetails p{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    margin:0;
    padding:12px 0;

    border-bottom:1px solid rgba(201, 162, 107, 0.16);
}

.memoryDetails span{
    color:rgba(241, 223, 191, 0.68);
}

.memoryDetails strong{
    color:#efd5a7;

    font-weight:500;
    text-align:right;
}

.visitHistorySection{
    margin-top:28px;

    text-align:left;
}

.visitHistorySection h3{
    margin-bottom:12px;

    color:#d5af76;

    font-size:18px;
    font-weight:500;
}

#visitHistoryList{
    display:grid;
    gap:7px;

    color:rgba(241, 223, 191, 0.72);

    font-size:14px;
}

.visitHistoryEntry{
    display:flex;
    justify-content:space-between;

    gap:16px;

    padding:7px 0;

    border-bottom:1px solid rgba(201, 162, 107, 0.1);
}

.memoryClosingMessage{
    margin-top:28px;

    color:#d8b681;

    font-style:italic;
    line-height:1.5;
}


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

html,
body,
#stage,
#closedScene,
#frontDoor,
#doorKnob,
#doorKnobGlow,
#doorKnobTurn,
#candle,
#candle1,
#candle2,
#candle3,
#candle4,
#pumpkin{
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}

#frontDoor:focus,
#doorKnob:focus,
#doorKnobGlow:focus,
#doorKnobTurn:focus,
#candle:focus,
#candle1:focus,
#candle2:focus,
#candle3:focus,
#candle4:focus,
#pumpkin:focus,
#frontDoor:active,
#doorKnob:active,
#doorKnobGlow:active,
#doorKnobTurn:active,
#candle:active,
#candle1:active,
#candle2:active,
#candle3:active,
#candle4:active,
#pumpkin:active{
    outline:none;
    box-shadow:none;

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


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

@media (max-width:768px){

    #stage{
        left:45%;
    }

    .memoryPopup{
        padding:15px;
    }

    .memoryPopupPanel{
        padding:40px 22px 28px;
    }

    .memoryPopupPanel h2{
        font-size:24px;
    }

    .memoryDetails p{
        align-items:flex-start;
        flex-direction:column;

        gap:4px;
    }

    .memoryDetails strong{
        text-align:left;
    }

}