/* =========================
   ШРИФТЫ
========================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500&display=swap');



/* =========================
   ОСНОВА
========================= */


* {
    box-sizing: border-box;
}



html {
    scroll-behavior: smooth;
}



body {

    margin: 0;

    background: #f8f3eb;

    color: #40362e;

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

    font-weight: 300;

    line-height: 1.8;

}



img {

    width: 100%;

    display: block;

}



h1,
h2,
h3 {

    font-family: 'Cormorant Garamond', serif;

    font-weight: 500;

    letter-spacing: 1px;

}



h2 {

    font-size: clamp(38px, 5vw, 55px);

    margin-bottom: 35px;

}



p {

    font-size: 17px;    

}





/* =========================
   ГЛАВНЫЙ ЭКРАН
========================= */


.hero {

    height: 100vh;

    min-height: 650px;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

}



.hero-image {

    position: absolute;

    inset: 0;

    height: 100%;

    object-fit: cover;

}



.hero-overlay {

    position: absolute;

    inset: 0;

    background:

    linear-gradient(

        rgba(40,30,20,0.35),

        rgba(40,30,20,0.55)

    );

}



.hero-content {

    position: relative;

    z-index: 2;

    color: white;

    padding: 30px;

}



.hero-date {

    font-size: 18px;

    letter-spacing: 5px;

    text-transform: uppercase;

}



h1 {

    margin: 25px 0;

    font-size: clamp(65px, 10vw, 120px);

    line-height: 0.9;

}



h1 span {

    font-weight: 300;

    padding: 0 15px;

}



.hero-text {

    font-size: 20px;

}



.scroll-icon {

    margin-top: 80px;

    font-size: 35px;

    animation: scrollMove 2s infinite;

}



@keyframes scrollMove {


    50% {

        transform: translateY(12px);

    }

}





/* =========================
   ОБЩИЕ СЕКЦИИ
========================= */


.section {

    max-width: 950px;

    margin: auto;

    padding: 100px 25px;

    text-align: center;

}



.invitation {

    padding-top: 120px;

}





/* =========================
   ФОТО КАРТОЧКИ
========================= */


.photo-card {

    max-width: 900px;

    margin: 40px auto;

    padding: 0 25px;

}



.photo-card img {

    height: 600px;

    object-fit: cover;

    border-radius: 25px;


    box-shadow:

    0 25px 60px rgba(80,60,40,0.15);

}





/* =========================
   ДАТА И КАРТОЧКИ
========================= */


.date-section {

    background:

    linear-gradient(

    135deg,

    #eee2d2,

    #f8f0e4

    );



    max-width: none;

}



.info-card {


    max-width: 600px;

    margin: auto;

    padding: 50px 35px;

    background:

    rgba(255,255,255,0.65);


    border-radius: 30px;


    box-shadow:

    0 20px 50px rgba(70,50,30,0.08);

}



.info-card h3 {

    font-size: 45px;

}



.date-number {


    font-family:

    'Cormorant Garamond', serif;


    font-size: 60px;

}



.time {


    font-family:

    'Cormorant Garamond', serif;


    font-size: 75px;


    color:#a88652;

}





/* =========================
   КНОПКА
========================= */


.button {


    display:inline-block;


    margin-top: 10px;


    padding:15px 45px;


    background:#a88652;


    color:white;


    text-decoration:none;


    border-radius:50px;


    transition:0.4s;


}



.button:hover {


    transform:translateY(-4px);


    background:#8e6e3e;


}





/* =========================
   БЛОК КАРТИНКА + ТЕКСТ
========================= */


.split-section {


    display:grid;


    grid-template-columns:1fr 1fr;


    align-items:center;


    gap:60px;


    max-width:1100px;


    margin:10px auto;


    padding:0 20px;


}



.split-image img {


    height:650px;


    object-fit:cover;


    border-radius:30px;


}



.split-text {


    text-align:center;


}





/* =========================
   ФИНАЛ
========================= */


.final {


    height:800px;


    position:relative;


    overflow:hidden;


}



.final img {


    height:100%;


    object-fit:cover;


}



.final-overlay {


    position:absolute;


    inset:0;


    display:flex;


    flex-direction:column;


    justify-content:center;


    align-items:center;


    text-align:center;


    padding:20px;


    color:white;


    background:


    rgba(40,30,20,0.45);


}



.final h2 {


    font-size:70px;


}



.final h3 {


    font-size:60px;


    color:#e2c58c;


}





footer {


    padding:20px;


    text-align:center;


    background:#eee2d2;


}





/* =========================
   АНИМАЦИИ
========================= */


.reveal {


    opacity:0;


    transform:translateY(60px);


    transition:

    opacity 1s ease,

    transform 1s ease;


}



.reveal.active {


    opacity:1;


    transform:translateY(0);


}





/* =========================
   МОБИЛЬНАЯ ВЕРСИЯ
========================= */


@media(max-width:700px){



.hero {

    height:100vh;

}



h1 {

    font-size: 65px;

}



.hero-date {

    font-size:14px;

    letter-spacing:5px;

}



.hero-text {

    font-size:16px;

}



.section {

    padding:20px 20px;

}



.photo-card img {

    height:450px;

}



.info-card {

    padding:20px 20px;

}



.date-number {

    font-size:45px;

}



.time {

    font-size:60px;

}



.split-section {


    display:flex;

    flex-direction:column;


}



.split-image img {

    height:450px;

}



.final {


    height:650px;

}



.final h2 {

    font-size:50px;

}



.final h3 {

    font-size:45px;

}



.hero h1 {
    font-size: 38px;
    white-space: nowrap;
}

.hero-text {
    margin-left: 17px;
}

.section {
    margin-left: 20px;
    margin-right: 20px;
}

}



.names-nowrap {
    white-space: nowrap;
}