*{

margin:0;
padding:0;
box-sizing:border-box;

}


html,
body{

width:100%;
height:100%;

overflow-x:hidden;

overscroll-behavior:none;

scroll-behavior:smooth;

}



body{

font-family:
"Helvetica Neue",
"Noto Sans SC",
sans-serif;

background:#f4efe7;

color:#111;

padding-top:
env(safe-area-inset-top);

padding-bottom:
env(safe-area-inset-bottom);

scroll-snap-type:y mandatory;

}

body.hero-lock{

overflow:hidden;

height:100vh;

}

/* ===== COMMON ===== */


section{

min-height:100svh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

padding:40px;

scroll-snap-align:start;

scroll-snap-stop:always;

}





/* ===== HERO ===== */


.hero{

width:100%;

height:100dvh;
min-height:100svh;

background-image:
url("images/cover.jpg");

background-size:cover;

background-position:center;

color:white;

position:fixed;

transition:

opacity 1.5s ease,

transform 1.5s ease;

overflow:hidden;

z-index:1000;

top:0;
left:0;


}



.hero.hide{

opacity:0;

transform:scale(1.05);

pointer-events:none;

}




.intro{

text-align:center;

width:100%;
max-height:100%;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;



}




.date{

font-size:clamp(12px,4vw,18px);

letter-spacing:8px;

margin-bottom:clamp(15px,5vh,50px);

opacity:0;

animation:

fadeUp 2s forwards;

}





.invite-title{

font-size:clamp(10px,3vw,14px);

letter-spacing:8px;

line-height:2;

margin-bottom:clamp(15px,4vh,40px);

opacity:0;

animation:

fadeUp 2s .5s forwards;

}





.intro h1{


    
font-size:clamp(50px,14vw,90px);

font-weight:700;

letter-spacing:8px;

line-height:1.2;

color:#919689;

opacity:0;

animation:

fadeUp 2s .8s forwards;

}





.intro p{

margin-top:clamp(15px,4vh,40px);

font-size:clamp(10px,3vw,16px);

letter-spacing:5px;

line-height:2;

opacity:0;

animation:

fadeUp 2s 1.5s forwards;

}





#enterBtn{

margin-top:clamp(20px,5vh,60px);

padding:

clamp(10px,3vw,20px)
clamp(35px,10vw,80px);

font-size:14px;

background:none;

border:

1px solid #000;

color:#000;

letter-spacing:5px;

opacity:0;



cursor:pointer;


animation:
fadeUp 2s 2s forwards,
enterPulse 3s 4s ease-in-out infinite;

}





@keyframes fadeUp{


from{

opacity:0;

transform:

translateY(40px);

}


to{

opacity:1;

transform:

translateY(0);

}


}


@keyframes enterPulse{


0%{

transform:
translateY(0)
scale(1);

opacity:1;

}


50%{

transform:
translateY(0)
scale(1.05);

opacity:.75;

}


100%{

transform:
translateY(0)
scale(1);

opacity:1;

}


}

@media(max-height:700px){

.date{
margin-bottom:20px;
}


.invite-title{
margin-bottom:15px;
}


.intro h1{
font-size:55px;
}


.intro p{
margin-top:15px;
}


#enterBtn{
margin-top:25px;
}

}

/* ===== STORY ===== */


.story{

background:#f4efe7;

opacity:0;

transition:

opacity 1.5s ease;

position:relative;

z-index:2;

}




.story.show{

opacity:1;

}







/* ===== STORY TITLE ===== */

.story h2{

font-size:13px;

font-weight:400;

letter-spacing:10px;

margin-bottom:60px;

opacity:0;

transform:translateY(25px);


}

.story.show h2{

animation:
storyFadeUp 1.2s .2s ease forwards;

}

/* ===== NAMES ===== */



.names{

display:flex;

justify-content:center;

align-items:center;

gap:25px;

margin-bottom:60px;

}


/* 新郎 / 新娘 */


.person{

opacity:0;

transform:translateY(25px);

}

.story.show .person:first-child{

animation:
storyFadeUp 1.2s .5s ease forwards;

}


.story.show .person:last-child{

animation:
storyFadeUp 1.2s .8s ease forwards;

}

/* GROOM / BRIDE */

.person span{

font-size:10px;

letter-spacing:6px;

opacity:.5;

}


/* 姓名 */


.person h3{

font-size:28px;

font-weight:300;

letter-spacing:5px;

margin-top:20px;

}


/* & */


.symbol{

font-size:24px;

font-weight:200;

opacity:0;

transform:scale(.8);

}

.story.show .symbol{

animation:
symbolReveal 1s .65s ease forwards;

}





/*
.story-line{

width:1px;

height:80px;

background:#111;

margin:

0 auto 50px;

}
*/


/* ===== STORY TEXT ===== */


.story-text{

font-size:18px;

font-weight:300;

line-height:2.3;

letter-spacing:2px;

opacity:0;

transform:translateY(20px);

}

.story.show .story-text{

animation:
storyFadeUp 1.4s 1.2s ease forwards;

}

/* ===== DRESSCODE ===== */

.story-en{

margin-top:70px;

font-size:12px;

letter-spacing:2px;

line-height:2;

opacity:0;

transform:translateY(20px);

}

.story.show .story-en{

animation:
storyFadeUp 1.4s 1.7s ease forwards;

}

/* ===== COLOR DOTS ===== */

.dress-colors{

display:flex;

justify-content:center;

align-items:center;

gap:12px;

margin-top:18px;

}


.dress-colors i{

width:13px;

height:13px;

border-radius:50%;

display:block;

border:1px solid rgba(0,0,0,.12);

opacity:0;

transform:scale(.5);

}

.story.show .dress-colors i{

animation:
colorDotReveal .8s ease forwards;

}


.story.show .dress-colors i:nth-child(1){

animation-delay:2s;

}


.story.show .dress-colors i:nth-child(2){

animation-delay:2.1s;

}


.story.show .dress-colors i:nth-child(3){

animation-delay:2.2s;

}


.story.show .dress-colors i:nth-child(4){

animation-delay:2.3s;

}


.story.show .dress-colors i:nth-child(5){

animation-delay:2.4s;

}


.story.show .dress-colors i:nth-child(6){

animation-delay:2.5s;

}


.story.show .dress-colors i:nth-child(7){

animation-delay:2.6s;

}


.story.show .dress-colors i:nth-child(8){

animation-delay:2.7s;

}


/* ===== ANIMATIONS ===== */

@keyframes storyFadeUp{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:translateY(0);

}

}


@keyframes symbolReveal{

from{

opacity:0;

transform:scale(.8);

}

to{

opacity:1;

transform:scale(1);

}

}


@keyframes colorDotReveal{

from{

opacity:0;

transform:scale(.5);

}

to{

opacity:1;

transform:scale(1);

}

}



/* ===== MOMENTS ===== */


.moments{

width:100vw;

height:100svh;

min-height:100svh;

background:#000;

overflow:hidden;

padding:0;

position:relative;

display:flex;

justify-content:flex-start;

align-items:flex-start;

scroll-snap-align:start;

}


.moment-title{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

display:flex;

justify-content:center;

align-items:center;

background:#000;

color:white;

font-size:14px;

letter-spacing:12px;

z-index:999;

pointer-events:none;

opacity:0;

}


.moments.play-intro .moment-title{

animation:
momentCoverFade 2s ease forwards;

}


@keyframes momentCoverFade{

0%{
opacity:1;
}

50%{
opacity:1;
}

100%{
opacity:0;
visibility:hidden;
}

}




/* ===== FIRST PHOTO INTRO ===== */





.photo-card:first-child.active img{

opacity:1;

transition-delay:.8s;

}



.photo-card:first-child .photo-text{

opacity:0;

transform:translateY(30px);

transition:
opacity 1.5s ease .8s,
transform 1.5s ease .8s;

}



.photo-card:first-child.active .photo-text{

opacity:1;

transform:translateY(0);

}


.photo-slider{

display:flex;

width:100vw;

height:100svh;

overflow-x:auto;

overflow-y:hidden;

scroll-snap-type:x mandatory;

scroll-behavior:smooth;

-webkit-overflow-scrolling:touch;

position:relative;

z-index:1;

}




.photo-slider::-webkit-scrollbar{

display:none;

}





/* ===== PHOTO CARD ===== */


.photo-card{

flex:0 0 100%;

width:100%;

height:100svh;

position:relative;

z-index:0;

overflow:hidden;

scroll-snap-align:center;

scroll-snap-stop:always;

background:#000;

opacity:.35;

transition:
opacity 1.5s ease;

transition:

opacity 1.2s ease;

}




.photo-card.active{

opacity:1;

}

.photo-card:last-child{

position:relative;

}


.photo-card:last-child::after{

content:"";

position:absolute;

inset:0;

background:#f4efe7;

opacity:0;

transition:
opacity 6s ease;

pointer-events:none;

}



.photo-card:last-child.active::after{

opacity:.35;

}



/*
图片黑屏优化：

1. 没加载时保持黑底
2. 加载完成后淡入
3. 避免瞬间白闪
*/

.photo-card img{

width:100%;
height:100%;

object-fit:cover;

opacity:0;

transform:scale(1.12);

filter:
brightness(.75);


transition:
opacity 1s ease,
transform 1.8s ease,
filter 1.8s ease;

}





.photo-card img[src]{

opacity:1;

}





.photo-card.active img{

opacity:1;

transform:scale(1);

filter:
brightness(1);

}





/* ===== PHOTO TEXT ===== */


.photo-text{

position:absolute;

bottom:90px;

left:0;
right:0;

text-align:center;

color:white;

font-size:12px;

letter-spacing:10px;

opacity:0;

transform:translateY(20px);

transition:
opacity 1s ease,
transform 1s ease;

}

.photo-card.active .photo-text{

opacity:1;

transform:translateY(0);

}



/* ===== PHOTO DOTS ===== */


.photo-dots{

position:absolute;

bottom:35px;

left:50%;

transform:

translateX(-50%);

display:flex;

gap:8px;

z-index:50;

}





.dot{

width:5px;

height:5px;

border-radius:50%;

background:white;

opacity:.35;

transition:.3s;

}





.dot.active{

opacity:1;

transform:

scale(1.5);

}





/* ===== SWIPE HINT ===== */


.swipe-hint{

position:absolute;

right:30px;

bottom:55px;

color:white;

font-size:10px;

letter-spacing:5px;

z-index:20;

animation:

swipeMove 2s infinite;

}





@keyframes swipeMove{


0%{

transform:

translateX(0);

opacity:.4;

}



50%{

transform:

translateX(-15px);

opacity:1;

}



100%{

transform:

translateX(0);

opacity:.4;

}


}


/* ===== WEDDING DAY ===== */


.info{

height:100svh;
min-height:100svh;

box-sizing:border-box;
overflow:hidden;

background:#111;
color:white;



}





.info-content{

width:100%;

}





.info h2{

font-size:clamp(10px,3vw,12px);

font-weight:400;

letter-spacing:12px;

margin-bottom:clamp(30px,5vh,50px);

}





.date-block .year{

font-size:clamp(14px,4vw,18px);

letter-spacing:8px;

opacity:0;

transform:translateY(30px);

animation:
dateReveal 1.5s ease forwards;

animation-delay:.3s;

}





.date-block .day{

font-size:clamp(50px,16vw,70px);

font-weight:200;

letter-spacing:8px;

margin:clamp(10px,2vh,20px) 0;


opacity:0;

transform:translateY(40px);

animation:
dateReveal 1.8s ease forwards;

animation-delay:.6s;

}





.date-block .week{

font-size:clamp(10px,3vw,12px);

letter-spacing:8px;


opacity:0;

transform:translateY(30px);

animation:
dateReveal 1.5s ease forwards;

animation-delay:1s;

}





.divider{

width:1px;


height:clamp(40px,8vh,60px);

background:white;

margin:

clamp(25px,5vh,40px)
auto;

opacity:.5;

}





.event{

margin-bottom:clamp(25px,5vh,50px);

}





.event span{

display:block;

font-size:11px;

letter-spacing:8px;

opacity:.7;

margin-bottom:20px;

}





.event strong{

font-size:clamp(15px,4vw,18px);

font-weight:300;

letter-spacing:4px;

line-height:2;

}


.countdown{

display:flex;

justify-content:center;

gap:clamp(10px,5vw,20px);


margin-top:clamp(20px,5vh,40px);

margin-bottom:clamp(20px,5vh,40px);

}



.count-item{

display:flex;

flex-direction:column;

align-items:center;

min-width:55px;

}



.count-item span{


font-size:clamp(24px,8vw,32px);

font-weight:200;

letter-spacing:3px;

}



.count-item small{

font-size:9px;

letter-spacing:3px;

opacity:.6;

margin-top:10px;

}

@keyframes dateReveal{


from{

opacity:0;

transform:translateY(40px);

}


to{

opacity:1;

transform:translateY(0);

}


}




/* ===== LOCATION ===== */



.location{

background:#f4efe7;

height:100svh;
min-height:100svh;

box-sizing:border-box;
overflow:hidden;


}





.location-content{

padding:
clamp(50px,10vh,70px)
clamp(25px,6vw,40px)
clamp(25px,6vw,40px);


}





.location h2{

font-size:clamp(10px,3vw,12px);

letter-spacing:12px;

margin-bottom:clamp(30px,8vh,80px);

}





.location h3{

font-size:clamp(22px,7vw,28px);

font-weight:300;

letter-spacing:5px;

margin-bottom:clamp(15px,4vh,30px);

}





.location p{

font-size:clamp(11px,3.5vw,13px);

line-height:2;

letter-spacing:3px;

}





.location-line{

width:1px;

height:clamp(30px,5vh,50px);

background:#111;

margin:

10px auto;

}





.location-time{

font-size:12px;

letter-spacing:8px;

line-height:2;

}


.map-preview{

width:85%;

height:clamp(140px,25vh,200px);

margin:clamp(10px,2vh,20px)
auto 0;

opacity:0;

transform:translateY(30px);

animation:
locationReveal 1.5s ease forwards;

animation-delay:.8s;

}


.map-preview img{

width:100%;

height:100%;

object-fit:contain;

}

.map-btn{

display:inline-block;

margin-top:clamp(10px,3vh,25px);

padding:15px clamp(35px,12vw,60px);

border:1px solid #111;

border-radius:40px;

font-size:11px;

letter-spacing:8px;

color:#111;

text-decoration:none;

transition:.3s;

}


.map-btn:active{

transform:scale(.95);

}


@keyframes locationReveal{


from{

opacity:0;

transform:translateY(30px);

}


to{

opacity:1;

transform:translateY(0);

}

}

.map-btn:visited{

color:#111;

}


.map-btn:hover{

background:#111;

color:#fff;

}




/* ===== RSVP ===== */

.rsvp{

min-height:100svh;

background:#f4efe7;

display:flex;

align-items:center;

justify-content:center;

height:100svh;

box-sizing:border-box;
overflow:hidden;


}











.rsvp h2{

font-size:clamp(11px,3vw,14px);

letter-spacing:12px;

margin-bottom:50px;

}





.rsvp-title{

font-size:18px;

font-weight:300;

letter-spacing:4px;

}





.rsvp-button a{

display:inline-block;

margin-top:60px;

padding:

18px 60px;

border:

1px solid white;

color:white;

text-decoration:none;

letter-spacing:6px;

font-size:11px;

}










/* ===== MUSIC ===== */


#musicBtn{


position:fixed;


right:25px;


top:30px;


width:35px;


height:35px;


border:

1px solid rgba(255,255,255,.5);


border-radius:50%;


display:flex;


justify-content:center;


align-items:center;


color:white;


font-size:16px;


z-index:999;


cursor:pointer;


background:rgba(0,0,0,.15);


}





#musicBtn.playing{


animation:

musicRotate 6s linear infinite;


}





@keyframes musicRotate{


from{

transform:

rotate(0);

}


to{

transform:

rotate(360deg);

}


}




/* ===== PAGE TRANSITION ===== */


.page-transition{

position:fixed;

inset:0;

background:#000;

z-index:9999;

opacity:0;

pointer-events:none;

transition:
opacity 1s ease;

}



.page-transition.show{

opacity:1;

pointer-events:auto;

}


/* ===== RSVP ===== */




.rsvp-content{

width:80%;

text-align:center;

}



.rsvp h2{

font-size:clamp(11px,3vw,14px);

letter-spacing:12px;

font-weight:400;

}



.rsvp-sub{

margin-top:clamp(25px,6vh,50px);

font-size:11px;

letter-spacing:6px;

line-height:2;

opacity:.6;

}



.rsvp-form{

margin-top:clamp(35px,8vh,80px);

}



.field{

margin-bottom:clamp(20px,5vh,45px);

}



input,
textarea{

width:100%;

background:none;

border:none;

border-bottom:1px solid #111;

padding:15px 0;

font-size:clamp(11px,3.5vw,13px);

letter-spacing:4px;

outline:none;

}



textarea{

height:50px;

resize:none;

}



.label{

font-size:10px;

letter-spacing:6px;

margin-bottom:20px;

}



.attendance{

display:flex;

justify-content:center;

gap:30px;

}



.choice{

background:none;

border:1px solid #111;

border-radius:50px;

padding:12px 40px;

letter-spacing:5px;

}



.choice.active{

background:#111;

color:white;

}



.guest-number{

display:flex;

justify-content:center;

align-items:center;

gap:35px;

}



.guest-number button{

border:none;

background:none;

font-size:25px;

}



#guestCount{

font-size:20px;

}



.submit-btn{

margin-top:30px;

width:100%;

padding:15px;

border:none;

border-radius:50px;

background:#111;

color:white;

letter-spacing:8px;

}



.thank-you{

display:none;

margin-top:80px;

font-size:12px;

letter-spacing:8px;

line-height:3;

}


/* ===== RSVP COLOR FIX ===== */

.rsvp,
.rsvp *{

color:#111;

}


.rsvp input,
.rsvp textarea{

color:#111;

}


.rsvp input::placeholder,
.rsvp textarea::placeholder{

color:#111;

opacity:.5;

}


.submit-btn{

background:#111;

color:#fff !important;

}


.choice.active{

background:#111;

color:#fff !important;

}

/* ===== RSVP SUCCESS ===== */


.rsvp-form{

transition:
opacity 1s ease,
transform 1s ease;

}


.rsvp-form.hide{

opacity:0;

transform:
translateY(-30px);

pointer-events:none;

}



.thank-you{

display:block;

position:absolute;

top:50%;
left:50%;

transform:
translate(-50%,-40%);

text-align:center;

font-size:14px;

letter-spacing:8px;

color:#000;

opacity:0;

visibility:hidden;

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

}


.thank-you.show{

opacity:1;

visibility:visible;

transform:
translate(-50%,-50%);

}