/* ==========================================================
   DESKTOP.CSS
   Версия для компьютеров
========================================================== */

html,
body{

    margin:0;
    padding:0;

    width:100%;
    min-height:100%;

    overflow-x:hidden;

    background:#f4ede4;
}

html{

    scrollbar-width:none;        /* Firefox */

    -ms-overflow-style:none;     /* старые Edge/IE */

}

html::-webkit-scrollbar{

    display:none;                /* Chrome, Safari, новый Edge */

    width:0;

    height:0;

}


/* ==========================================================
   ФОН СТРАНИЦЫ
========================================================== */

body::before{

    content:"";

    position:fixed;

    inset:0;

    z-index:-2;

    background:
        radial-gradient(circle at top,#e1c79f 0%,#dbc19e 45%,#d4bda0 100%);
}


/* ==========================================================
   ЦЕНТРОВКА
========================================================== */

body{

    display:flex;

    justify-content:center;

    align-items:flex-start;
}


/* ==========================================================
   ЛЕНТА САЙТА
========================================================== */

#wrapper{

    position:relative;

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

    margin:0 auto;

    overflow:hidden;

    background:#f7eee1;

    box-shadow:
        0 20px 50px rgba(0,0,0,.10),
        0 45px 120px rgba(0,0,0,.08);
}


/* ==========================================================
   СЕКЦИИ
========================================================== */

.section{

    width:100%;

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

    position:relative;

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:center;
}



/* ==========================================================
   ОБЩИЕ КАРТИНКИ
========================================================== */

.section-bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    filter: sepia(0.06) saturate(1.05) hue-rotate(-2deg);

    display:block;

        -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0,
        rgba(0,0,0,.9) 80px,
        #000 150px,
        #000 calc(100% - 150px),
        rgba(0,0,0,.7) calc(100% - 80px),
        transparent 100%
    );

    mask-image: linear-gradient(
        to bottom,
        transparent 0,
        rgba(0,0,0,.9) 80px,
        #000 150px,
        #000 calc(100% - 150px),
        rgba(0,0,0,.7) calc(100% - 80px),
        transparent 100%
    );
}


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


.hero{

    min-height: max(1000px, 100vh);
}

.hero .section-bg{
    top: -25px;
    height: calc(100% + 25px);

    object-fit: cover;
    object-position: center top;

        -webkit-mask-image: linear-gradient(
        to bottom,
        #000 0,
        #000 calc(100% - 150px),
        rgba(0,0,0,.7) calc(100% - 80px),
        transparent 100%
    );

    mask-image: linear-gradient(
        to bottom,
        #000 0,
        #000 calc(100% - 150px),
        rgba(0,0,0,.7) calc(100% - 80px),
        transparent 100%
    );
}

/* Приветствие */
.hero-dear{

    position: relative;

    top: 10px;          /* вверх / вниз */
    left: 0px;         /* влево / вправо */

    font-size: 28px;   /* размер */
    line-height: 1.2;  /* высота строки */

    max-width: 100%;   /* ширина */
    text-align: center;
}


/* Основной текст */
.hero-text{

    position: relative;

    top: 80px;          /* вверх / вниз */
    left: 0px;         /* влево / вправо */

    font-size: 21px;   /* размер */
    line-height: 1.38; /* высота строки */

    max-width: 800px;  /* ширина блока */

    text-align: center;
}


/* ==========================================================
   БАНКЕТ
========================================================== */


.banquet{

    min-height: max(900px, 100vh);
}

.banquet .section-bg{

    --lift: -10px; /* поднять/опустить картинку*/

    top: calc(10px - var(--lift));

    height: calc(100% - 10px + var(--lift));

    object-fit:cover;

    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent var(--lift),
        rgba(0,0,0,.9) calc(80px + var(--lift)),
        #000 calc(150px + var(--lift)),
        #000 calc(100% - 150px),
        rgba(0,0,0,.7) calc(100% - 80px),
        transparent 100%
    );

    mask-image: linear-gradient(
        to bottom,
        transparent var(--lift),
        rgba(0,0,0,.9) calc(80px + var(--lift)),
        #000 calc(150px + var(--lift)),
        #000 calc(100% - 150px),
        rgba(0,0,0,.7) calc(100% - 80px),
        transparent 100%
    );

}

/* Заголовок */
.banquet h2{

    position: relative;

    top: -220px;          /* вверх / вниз */
    left: 0px;         /* влево / вправо */

    font-size: 55px;   /* размер */
    line-height: 1;

    text-align: center;
}


/* Дата */
.banquet .date{

    position: relative;

    top: -210px;
    left: 0px;

    font-size: 19px;
    line-height: 1.2;

    text-align: center;
}


/* Время */
.banquet .time{

    position: relative;

    top: -210px;
    left: 0px;

    font-size: 34px;
    line-height: 1;

    text-align: center;
}


/* Адрес */
.banquet .description{

    position: relative;

    top: -210px;
    left: 0px;

    font-size: 22px;
    line-height: 1.4;

    max-width: 500px;

    text-align: center;
}


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

.rsvp{

    min-height: max(900px, 100vh);
}

.rsvp .section-bg{
    --lift: 90px; /* поднять/опустить картинку*/
}

.rsvp-title{

    top: calc(60px + 0px);   /* было 40px, добавьте свою дельту вместо 0px */

    font-size: calc(45px + 0px);   /* было 45px */
}

/* Текст "Будем рады получить ваш ответ" */
.rsvp-text{

    top: calc(-170px + 0px);   /* было -120px */

    left: 0px;

    font-size: calc(27px + 0px);   /* было 25px */
}

/* Кнопка "Подтвердить" (первый экран) */
.rsvp-button{

    top: calc(-65px + 0px);   /* было -50px */

    left: 0px;

    font-size: calc(30px + 0px);          /* было 24px */
    padding: calc(16px + 0px) calc(35px + 0px);   /* было 16px 35px */
}

/* Кнопка "К сожалению, не смогу" */
.rsvp-decline{

    top: calc(-45px + 0px);   /* было -30px */

    left: 0px;

    font-size: calc(19px + 0px);          /* было 15px */
    padding: calc(15px + 0px);            /* было 15px со всех сторон */
}

/* Текст "Мероприятие 14+" */
.hero-age{

    top: calc(70px + 0px);   /* было 45px */

    left: 0px;

    font-size: calc(14px + 0px);   /* было 13px */
}

/* Заголовок "Укажите, пожалуйста, количество гостей" (второй экран) */
.overlay-title{

    top: calc(192px + 0px);   /* было 180px */

    font-size: calc(28px + 0px);   /* было 28px */
}

/* Поле с числом гостей (сама цифра) */
#guest-value{

    top: calc(-2px + 0px);   /* было -2px */

    left: 0px;

    font-size: calc(25px + 0px);   /* было 25px */
}

/* Оболочка (рамка) строки с цифрой гостей */
.guest-input{

    width: calc(245px + 0px);    /* было 245px */
    height: calc(54px + 0px);    /* было 54px */

    border-radius: calc(14px + 0px);   /* было 14px */

    padding: 0 calc(14px + 0px);   /* было 0 14px */

    border-left-width: calc(1.95px + -1px);   /* было 1.95px */

    border-right-width: calc(1.5px + 0px);   /* было 1.5px */
}

/* Кнопки-цифры 1 2 3 4 */
.guest-buttons button{

    top: calc(-30px + 0px);   /* было -30px */

    left: 0px;

    width: calc(52px + 0px);    /* было 52px */
    height: calc(52px + 0px);   /* было 52px */
    font-size: calc(22px + 0px);   /* было 22px */
}

/* Кнопка "Подтвердить" (второй экран, с количеством гостей) */
.guest-confirm{

    top: calc(-17px + 0px);   /* было -17px */

    width: calc(220px + 0px);    /* было 220px */
    height: calc(52px + 0px);    /* было 52px */
    font-size: calc(22px + 0px);   /* было 22px */
}

/* Ссылка "← Вернуться назад"*/
.guest-back{

    position: absolute;

    bottom: 290px;   /* стартовое значение — подгоните под уровень "Мероприятие 14+" */

    left: 50%;
    transform: translateX(-50%);

    font-size: calc(18px + 0px);   /* было 18px */
}

/*2. Если планы изменятся, вы всегда можете пройти опрос заново, обновив страницу*/
.rsvp-decline-success p {

    position: absolute;

    top: 350px;

    left: 50%;

    transform: translateX(-50%);

    width: 90%;

    font-family: 'Cormorant Garamond', serif;

    font-size: 24px;

    line-height: 1.3;

    color: #b59573;

    text-align: center;
}

/* Экран успеха (после подтверждения количества гостей) */

/* "Мы счастливы, что вы разделите этот день с нами!" */
.rsvp-success p{

    top: calc(320px + 0px);   /* было 260px */

    font-size: calc(31px + 0px);   /* было 31px */
}

/* 1. "Если планы изменятся..."  */
.rsvp-change-note{

    top: calc(530px + 0px) !important;   /* было 450px */

    font-size: calc(17px + 0px) !important;   /* было 15px */
}

/* ==========================================================
   DRESS CODE
========================================================== */

.dresscode{

    min-height: max(1250px, 100vh);
}

.dresscode .section-bg{

    top:110px;

    height:calc(70% + 150px);

    object-fit:cover;
}

/* Заголовок */
.dresscode-title{

    position: relative;

    top: -420px;
    left: 0px;

    font-size: 54px;
    line-height: 1;

    max-width: 100%;

    text-align: center;
}


/* Текст под заголовком */
.dresscode-text{

    position: relative;

    top: 585px;
    left: 0px;

    font-size: 21px;
    line-height: 1.2;

    max-width: 420px;

    text-align: center;
}


/* Женская палитра */
.women-palette{

    position: relative;

    top: -455px;
    left: 0px;

    font-size: 26px;
    line-height: 1.1;

    text-align: center;
}


/* Мужская палитра */
.men-palette{

    position: relative;

    top: -162px;
    left: 0px;

    font-size: 26px;
    line-height: 1.1;

    text-align: center;
}


/* ==========================================================
   FINAL
========================================================== */

.final{

    margin-top: 10px;/*добавляет/убирает вверху картинки*/

}
.final .section-bg{

    bottom: -150px;/*добавляет/убирает внизу картинки*/
    top: auto;

    height: calc(100% + 60px);

    object-fit: cover;
    object-position: center bottom;
}

/* Заголовок */
.countdown-title{

    position: relative;

    top: -70px;
    left: 0px;

    font-size: 42px;
    line-height: 1;

    max-width: 100%;

    text-align: center;
}


/* Весь таймер */
.countdown{

    position: relative;

    top: 0px;
    left: 0px;

    gap: 18px;
}


/* Один блок (дни / часы / минуты / секунды) */
.countdown-item{

    position: relative;

    top: -300px;
    left: 0px;
}


/* Цифры */
.countdown-item span{

    font-size: 47px;

    line-height: 1;
}


/* Подписи */
.countdown-item p{

    font-size: 17px;

    line-height: 1.2;

    margin-top: 6px;
}

#intro{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

    background-image:url('./images/10.jpg');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

#intro-back,
#intro-front{

    display:none;
}

body{

    background-image:url('./images/11.jpg');
    background-size:cover;
    background-position:center top;
    background-attachment:fixed;
    background-repeat:no-repeat;
}


/* ==========================================================
   СВЕЧЕНИЕ
========================================================== */

#wrapper::before{

    content:"";

    position:absolute;

    inset:-25px;

    z-index:-1;

    background:rgba(255,255,255,.32);

    filter:blur(35px);
}

/* ==========================================================
   АНИМАЦИЯ ТЕКСТА ПРИ СКРОЛЛЕ (общая для всех версий сайта)
   .fade-up — прозрачность + лёгкое всплытие снизу.
   .fade-in — только прозрачность, без transform (для элементов,
   которые уже используют transform для центрирования —
   например .rsvp-title, .guest-back — чтобы не конфликтовать).
   Класс .fade-visible добавляется через script.js (IntersectionObserver)
   в момент, когда элемент появляется в области видимости.
========================================================== */

.fade-up{

    opacity: 0;
    transform: translateY(30px);

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

}

.fade-up.fade-visible{

    opacity: 1;
    transform: translateY(0);

}

.fade-in{

    opacity: 0;

    transition: opacity 0.8s ease;

}

.fade-in.fade-visible{

    opacity: 1;

}


/* Появление блока с таймером (FINAL) — медленнее, чем у
   остальных элементов (там 0.8s, здесь дольше) */
.countdown-title.fade-up,
.countdown-item.fade-up{

    transition-duration: 1.8s;

}


/* .rsvp-title: у него есть свой transform:translateX(-50%)
   для центрирования — объединяем его со сдвигом всплытия
   в одно значение, чтобы центровка не сломалась и заголовок
   тоже поднимался снизу вверх, как остальные элементы */
.rsvp-title.fade-in{

    transform: translateX(-50%) translateY(30px);

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

}

.rsvp-title.fade-in.fade-visible{

    transform: translateX(-50%) translateY(0);

}


/* ==========================================================
   "ПИСЬМО ОТ РУКИ" — анимация появления текста из guests.json
   Текст проявляется слева направо (clip-path) с лёгким
   размытием, уходящим в резкость — имитация письма пером.
   inline-block нужен, чтобы clip-path следовал точно за
   шириной самого текста, а не всей строки-родителя.
========================================================== */

.write-in{

    display: inline-block;

    clip-path: inset(0 100% 0 0);

    filter: blur(3px);

    transition:
        clip-path 2.6s cubic-bezier(.65,0,.35,1),
        filter 2.2s ease;

}

.write-in.write-in-visible{

    clip-path: inset(0 0% 0 0);

    filter: blur(0);

}