:root{
--wine:#5f1020;
--gold:#caa76b;
--light:#faf7f4;
--text:#453c3c;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Cormorant Garamond',serif;
background:var(--light);
color:var(--text);
overflow-x:hidden;
}

.hero {
    height: 100vh;
    background:
    linear-gradient(rgba(40,0,0,.55),rgba(40,0,0,.55)),
    url("images/hero.jpg");
    background-size: cover;
    background-position: center;

    display: flex;
    flex-direction: column;
    justify-content: space-between; /* ВАЖНО */
    align-items: center;

    text-align: center;
    position: relative;

    padding: 60px 20px;
}

.hero-content {
    z-index: 2;
    color: white;
    padding: 20px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    height: 100%;
    width: 100%;
}

.hero-top {
    margin-top: 20px;
}

.hero-middle {
    margin: auto 0;
}

.hero-bottom {
    margin-bottom: 10px;
}

.hero h1{
font-size:7rem;
font-family:'Great Vibes',cursive;
font-weight:400;
}

.hero span{
display:block;
font-size:5rem;
margin:10px 0;
}

.subtitle{
font-size:1.4rem;
max-width:700px;
margin:auto;
margin-bottom:30px;
}

.date{
font-size:2rem;
letter-spacing:3px;
margin-top:20px;
}

.place{
margin-top:10px;
font-size:1.3rem;
}

.hero-btn{
display:inline-block;
margin-top:40px;
padding:16px 36px;
background:var(--gold);
color:white;
text-decoration:none;
border-radius:40px;
transition:.3s;
}

.hero-btn:hover{
transform:translateY(-3px);
}
.section{
padding:120px 20px;
text-align:center;
max-width:1100px;
margin:auto;
}

.section h2{
font-family:'Great Vibes',cursive;
font-size:4rem;
color:var(--wine);
margin-bottom:30px;
}

.text {
    font-size: 1.5rem;
    line-height: 1.9;
    max-width: 750px;
    margin: 0 auto;
    color: #5a4b4b;
    letter-spacing: 0.3px;
}

.polaroid{
background:white;
padding:10px 10px 40px;
box-shadow:0 15px 30px rgba(0,0,0,.15);
opacity:0;
transition:
    opacity 1.8s ease,
    transform 1.8s ease;
}

.polaroid img{
width:100%;
display:block;
}

.gallery{
display:flex;
gap:30px;
justify-content:center;
flex-wrap:wrap;
margin-top:50px;
}

.story-section{
    padding-bottom:200px;
}

.gallery .polaroid{
width:280px;
}

.childhood{
    position:relative;
    height:650px;
    max-width:900px;
    margin:0 auto 80px;
}

.childhood .polaroid{
width:220px;
}
.child-left{
    position:absolute;
    top:0;
    left:80px;
    width:240px;

    transform:
        translateX(-150px)
        rotate(-8deg);
}

.child-right{
    position:absolute;
    right:80px;
    bottom:0;
    width:240px;

    transform:
        translateX(150px)
        rotate(8deg);
}

.child-left.show-photo{
    opacity:1;
    transform:
        translateX(0)
        rotate(-8deg);
}

.child-right.show-photo{
    opacity:1;
    transform:
        translateX(0)
        rotate(8deg);
}

.heart-sketch{
    position:absolute;

    left:50%;
    top:50%;

    transform:
        translate(-50%,-50%)
        rotate(-10deg);

    z-index:2;
}

.heart-sketch img{
    width:120px;
    height:auto;

    opacity:.95;

    user-select:none;
    pointer-events:none;
}
.photo-1{
    opacity:0;
    transform:
        translateY(250px)
        rotate(-6deg);
}

.photo-2{
    opacity:0;
    transform:
        translateY(250px)
        rotate(2deg);
}

.photo-3{
    opacity:0;
    transform:
        translateY(250px)
        rotate(7deg);
}
.photo-1.show-photo{
    opacity:1;
    transform:
        translateY(0)
        rotate(-6deg);

    transition:
        transform 2.5s cubic-bezier(.22,1,.36,1),
        opacity 2s ease;
}

.photo-2.show-photo{
    opacity:1;
    transform:
        translateY(0)
        rotate(2deg);

    transition:
        transform 2.5s cubic-bezier(.22,1,.36,1),
        opacity 2s ease;

    transition-delay:.3s;
}

.photo-3.show-photo{
    opacity:1;
    transform:
        translateY(0)
        rotate(7deg);

    transition:
        transform 2.5s cubic-bezier(.22,1,.36,1),
        opacity 2s ease;

    transition-delay:.6s;
}

.gallery .polaroid{
    transition:
        transform .9s ease,
        box-shadow .9s ease;
}

.gallery .polaroid:hover{
    transform:scale(1.05);
}
.photo-1:hover{
    transform:rotate(-6deg) scale(1.05);
}

.photo-2:hover{
    transform:rotate(2deg) scale(1.05);
}

.photo-3:hover{
    transform:rotate(7deg) scale(1.05);
}

.countdown{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
margin-top:40px;
}

.box{
background:white;
padding:30px;
border-radius:20px;
min-width:150px;
box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.box span{
font-size:3rem;
font-weight:700;
color:var(--wine);
}
.timeline{
max-width:700px;
margin:auto;
position:relative;
}

.timeline::before{
content:"";
position:absolute;
left:50%;
top:0;
bottom:0;
width:2px;
background:var(--gold);
}

.item{
position:relative;
margin:50px 0;
}

.dot{
width:18px;
height:18px;
background:var(--wine);
border-radius:50%;
position:absolute;
left:50%;
transform:translateX(-50%);
}

.content{
background:white;
padding:25px;
width:40%;
margin-left:auto;
border-radius:15px;
box-shadow:0 5px 15px rgba(0,0,0,.08);
}
.button{
display:inline-block;
padding:16px 40px;
background:var(--wine);
color:white;
text-decoration:none;
border-radius:40px;
margin-top:25px;
}

.colors{
display:flex;
justify-content:center;
gap:20px;
margin:40px 0;
}

.color{
width:70px;
height:70px;
border-radius:50%;
}

.c1{background:#5f1020;}
.c2{background:#7b2734;}
.c3{background:#d7c4b4;}
.c4{background:#efe8de;}
.c5{background:#6b4b3e;}
footer{
background:var(--wine);
color:white;
padding:120px 20px;
text-align:center;
}

footer h2{
font-family:'Great Vibes',cursive;
font-size:5rem;
}

.footer-names{
font-size:2rem;
margin-top:20px;
}

.footer-date{
margin-top:10px;
letter-spacing:3px;
}
@media(max-width:768px){

.hero h1{
font-size:4rem;
}

.hero span{
font-size:3rem;
}

.section h2{
font-size:3rem;
}

.timeline::before{
left:20px;
}

.dot{
left:20px;
}

.content{
width:calc(100% - 60px);
margin-left:60px;
}

}

.section{
opacity:0;
transform:translateY(50px);
transition:1s;
}

.section.show{
opacity:1;
transform:translateY(0);
}

#musicBtn{

position:fixed;

right:20px;
bottom:20px;

z-index:9999;

background:#5f1020;

color:white;

border:none;

padding:15px 22px;

border-radius:40px;

cursor:pointer;

box-shadow:
0 10px 25px rgba(0,0,0,.2);

}
.floating-rsvp{

position:fixed;

left:20px;
bottom:20px;

background:#caa76b;

color:white;

text-decoration:none;

padding:15px 25px;

border-radius:50px;

font-weight:600;

z-index:9999;

box-shadow:
0 10px 25px rgba(0,0,0,.25);
transition: opacity .4s ease;
}
#lightbox{
display:none;

position:fixed;

inset:0;

width:100vw;
height:100vh;

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

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

z-index:999999;
}

#prevPhoto,
#nextPhoto{

    position:absolute;

    top:50%;
    transform:translateY(-50%);

    background:none;
    border:none;

    color:white;

    font-size:50px;

    cursor:pointer;

    z-index:1000000;
}

#prevPhoto{
    left:20px;
}

#nextPhoto{
    right:20px;
}

#lightbox img{

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

border-radius:12px;

cursor:pointer;

}
#intro {
    position: fixed;
    inset: 0;
    background: linear-gradient(rgba(40,0,0,0.8), rgba(40,0,0,0.8)),
                url("images/hero.jpg") center/cover;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    color: white;
    text-align: center;
}

.intro-content h1 {
    font-family: 'Great Vibes', cursive;
    font-size: 4rem;
}

.intro-content p {
    margin-top: 10px;
    font-size: 1.3rem;
    letter-spacing: 2px;
}

#enterBtn {
    margin-top: 30px;
    padding: 14px 28px;
    border: none;
    border-radius: 40px;
    background: #caa76b;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.3s;
}

#enterBtn:hover {
    transform: scale(1.05);
}

#rsvpForm{
    max-width:600px;
    margin:40px auto 0;

    display:flex;
    flex-direction:column;
    gap:30px;
}

.form-group{
    text-align:left;
}

.form-group label{
    display:block;
    margin-bottom:10px;
    font-size:1.3rem;
}

#rsvpForm input[type="text"],
#rsvpForm select{
    width:100%;
    padding:15px;
    border:1px solid #ddd;
    border-radius:12px;
    font-size:1rem;
    font-family:inherit;
}

.radio-group{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.radio-option{
    display:flex;
    align-items:center;
    gap:12px;
    cursor:pointer;
}

.radio-option input{
    width:20px;
    height:20px;
    cursor:pointer;
}

.checkbox-group{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.checkbox-option{
    display:flex;
    align-items:center;
    gap:12px;
    cursor:pointer;
}

.checkbox-option input{
    width:18px;
    height:18px;
    cursor:pointer;
}

#rsvpForm button {
    cursor: pointer;
}

.dress-hearts{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
    margin:40px 0;
}

.heart-row{
    display:flex;
    gap:14px;
}
.heart{
    width:35px;
    height:35px;
    position:relative;
    transform:rotate(-45deg);
}

.heart::before,
.heart::after{
    content:"";
    position:absolute;
    width:35px;
    height:35px;
    border-radius:50%;
    background:inherit;
}

.heart::before{
    top:-17px;
    left:0;
}

.heart::after{
    left:17px;
    top:0;
}
.c11{background:#000000;}
.c12{background:#2b2b2b;}
.c13{background:#777777;}
.c14{background:#d0d0d0;}
.c21{background:#5f1020;}
.c22{background:#7b2734;}
.c23{background:#b45a6a;}
.c24{background:#f3b2c2;}
.c31{background:#2f4f2f;}
.c32{background:#556b2f;}
.c33{background:#8fbf8f;}
.c34{background:#cfe8cf;}
.c41{background:#4b2e1e;}
.c42{background:#7a4a2d;}
.c43{background:#caa76b;}
.c44{background:#f0e3d2;}
@media(max-width:768px){

    .childhood{
        height:auto;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:40px;
    }

    .child-left,
    .child-right{
        position:relative;
        top:auto;
        left:auto;
        right:auto;
        bottom:auto;
    }

    .heart-sketch{
        position:relative;
        transform:none;
        left:auto;
        top:auto;
    }
}
input[type="radio"],
input[type="checkbox"]{
    accent-color: var(--wine);
}