/* ==========================================
   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:810px;
    top:-3px;
    width:550px;
    height:616px;
    display:none;
    z-index:3;
}

#candle1{
    left:810px;
    top:-3px;
    width:551px;
    height:616px;
    display:none;
    z-index:3;
}

#candle2{
    left:414px;
    top:-398px;
    width:1300px;
    height:1454px;
    display:none;
    z-index:3;
}

#candle3{
    left:361px;
    top:-457px;
    width:1400px;
    height:1566px;
    display:none;
    z-index:3;
}

#candle4{
    left:257px;
    top:-575px;
    width:1600px;
    height:1790px;
    display:none;
    z-index:3;
}

#booksFromTheCloset{
    position:absolute;

    left:526px;
    top:658px;

    width:900px;
    height:526px;

    z-index:3;

    pointer-events:none;

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

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

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

}