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

html{
    scroll-behavior:smooth;
}

body{

    background:#FAF6EF;
    overflow-x:hidden;
    color:#4e4338;
    font-family:Poppins,sans-serif;

}

/* Sunlight */

.sunlight{

    position:fixed;
    top:-300px;
    left:-200px;

    width:700px;
    height:700px;

    background:radial-gradient(circle,
    rgba(255,223,140,.55),
    transparent 70%);

    pointer-events:none;
    z-index:0;

}


/* HERO */

.hero{

    height:100vh;

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

    position:relative;

}

.hero-content{

    text-align:center;
    z-index:10;

}

.cover-card{

    width:min(320px,85vw);

    border-radius:24px;

    cursor:pointer;

    box-shadow:

        0 20px 45px rgba(0,0,0,.18),
        0 0 50px rgba(255,197,90,.2);

    transition:.5s;

}

.cover-card:hover{

    transform:
    translateY(-8px)
    scale(1.04);

}

.zoom{

    transform:scale(1.08);

}

.hero h2{

    margin-top:35px;

    font-family:"Playfair Display",serif;

    font-size:30px;

    color:#775839;

    animation:pulse 2s infinite;

}

.scroll-arrow{

    margin-top:18px;

    font-size:45px;

    color:#af7a22;

    animation:bounce 1.8s infinite;

}


/* SECOND SECTION */

.invitation-section{

    padding:100px 6%;

    text-align:center;

}

.full-card{

    width:min(850px,95vw);

    border-radius:20px;

    box-shadow:
    0 35px 60px rgba(0,0,0,.18);

}

button{

    margin-top:45px;

    padding:16px 42px;

    border:none;

    background:#b58b42;

    color:white;

    border-radius:50px;

    cursor:pointer;

    font-size:16px;

    transition:.3s;

}

button:hover{

    background:#8c6a2c;

    transform:translateY(-3px);

}


/* Reveal */

.reveal{

    opacity:0;

    transform:translateY(80px);

    transition:1s;

}

.reveal.active{

    opacity:1;

    transform:none;

}


/* LIGHTBOX */

#lightbox{

    position:fixed;

    inset:0;

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

    display:none;

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

    z-index:999;

}

#lightbox.active{

    display:flex;

}

.zoom-wrapper{

    overflow:auto;
    max-width:90%;
    max-height:90%;

}

.zoom-wrapper img{

    width:850px;
    max-width:100%;

    transition:.3s;

    cursor:zoom-in;

}

.zoom-wrapper img:hover{

    transform:scale(1.3);

}

#closeBtn{

    position:absolute;

    top:20px;
    right:30px;

    font-size:50px;

    color:white;

    background:none;

}


/* Floating petals */

.petals span{

    position:fixed;

    width:18px;
    height:18px;

    background:#f2b23d;

    border-radius:50% 50% 0 50%;

    opacity:.7;

    animation:float 12s linear infinite;

}

.petals span:nth-child(1){
left:10%;
animation-delay:0s;
}

.petals span:nth-child(2){
left:25%;
animation-delay:3s;
}

.petals span:nth-child(3){
left:40%;
animation-delay:5s;
}

.petals span:nth-child(4){
left:65%;
animation-delay:1s;
}

.petals span:nth-child(5){
left:82%;
animation-delay:7s;
}

.petals span:nth-child(6){
left:92%;
animation-delay:4s;
}


/* Animations */

@keyframes pulse{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.06);

}

}

@keyframes bounce{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(12px);

}

}

@keyframes float{

0%{

transform:translateY(-100px) rotate(0deg);

opacity:0;

}

10%{

opacity:.7;

}

100%{

transform:translateY(120vh) rotate(360deg);

opacity:0;

}

}


/* Responsive */

@media(max-width:768px){

.hero h2{

font-size:24px;

}

.scroll-arrow{

font-size:40px;

}

.full-card{

width:100%;

}

}