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



body{
background:
radial-gradient(
    circle at 50% 35%,
    #24201b 0%,
    #151515 45%,
    #090909 100%
);
color:#f5f5f5;
font-family:'Inter',sans-serif;
overflow:hidden;
}

#passwordScreen,
#loadingScreen{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
background:#0d0d0d;
z-index:999;
padding:25px;
}

#loadingScreen{
display:none;
}

.passwordBox,
.loaderBox,
.museum{
width:100%;
max-width:650px;
text-align:center;
animation:museumFade 1.8s ease;
}

.topText{
letter-spacing:6px;
font-size:12px;
color:#b89555;
margin-bottom:20px;
}

h1{
font-family:'Cormorant Garamond',serif;
font-size:58px;
font-weight:400;
margin-bottom:25px;
color:#f7f2e8;
}

.introText,
.loadingSmall,
.museumText{
line-height:2;
font-size:17px;
color:#d7d7d7;
margin-bottom:35px;
}

input{
width:100%;
padding:16px;
background:#1a1a1a;
border:1px solid #333;
border-radius:10px;
color:white;
font-size:16px;
margin-bottom:18px;
}

button{
padding:15px 45px;
background:linear-gradient(135deg,#b89555,#d4af37);
color:#fff;
border:1px solid rgba(255,255,255,.15);
border-radius:40px;
font-size:15px;
letter-spacing:2px;
cursor:pointer;

box-shadow:
0 8px 25px rgba(184,149,85,.35);

transition:
transform .35s ease,
box-shadow .35s ease,
background .35s ease;
}

button:hover{

transform:translateY(-3px);

box-shadow:
0 15px 35px rgba(184,149,85,.45);

background:linear-gradient(135deg,#c7a562,#e2c45a);

}

button:active{

transform:translateY(1px);

box-shadow:
0 5px 15px rgba(184,149,85,.25);

}



#errorText{
margin-top:15px;
color:#d46b6b;
}

.progress{
width:100%;
height:7px;
background:#222;
border-radius:20px;
overflow:hidden;
margin:30px 0;
}

.progressBar{
width:0%;
height:100%;
background:#b89555;
transition:2.5s linear;
}

#gallery{
display:none;
min-height:100vh;
}
/* ==========================
   HERO
========================== */

.hero{
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
padding:40px 25px;
text-align:center;
animation:fadeUp 1.2s ease;
}

/* ==========================
   ROOM 1
========================== */

/* ==========================
   GALLERY ROOMS — CLEAN SYSTEM
========================== */

.room{
    position:fixed;
    inset:0;

    width:100%;
    height:100svh;
    min-height:0;

    display:none;

    overflow-y:auto;
    overflow-x:hidden;

    box-sizing:border-box;

    padding:70px 40px;

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

    background:
        linear-gradient(
            180deg,
            #101010 0%,
            #171717 100%
        );

    overscroll-behavior:contain;
    overflow-anchor:none;

    -webkit-overflow-scrolling:touch;
}

/* Soft museum spotlight */

.room::before{
    content:"";

    position:absolute;

    top:-180px;
    left:-180px;

    width:350px;
    height:350px;

    background:
        radial-gradient(
            circle,
            rgba(255,215,120,.28),
            transparent 70%
        );

    filter:blur(60px);

    pointer-events:none;

    z-index:0;
}

.room::after{
    content:"";

    position:absolute;

    top:-180px;
    right:-180px;

    width:350px;
    height:350px;

    background:
        radial-gradient(
            circle,
            rgba(255,225,160,.20),
            transparent 70%
        );

    filter:blur(60px);

    pointer-events:none;

    z-index:0;
}


/* ==========================
   ROOM CONTENT
========================== */

.roomContainer{
    width:100%;
    max-width:1350px;

    margin:0 auto;

    display:grid;

    grid-template-columns:1.2fr .8fr;

    align-items:center;

    gap:80px;

    position:relative;

    z-index:2;

    flex-shrink:0;

    box-sizing:border-box;
}


/* ==========================
   PHOTO FRAME
========================== */

.photoFrame{
    position:relative;

    display:flex;

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

    width:100%;

    padding:14px;

    box-sizing:border-box;

    background:
        linear-gradient(
            145deg,
            #171717,
            #0f0f0f
        );

    border:2px solid rgba(212,175,55,.55);

    border-radius:8px;

    box-shadow:
        0 18px 45px rgba(0,0,0,.45),
        0 0 18px rgba(212,175,55,.12),
        inset 0 0 0 2px rgba(212,175,55,.08),
        inset 0 1px 0 rgba(255,255,255,.10);

    overflow:hidden;

    flex-shrink:0;
}


/* Moving light across artwork */

.photoFrame::before,
.photoFrame::after{
    content:"";

    position:absolute;

    top:-40%;
    left:-70%;

    width:45%;
    height:180%;

    pointer-events:none;

    background:
        linear-gradient(
            135deg,
            transparent 0%,
            rgba(255,255,255,.06) 35%,
            rgba(255,244,220,.14) 50%,
            rgba(255,255,255,.06) 65%,
            transparent 100%
        );

    transform:
        rotate(35deg)
        skewX(-10deg);

    filter:blur(6px);

    animation:waveLight 4s linear infinite;

    z-index:2;
}

.photoFrame::after{
    width:25%;

    opacity:.7;

    animation-delay:-1.3s;

    filter:blur(9px);
}

@keyframes waveLight{

    0%{
        left:-70%;

        transform:
            rotate(35deg)
            skewX(-10deg);
    }

    50%{
        transform:
            rotate(35deg)
            skewX(10deg);
    }

    100%{
        left:130%;

        transform:
            rotate(35deg)
            skewX(-10deg);
    }

}


/* Artwork */

.photoFrame img{
    width:100%;
    max-width:500px;

    height:auto;

    display:block;

    border-radius:4px;

    border:8px solid #0f0f0f;

    outline:1px solid rgba(212,175,55,.12);

    outline-offset:-4px;

    box-shadow:
        0 20px 45px rgba(0,0,0,.45);

    transition:
        transform .6s ease;
}

.photoFrame:hover img{
    transform:scale(1.015);
}

.photoFrame:hover{
    transform:translateY(-8px);

    box-shadow:
        0 50px 100px rgba(0,0,0,.55);
}


/* ==========================
   ROOM TEXT
========================== */

.roomText{
    display:flex;

    flex-direction:column;

    justify-content:center;

    position:relative;

    z-index:3;

    min-width:0;

    animation:
        exhibitionTextReveal
        .8s ease
        .25s both;
}

.roomLabel{
    font-size:12px;

    letter-spacing:8px;

    text-transform:uppercase;

    color:#b89555;

    margin-bottom:18px;
}

.roomText h2{
    font-family:'Cormorant Garamond',serif;

    font-size:58px;

    font-weight:300;

    line-height:1.1;

    margin-bottom:25px;

    color:#faf6ef;
}

.quote{
    font-size:20px;

    line-height:1.9;

    color:#d7d7d7;

    max-width:560px;
}


/* ==========================
   ROOM REVEAL
========================== */

.room .photoFrame{
    animation:
        exhibitionPhotoReveal
        1.2s ease both;
}

@keyframes exhibitionPhotoReveal{

    from{
        opacity:0;

        transform:scale(.985);
    }

    to{
        opacity:1;

        transform:scale(1);
    }
}

@keyframes exhibitionTextReveal{

    from{
        opacity:0;

        transform:translateY(15px);
    }

    to{
        opacity:1;

        transform:translateY(0);
    }
}


/* ==========================
   BIRTHDAY ROOM
========================== */

#birthdayRoom{
    opacity:0;

    transition:
        opacity 1.8s ease;
}

#birthdayRoom.active{
    opacity:1;
}


/* ==========================
   LOVE LETTER
========================== */

#letterRoom .roomText{
    opacity:0;

    transform:translateY(18px);

    transition:
        opacity 1.5s ease,
        transform 1.5s ease;
}

#letterRoom.active .roomText{
    opacity:1;

    transform:translateY(0);
}


/* ==========================
   SECRET ROOM
========================== */

#secretRoom .roomText{
    opacity:0;

    transform:translateY(25px);

    transition:
        opacity 1.8s ease,
        transform 1.8s ease;
}

#secretRoom.active .roomText{
    opacity:1;

    transform:translateY(0);
}


/* ==========================
   MEMORY GALLERY
========================== */

.memoryGallery{
    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:35px;

    margin:40px 0 50px;
}

.memoryGallery img{
    width:90%;
    max-width:350px;

    height:auto;

    display:block;

    margin:0 auto;

    object-fit:contain;

    border-radius:18px;

    border:2px solid #b89555;

    box-shadow:
        0 10px 30px rgba(0,0,0,.45);

    flex-shrink:0;
}

#secretRoom .memoryGallery{
    opacity:0;

    transform:translateY(25px);

    transition:
        opacity 2s ease .6s,
        transform 2s ease .6s;
}

#secretRoom.active .memoryGallery{
    opacity:1;

    transform:translateY(0);
}


/* ==========================
   ONE LAST DOOR
========================== */

#secretBtn{
    margin-top:35px;

    padding:14px 30px;

    background:transparent;

    border:1px solid rgba(220,190,130,.55);

    color:#e8d8b5;

    font-family:'Inter',sans-serif;

    letter-spacing:2px;

    font-size:13px;

    transition:all .5s ease;
}

#secretBtn:hover{
    border-color:rgba(240,220,175,.9);

    box-shadow:
        0 0 25px rgba(220,190,130,.15);

    transform:translateY(-2px);
}


/* ==========================
   MOBILE — CLEAN LAYOUT
========================== */

@media(max-width:768px){

    .room{
        height:100svh;

        min-height:0;

        padding:
            70px
            20px
            35px;

        justify-content:flex-start;

        align-items:flex-start;

        overflow-y:auto;

        overflow-x:hidden;

        overscroll-behavior:contain;
    }


    .roomContainer{
        width:100%;

        max-width:100%;

        margin:0;

        padding:0 0 10px;

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:35px;

        min-height:0;

        height:auto;
    }


    /* Photo */

    .photoFrame{
        width:100%;

        max-width:100%;

        padding:14px;

        margin:-15px auto 0;

        flex-shrink:0;

        transform:none;
    }

    .photoFrame img{
        width:260px !important;

        max-width:260px !important;

        height:auto;

        margin:0 auto;

        display:block;
    }


    /* Text */

    .roomText{
        width:100%;

        max-width:100%;

        min-height:0;

        display:flex;

        flex-direction:column;

        align-items:center;

        text-align:center;

        flex-shrink:0;

        position:relative;

        z-index:10;
    }

    .roomLabel{
        margin-bottom:15px;

        font-size:12px;

        letter-spacing:7px;
    }

    .roomText h2{
        font-size:42px;

        line-height:1.05;

        margin-bottom:28px;
    }

    .quote{
        width:100%;

        max-width:600px;

        font-size:20px;

        line-height:1.8;
    }


    /* Buttons */

    .roomText button{
        display:block;

        width:100%;

        max-width:360px;

        margin:
            40px auto
            5px;

        padding:14px 18px;

        position:relative;

        z-index:30;

        opacity:1;

        visibility:visible;

        flex-shrink:0;
    }


    /* Memory photos */

    .memoryGallery{
        width:100%;

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:25px;

        margin:35px 0 35px;
    }

    .memoryGallery img{
        width:90%;

        max-width:350px;

        height:auto;

        margin:0 auto;

        display:block;

        object-fit:contain;
    }


    /* Text-only rooms */

    #birthdayRoom .roomContainer,
    #letterRoom .roomContainer,
    #secretRoom .roomContainer,
    #funnyRoom .roomContainer,
    #finalRoom .roomContainer{
        width:100%;

        max-width:100%;
    }


    /* Final-room buttons */

    #birthdayRoom button,
    #letterRoom button,
    #secretRoom button,
    #funnyRoom button{
        margin-top:40px;
    }


    /* Password / Loading */

    #passwordScreen,
    #loadingScreen{
        position:fixed;

        top:0;
        left:0;

        width:100%;
        height:100%;

        z-index:9999;
    }

    #passwordScreen::before,
    #passwordScreen::after,
    #loadingScreen::before,
    #loadingScreen::after{
        display:none;
    }

}


/* ==========================
   MOBILE TEXT SIZING
========================== */

@media(max-width:400px){

    .roomText h2{
        font-size:38px;
    }

    .quote{
        font-size:17px;

        line-height:1.75;
    }

    .roomText button{
        max-width:330px;

        font-size:13px;

        letter-spacing:1.5px;
    }

}