/* style.css */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* цвет перехода*/
html,
body {
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    overflow-x: clip;
    overflow-x: hidden;
    background: #f7eee1;
}

#wrapper {
    width: 100%;
    overflow-x: hidden;
}

#wrapper,
.section,
.section-bg,
#intro,
#intro-front,
#intro-back {

    max-width: 100vw;
    overflow-x: clip;
}

/* SECTIONS */

.section {

    position: relative;

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

    left: 0;
    right: 0;

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

    overflow: hidden;

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

.section {
    overflow: hidden;
}

.section-bg {
    position: absolute;

    top: 0;
    left: 0;

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

    height: 100%;

    object-fit: cover;

    display: block;

    /* плавная прозрачность сверху и снизу */
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0,
        rgba(0,0,0,.85) 80px,
        #000 150px,
        #000 calc(100% - 150px),
        rgba(0,0,0,.65) calc(100% - 80px),
        transparent 100%
    );

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

.hero .section-bg {

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

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

.final .section-bg {

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

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

.content {
    position: relative;
    z-index: 1;
}

/* HERO */

.hero {

    padding:
    40px
    30px
    120px;

}

/* ВСЕ ОСТАЛЬНЫЕ БЛОКИ */

.banquet,
.dresscode,
.final {

    padding:
    10px
    30px
    140px;
}
/*увеличить отступ над блоком таймера*/
.final {
    margin-top: 100px;
}

/* BANQUET */

.banquet {

    font-family: 'Cormorant Garamond', serif;

    color: #b59573d2;
}

.banquet h2 {

    position: relative;

    top: -195px;

    font-size: 54px;
}

.banquet .date {
    position: relative;
    font-size: 20px;
    font-family: 'Bodoni Moda', serif;
    top: -190px;
    color: #9d8163;
}

.banquet .time {
    position: relative;
    font-size: 35px;
    font-family: 'Bodoni Moda', serif;
    top: -195px;
    color: rgb(167, 141, 114);
}

.banquet .description {
    position: relative;
    font-family: 'EB Garamond', serif;
    top: -190px;
    font-size: 23px;
    color: rgb(153, 130, 105);
}

.banquet .section-bg {

    position: absolute;

    top: 80px;      /* увеличивай: 80px, 100px, 120px... */

    height: calc(100% - 80px);

    object-fit: cover;
}

/* CONTENT */

.content {

    max-width: 340px;

    animation:
        fadeUp 3s ease;
}

.banquet .content,
.dresscode .content,
.final .content {

    width: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;
}

/* HERO TYPOGRAPHY */

.hero-content {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    padding-top: 10px;

    padding-bottom: 40px;
}

.hero-names {

    position: relative;

    top: -60px;

    font-family: 'Great Vibes', cursive;

    font-size: 88px;

    line-height: 0.84;

    font-weight: 400;

    margin-bottom: 26px;

    color: #f1dfca;

    text-shadow:
        0 4px 18px rgba(74, 44, 2, 0.25);
}

.fancy-a {

    font-family: 'Alex Brush', cursive;

    font-size: 1.2em;

    line-height: 0;

    position: relative;

    top: 18px;

    left: -10px;

    z-index: 2;
}

.ampersand {

    font-size: 0.55em;

    position: relative;

    top: -8px;
}

/*.hero-dear {

    position: relative;

    top: 10px;

    font-family: 'EB Garamond', serif !important;
    font-style: italic;
    font-weight: 400;

    font-style: italic;

    font-size: 25px;

    line-height: 1.2;

    font-weight: 400;

    letter-spacing: 0.5px;

    margin-bottom: 0;

    color: #b0916f;

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

    text-align: center;

    margin-left: auto;
    margin-right: auto;

}*/
.hero-dear {

    position: relative;
    top: 10px;

    font-family: 'EB Garamond', serif !important;
    font-style: italic;
    font-weight: 400;

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

    letter-spacing: .5px;

    color: #b0916f;

    text-align: center;
}

#hero-dear {
    opacity: 0;
    transition: opacity .35s ease;
}

.hero-text {

    font-family: 'EB Garamond', serif !important;
    font-style: italic;
    font-weight: 400;
    

    position: relative;

    top: 52px;
        
    font-size: 19px;

    line-height: 1.38;

    font-weight: 300;

    max-width: 500px;

    text-align: center;

    color: #896c3e; 

    margin-bottom: 90px;
}

.hero-date {

    font-family:
        'Bodoni Moda',
        serif;

    font-size: 35px;

    letter-spacing: 2px;

    line-height: 1.15;

    font-weight: 300;

    color: #efd5b8;
}

.date {

    font-size: 14px;

    letter-spacing: 4px;

    text-transform: uppercase;

    margin-bottom: 20px;
}

h1 {

    font-size: 58px;

    line-height: 0.9;

    font-weight: 400;

    margin-bottom: 24px;
}

h2 {

    font-size: 52px;

    line-height: 1;

    font-weight: 400;

    margin-bottom: 24px;
}

.description {

    font-size: 24px;

    line-height: 1.4;
}

.time {

    font-size: 42px;

    margin-bottom: 16px;
}


/* ANIMATION */

@keyframes fadeUp {

    from {

        opacity: 0;

        transform:
            translateY(40px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}

.place-link {

    color: inherit;

    text-decoration: none;
}

.place-link span {

    border-bottom: 1px solid rgba(186, 159, 126, 0.7);

    padding-bottom: 2px;
}

.place-link:active,
.place-link:hover {

    opacity: 0.8;
}

/* RSVP BLOCK */

.rsvp {

    color: white;
    /*text-shadow:
    0 2px 10px rgba(0,0,0,0.35);*/
}

/* 1 ЛИСТ */

.rsvp-content {

    width: 100%;

    max-width: 340px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 11.6px;

    transform: translateY(-40px);

    padding-top: 70px;

    padding-bottom: 0px;
}

/*Подтвердите присутствие*/
.rsvp-title {

    font-family: 'Cormorant Garamond', serif;

    font-size: 45px;

position: absolute;
top: 40px;
left: 50%;
transform: translateX(-50%);
z-index: 100;

    width: 100%;
    text-align: center;

    line-height: 0.85;

    font-weight: 400;

    color: #b59573d2;

    margin-bottom: 0px;

    /*text-shadow:
    0 2px 10px rgba(0,0,0,0.3);*/
}

/*Будем рады*/
.rsvp-text {

    font-family: 'Cormorant Garamond', serif;

    font-size: 25px;

    position: relative;

    top: -140px;

    line-height: 1.1;

    width: 100%;
    text-align: center;

    color: #b5997c;

    margin-bottom: 0px;

    /*text-shadow:
    0 2px 10px rgba(0,0,0,0.4);*/
}

/*Подтвердить первая*/
.rsvp-button {

    /*margin-top: 40px;*/

    position: relative;

    top: -50px;

    display: block;
    margin-left: auto;
    margin-right: auto;

    border: none;

    background: #8f7666;

    color: rgb(255, 255, 255);

    padding: 16px 35px 16px 35px;

    border-radius: 999px;

    font-family: 'Cormorant Garamond', serif;

    font-size: 24px;

    letter-spacing: 0.5px;

    cursor: pointer;

    transition: 0.25s;
}

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

    position: relative;

    top: -30px;

    display: block;
    margin-left: auto;
    margin-right: auto;
    

    width: fit-content;
    min-width: 0;

    padding: 15px 15px 15px 15px;   /* регулирует расстояние от текста до края */

    height: auto;

    background: transparent;

    border: 1.5px solid #b79b88;

    border-radius: 999px;

    color: #b79b88;

    font-family: 'Cormorant Garamond', serif;

    font-size: 15px;

    cursor: pointer;

    text-decoration: none;

    transition: .25s;
}

.rsvp-decline:hover {

    background: rgba(183, 155, 136, 0.08);
}

.hero-age {

    font-family:
        'Playfair Display', serif;

    font-size: 13px;

    letter-spacing: 2px;

    width: 100%;
    text-align: center;

    line-height: 1.15;

    font-weight: 300;

    position: relative;
    top: 45px;

    color: #a98e7a;
}

/* DRESS CODE */

.dresscode {

    color: #b59573d2;

    overflow: visible;
}

.dresscode-title {

    position: relative;

    top: -250px;

    font-family: 'Cormorant Garamond', serif;

    font-size: 54px;

    font-weight: 400;

    text-align: center;

    color: #b59573d2;
}

.dresscode-text {

    position: relative;

    top:535px;

    z-index: 100;

    max-width: 310px;

    text-align: center;

    font-family: 'Cormorant Garamond', serif;

    font-size: 20px;

    line-height: 1.2;

    color: #b7a087;
}

.women-palette {

    position: relative;
    top: -290px;

    font-family: 'Cormorant Garamond', serif;
    font-size: 26px;
    color: #b59573d2;

    text-align: center;
}

.men-palette {

    position: relative;
    top: -79px;

    font-family: 'Cormorant Garamond', serif;
    font-size: 26px;
    color: #b59573d2;

    text-align: center;
}

.dresscode .section-bg {

    position: absolute;

    top: 50px;      /* увеличивай: 80px, 100px, 120px... */

    height: calc(100% - 1px);

    object-fit: cover;
}

/* ЭКРАН ТАЙМЕРА */

.countdown-title {

    font-family: 'Cormorant Garamond', serif;

    text-align: center;

    font-size: 42px;

    line-height: 1.0;

    color: #b59573d2;

    margin-bottom: 270px;

    font-weight: 400;
}

.countdown {

    display: flex;

    justify-content: center;

    gap: 18px;

    position: relative;
    top: -220px;   /* меняй значение */
}

.countdown-item {

    display: flex;

    flex-direction: column;

    align-items: center;
}

.countdown-item span {

    font-family: 'Cormorant Garamond', serif;

    font-size: 42px;

    color: #ac937ae0;

    line-height: 1;
}

.countdown-item p {

    font-size: 16px;

    color: rgb(197, 176, 155);

    margin-top: 6px;
}

.final .section-bg {
    position: absolute;
    top: 80px;                 /* опускает картинку вниз */
    height: calc(100% - 40px); /* сохраняет нижний край на месте */
    object-fit: cover;
}

/* LETTER */

/* ЗАСТАВКА */

#intro {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100vh;

    z-index: 99999;

    background: #f7eee1;

    display: flex;

    justify-content: center;

    align-items: center;

}

#intro-back,
#intro-front {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}

#intro-back {

    z-index: 1;

}

#intro-front {

    z-index: 2;

}

#open-envelope {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    border: none;

    background: transparent;

    cursor: pointer;

    z-index: 100000;

    -webkit-tap-highlight-color: transparent;

}

#intro {

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

    transform: scale(1);
}

#intro.hide {

    opacity: 0;

    transform: none;

    visibility: hidden;

    pointer-events: none;
}

/* ВСПЛЫВАЮЩЕЕ УВЕДОМЛЕНИЕ */

#toast {

    position: fixed;

    top: 30px;

    left: 50%;

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

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

    color: #8f7666;

    padding: 10px 20px;

    border-radius: 999px;

    font-family: 'Cormorant Garamond', serif;

    font-size: 20px;

    box-shadow: 0 10px 30px rgba(0,0,0,.12);

    opacity: 0;

    pointer-events: none;

    transition: .35s;

    z-index: 9999;
}

#toast.show {

    opacity: 1;

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

/* TELEGRAM MINI BROWSER FIX */

@supports (-webkit-touch-callout: none) {

    body.telegram-fix .hero-content {

        padding-top: 110px;
    }

    body.telegram-fix .rsvp-content {

        transform: translateY(30px);
    }

    body.telegram-fix .rsvp-title {

        margin-top: 40px;
    }

    body.telegram-fix .final h2 {

        top: -110px;
    }

    body.telegram-fix .final .description {

        top: 120px;
    }

}

#next-step {

    margin-top: 10px;
}

body.telegram-fix .section {

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

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

    box-sizing: border-box;

    padding-top: 90px;
    padding-bottom: 90px;
}

body.telegram-fix .rsvp-content {

    transform: translateY(-1px);
}

body.telegram-fix .final h2 {

    top: -200px;
}

body.telegram-fix .final .description {

    color: rgb(220, 194, 172);

    top: 155px;

    font-size: 31px;

    line-height: 1.1;
}

/* ========================= */
/* SAFARI ONLY */
/* ========================= */

/*body.safari-fix .hero-names {
    top: 15px;
}

body.safari-fix .hero-dear {
    top: 27px;
}

body.safari-fix .hero-text {

    position: relative;

    top: 40px;
}

body.safari-fix .hero-date {

    position: relative;

    top: 30px;
}

body.safari-fix .hero-age {

    position: relative;

    top: 40px;
}*/

/* ========================= */
/* TELEGRAM ONLY */
/* ========================= */

/*body.telegram-fix .hero-names {
    top: -20px;
}

body.telegram-fix .hero-dear {
    top: -15px;
}

body.telegram-fix .hero-text {
    top: 0;
}

body.telegram-fix .hero-age {
    position: relative;

    top: 15px;
}

body.telegram-fix #intro {

    height: calc(100vh + 80px);

}*/
/* =======================================================
   RSVP OVERLAY
======================================================= */

.hidden {
    display: none !important;
}

/* Overlay */

.rsvp-overlay {

    position: absolute;

    inset: 0;

    z-index: 30;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    background: transparent;

    animation: fadeUp .50s ease forwards;

    transform: translateY(-10px);
}

/* Подзаголовок */

.overlay-title {

    position: absolute;

    top: 180px;

    max-width: 290px;

    text-align: center;

    font-family: 'Cormorant Garamond', serif;

    font-size: 28px;

    line-height: 1.15;

    color: #a4886b;

    margin-bottom: 28px;
}

/* Поле */

.guest-input {

    width: 245px;
    height: 54px;

    border-top: 1.5px solid #b79b88;
    border-right: 1.5px solid #b79b88;
    border-bottom: 1.5px solid #b79b88;
    border-left: 1.95px solid #b79b88;

    border-radius: 14px;

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

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

    padding: 0 14px;

    margin-bottom: 30px;

    position: relative;
    top: -15px;
}

#guest-value {

    font-family: "EB Garamond", serif !important;

    font-size: 25px;

    color: #8f7666;

    position: relative;
    top: -2px;    /* поднимет цифру */
}

/* Корзина */

.clear-guest {

    border: none;

    background: transparent;

    cursor: pointer;

    font-size: 22px;

    padding: 0;

    color: #b79b88;
    
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    user-select: none;

    transition: transform 0.12s ease, opacity 0.12s ease;
}

.clear-guest:focus,
.clear-guest:active,
.clear-guest:focus-visible {

    outline: none;
    background: transparent;
    box-shadow: none;
}
.clear-guest:active {

    transform: scale(0.9);
    opacity: 0.75;

}

/* Кнопки 1 2 3 4 */

.guest-buttons {

    display: flex;

    gap: 12px;

    margin-bottom: 26px;
}

.guest-buttons button {

    width: 52px;
    height: 52px;

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

    padding-top: 9px;

    border-radius: 14px;
    border: 1.5px solid #b79b88;
    background: transparent;
    color: #b79b88;
    font-family: "EB Garamond", serif !important;
    font-size: 22px;
    cursor: pointer;
    transition: .2s;

    position: relative;
    top: -30px;
}
/*
.guest-buttons button.one-btn {
    font-family: "EB Garamond", serif !important;
}
*/
.guest-buttons button.active {

    background: #8f7666;

    color: white;

    border-color: #8f7666;
}

/* Маленькая кнопка */

.guest-confirm {

    width: 220px;

    height: 52px;

    border: none;

    border-radius: 999px;

    background: #8f7666;

    color: white;

    font-family: 'Cormorant Garamond', serif;

    font-size: 22px;

    cursor: pointer;

    transition: .25s;

    margin-bottom: 16px;

    position: relative;
    top: -17px;
}

.guest-confirm:disabled {

    opacity: .45;

    cursor: default;
}

/* Вернуться */

.guest-back {

    border: none;

    background: transparent;

    color: #887366;

    font-family: 'Cormorant Garamond', serif;

    font-size: 18px;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    user-select: none;
}

.guest-back:focus,
.guest-back:active,
.guest-back:focus-visible {

    outline: none;
    background: transparent;
    box-shadow: none;
}

.clear-guest svg {
    position: relative;
    top: 3.5px;
}
/* Экран успеха */

.rsvp-success {

    position: absolute;

    inset: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 20;

    animation: fadeUp .50s ease;
}

.rsvp-success p {

    position: absolute;

    top: 280px;

    left: 50%;

    transform: translateX(-50%);

    width: 90%;

    font-family: 'Cormorant Garamond', serif;

    font-size: 31px;

    color: #b59573;

    text-align: center;
}

.rsvp-screen {

    position: relative;

    width: 100%;

    height: 100%;

}

.rsvp-title-step2 {

    position: absolute;

    top: 48px;

    left: 50%;

    transform: translateX(-50%);

    width: 100%;

    text-align: center;

    margin: 0;
}