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


body{

    background:#080808;

    color:white;

    font-family:
    "Microsoft YaHei",
    sans-serif;

    overflow-x:hidden;

}



/* =================
密码页面
================= */


#lock{

position:fixed;

width:100%;

height:100vh;

background:
linear-gradient(
135deg,
#111,
#2b1b2f
);

display:flex;

justify-content:center;

align-items:center;

z-index:999;


}



.lock-box{

text-align:center;

background:
rgba(255,255,255,0.08);

padding:40px;

border-radius:20px;

backdrop-filter:blur(15px);

}


.lock-box h1{

font-size:60px;

animation:
heartBeat 1.5s infinite;

}



.lock-box h2{

margin:20px 0;

font-weight:300;

}



.lock-box p{

color:#ddd;

margin-bottom:20px;

}



.lock-box input{


width:220px;

padding:12px;

border-radius:20px;

border:none;

outline:none;

text-align:center;


}



button{


margin-top:20px;

padding:12px 35px;

border-radius:30px;

border:none;

background:white;

color:#333;

cursor:pointer;

transition:.3s;


}



button:hover{


transform:scale(1.1);

}




/* =================
主页
================= */


#main{

display:none;

}





.hero{


height:100vh;

position:relative;

display:flex;

justify-content:center;

align-items:center;

overflow:hidden;


background:

linear-gradient(
rgba(0,0,0,.35),
rgba(0,0,0,.8)
),

url("images/photo01.jpg");


background-size:cover;

background-position:center;


}




/* 星空 */

.stars{


position:absolute;

width:200%;

height:200%;

background-image:

radial-gradient(
white 1px,
transparent 1px
);


background-size:50px 50px;

opacity:.15;

animation:

moveStars 30s linear infinite;


}




.hero-text{


position:relative;

text-align:center;

z-index:2;

}



.hero-text h1{


font-size:50px;

font-weight:300;

letter-spacing:8px;


}



.hero-text p{


margin-top:30px;

font-size:22px;

line-height:2;


}



.hero-text button{


margin-top:40px;

}




/* =================
照片区域
================= */


#photos{


padding:80px 5%;


}



#photos h2{


text-align:center;

font-size:36px;

font-weight:300;

margin-bottom:50px;


}




.gallery{


display:grid;

grid-template-columns:

repeat(auto-fit,minmax(260px,1fr));


gap:30px;


}



.gallery img{


width:100%;

height:420px;

object-fit:cover;

border-radius:20px;


box-shadow:

0 20px 40px rgba(0,0,0,.5);



opacity:0;

transform:

translateY(60px);


transition:

1s;



cursor:pointer;


}



.gallery img.show{


opacity:1;

transform:

translateY(0);


}



.gallery img:hover{


transform:

scale(1.05);


}




/* =================
文字区域
================= */


.story{


height:70vh;


display:flex;

flex-direction:column;

justify-content:center;

align-items:center;


text-align:center;


background:

linear-gradient(
#080808,
#201522
);



}



.story h2{


font-size:40px;

font-weight:300;

margin-bottom:40px;


}



.story p{


font-size:22px;

line-height:2;

color:#ddd;


}




/* =================
结尾
================= */


.end{


height:100vh;


display:flex;

flex-direction:column;

justify-content:center;

align-items:center;


text-align:center;


background:

linear-gradient(
#201522,
#080808
);


}



.heart{


font-size:100px;


animation:

heartBeat 1.2s infinite;


}



.end h2{


font-size:40px;

font-weight:300;

margin:30px;


}



.end p{


font-size:20px;

color:#ddd;


}





/* =================
动画
================= */


@keyframes heartBeat{


0%{

transform:scale(1);

}


50%{

transform:scale(1.2);

}


100%{

transform:scale(1);

}


}





@keyframes moveStars{


from{

transform:translate(0,0);

}


to{

transform:translate(-200px,-200px);

}


}




/* =================
手机适配
================= */


@media(max-width:600px){


.hero-text h1{

font-size:32px;

letter-spacing:3px;

}



.hero-text p{

font-size:18px;

}



.gallery img{


height:360px;


}



.story h2,
.end h2{


font-size:30px;


}



}

/* =================
音乐按钮
================= */


#musicBtn{


position:fixed;


right:30px;

bottom:30px;


width:55px;

height:55px;


border-radius:50%;


background:

rgba(255,255,255,.15);



color:white;


font-size:25px;


z-index:999;


backdrop-filter:blur(10px);



}




#musicBtn:hover{


transform:rotate(20deg) scale(1.1);


}





/* 星光 */

.spark{


position:fixed;


width:8px;

height:8px;


background:white;


border-radius:50%;


pointer-events:none;


animation:

sparkMove 1s forwards;


z-index:9999;


}



@keyframes sparkMove{


0%{

opacity:1;

transform:scale(1);

}


100%{

opacity:0;

transform:
translateY(-50px)
scale(0);


}


}


/* =================
照片墙增强
================= */

.gallery {
    align-items: start;
}

.gallery img {
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform, opacity;
}

/* =================
全屏图片查看器
================= */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
    cursor: zoom-out;
}

.lightbox.open {
    opacity: 1;
    visibility: visible;
}

.lightbox-image {
    display: block;
    max-width: min(92vw, 1400px);
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 18px;
    box-shadow: 0 25px 80px rgba(0,0,0,.65);
    transform: scale(.94);
    transition: transform .22s ease;
    cursor: default;
}

.lightbox.open .lightbox-image {
    transform: scale(1);
}

.lightbox-close {
    position: fixed;
    top: 22px;
    right: 25px;
    z-index: 10001;
    width: 52px;
    height: 52px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 38px;
    font-weight: 200;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: transform .2s ease, background .2s ease;
}

.lightbox-close:hover {
    transform: rotate(90deg) scale(1.08);
    background: rgba(255,255,255,.22);
}

#musicBtn.playing {
    animation: musicPulse 1.5s ease-in-out infinite;
}

@keyframes musicPulse {
    0%, 100% { box-shadow: 0 0 0 rgba(255,255,255,0); }
    50% { box-shadow: 0 0 24px rgba(255,255,255,.25); }
}

@media (max-width: 600px) {
    .lightbox {
        padding: 14px;
    }

    .lightbox-image {
        max-width: 96vw;
        max-height: 86vh;
        border-radius: 12px;
    }

    .lightbox-close {
        top: 12px;
        right: 12px;
        width: 46px;
        height: 46px;
        font-size: 32px;
    }
}