/* ---------- RESET ---------- */

:root{

    --guest-size:52px;

    --small-size:18px;

    --body-size:20px;

    --timer-title:18px;

    --timer-size:34px;

}

:root{

    --location-width:94vw;
    --location-max-width:1700px;

    --location-padding:3.2%;
}

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

html{

    scroll-behavior:smooth;

}

body {
    background:#1e1416;
    color:#EBEBEB;
    font-family:"PT Serif", serif;
}

/* ===========================
   COMMON
=========================== */

.container{

    width:min(1400px,90%);

    margin:0 auto;

}

section{

    padding:220px 0;

}

.section-title{

    font-family:"Florisel";

    font-size:72px;

    text-align:center;

    color:#EBEBEB;

}

.section-subtitle{

    text-align:center;

    color:#EBEBEB;

    letter-spacing:4px;

    text-transform:uppercase;

}

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 48px;

    border:1px solid #EBEBEB;

    color:#EBEBEB;

    text-decoration:none;

    transition:.3s;

}

.btn:hover{

    background:#EBEBEB;

    color:#1e1416;

}
/* ---------- HERO ---------- */

.hero{

    position:relative;

    width:100%;

    min-height:100svh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}

.hero__video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;
    
    opacity:0;

    animation:fadeIn 2.5s ease forwards;

}

.hero__overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(0,0,0,.45),
        rgba(0,0,0,.55)
    );

}

.hero__content{

    position:relative;

    z-index:2;

    text-align:center;

    display:flex;

    flex-direction:column;

    align-items:center;

    max-width:900px;

    width:100%;

    padding:0 20px;

}

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

.hero__composition{

    position:relative;

    width:min(1100px,90vw);

    height:520px;

}
.hero__maxim,
.hero__and,
.hero__dinara{

    position:absolute;

    font-family:"Florisel";

    font-weight:normal;

    line-height:.9;

     opacity:0;

    transform:translateY(20px);

    animation:fadeUp 2.0s ease .5s forwards;

}

.hero__maxim{

   left:-70px;
   
   top:80px;

   font-size:260px;

}

.hero__and{

    left:340px;

    top:210px;
    
    font-size:150px;

}

.hero__dinara{

    right:0px;

    top:380px;

    font-size:260px;


}

.hero__date{

    margin-top:164px;

    font-family:"PT Serif";

    font-size:30px;

    letter-spacing:4px;

    text-transform:uppercase;

      opacity:0;

    transform:translateY(20px);

    animation:fadeUp 2.0s ease .8s forwards;

}

@keyframes fadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/* =========================
   INVITATION
========================= */

.invitation{

    position:relative;

    min-height:100vh;

    background:
        #241718
        url("../assets/images/invitation/velvet.jpg")
        center / cover
        no-repeat;

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

    overflow:hidden;

    opacity:0;

}

/* =========================
   PAPER
========================= */

.paper{

    position:relative;

    width:700px;
    height:940px;

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

    z-index:5;

    opacity:0;

    transform:translateY(20px);

}

.paper-bg{

    display:block;

    width:100%;

    user-select:none;
    pointer-events:none;

}

.paper-content{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

}

.invite-inner{

    font-family:"PT Serif", serif;

    display:flex;
    flex-direction:column;
    align-items:center;

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

    color:#3E1F18;

}

/* =========================
   TEXT
========================= */

.invite-small,
.guest-name,
.invite-text,
.timer-block{

    opacity:0;

}

.invite-small{

    font-size:20px;

    margin-top:0px;

    margin-bottom:70px;

}

.guest-name{

    font-family:"Florisel";

    font-size:78px;

    font-weight:400;

    line-height:1.0;

    max-width:420px;

    text-align:center;

    white-space:normal;

}

.invite-text{

    margin-top:50px;

    font-size:20px;

    line-height:1.2;

    text-align:center;

}

.timer-block{

    margin-top:80px;

    font-family:"PT Serif", serif;

    color:#3E1F18;

}

.timer-title{

    font-size:18px;

    letter-spacing:.12em;

    text-transform:uppercase;

    margin-bottom:30px;

}

.timer{

    display:flex;

    justify-content:center;

    gap:34px;

}

.timer-item{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.timer-item span{

    font-size:54px;

    line-height:1;

}

.timer-item small{

    margin-top:10px;

    font-size:13px;

    letter-spacing:.18em;

}

/* =========================
   BRANCHES
========================= */

.branch-top,
.branch-bottom{

    position:absolute;

    z-index:6;

    pointer-events:none;

    opacity:0;

    transform:translateY(20px);

}

.branch-top{

    top:-30px;

    right:-170px;

}

.branch-bottom{

    left:-200px;

    bottom:-250px;

    width:1300px;

}

/* =========================
   ANIMATION
========================= */

.invitation.show{

    animation:fadeIn 1.4s ease forwards;

}

.invitation.show .paper{

    animation:fadeUp 1.4s ease forwards;

}

.invitation.show .branch-top,
.invitation.show .branch-bottom{

    animation:fadeUp 1.8s ease 0.4s forwards;

}

.invitation.show .invite-small{

    animation:fadeIn 1.6s ease 0.4s forwards;

}

.invitation.show .guest-name{

    animation:fadeIn 2.0s ease 1.0s forwards;

}

.invitation.show .invite-text{

    animation:fadeIn 1.6s ease 1.6s forwards;

}

.invitation.show .timer-block{

    animation:fadeIn 1.6s ease 1.8s forwards;

}
/* ===========================
   LOCATION
=========================== */
.location{

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    background:
        url("../assets/images/location/texture.jpg")
        center
        center
        /cover
        no-repeat;

    opacity:0;

}

.location__frame{

    position:relative;

    width:min(88vw,1500px);

    aspect-ratio:16/10;

    background:
        url("../assets/images/location/frame.png")
        center
        center
        /100% 100%
        no-repeat;

    filter:drop-shadow(0 25px 45px rgba(0,0,0,.35));

    opacity:0;

}

.location__content{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:#EBEBEB;

}

.location__title,
.location__place,
.location__address,
.location__button{

    opacity:0;

    transform:translateY(20px);

}

.location__title{

    font-family:"Florisel";

    font-size:clamp(100px,9vw,150px);

    font-weight:400;

    line-height:.9;

    color:#EBEBEB;

    margin-bottom:50px;

}

.location__place{

    font-family:"PT Serif";

    font-size:30px;

    font-weight:500;

    letter-spacing:.03em;

    color:#EBEBEB;

    margin-bottom:16px;

}

.location__address{

    font-family:"PT Serif";

    font-size:20px;

    line-height:1.2;

    color:rgba(235,235,235,.85);

    margin-bottom:55px;

}

.location__button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 44px;

    border:none;

    border-radius:999px;

    background:#EBEBEB;

    color:#3E1F18;

    text-decoration:none;

    font-family:"PT Serif";

    font-size:18px;

    letter-spacing:.08em;

    margin-top:25px;

    cursor:pointer;

    transition:
        transform .35s ease,
        background .35s ease,
        box-shadow .35s ease;

}

.location__button:hover{

    background:#FFFFFF;

    transform:translateY(-3px) scale(1.03);

    box-shadow:0 8px 20px rgba(202, 186, 186, 0.35);

}

.location__button:active{

    transform:translateY(-1px) scale(.98);

}

/* ========================= */
/* Animation */
/* ========================= */

.location.show{

    animation:fadeIn 1.4s ease forwards;

}

.location.show .location__frame{

    animation:fadeIn 1.6s ease .4s forwards;

}

.location.show .location__title{

    animation:fadeUp 1.6s ease .8s forwards;

}

.location.show .location__place,
.location.show .location__address,
.location.show .location__button{

    animation:fadeUp 1.6s ease 1.2s forwards;

}

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

.dresscode{

    position:relative;

    background:#EBEBEB;

    overflow:visible;

    opacity:0;

    z-index:2;

}

.dresscode__container{

    width:min(1400px,90%);

    margin:0 auto;

    text-align:center;

    position:relative;

    z-index:5;

}

.dresscode__title{

    font-family:"PT Serif";

    font-size:75px;

    font-weight:100;

    color:#420B26;

    margin-top:0;

    margin-bottom:40px;

    opacity:0;

    transform:translateY(20px);

}

.dresscode__text{

    max-width:760px;

    margin:0 auto 80px;

    font-family:"PT Serif";

    font-size:20px;

    line-height:1.2;

    color:#420B26;

    opacity:0;

    transform:translateY(20px);

}

.dresscode__gallery{

    display:flex;

    justify-content:center;

    gap:60px;

    margin-top:70px;

}

.dresscode__card{

    width:min(560px,45vw);

    height:auto;

    display:block;

    margin-top:40px;

    opacity:0;

    transform:translateY(20px);

}

.dresscode__pin{

    position:absolute;

    left:56%;
    top:10px;

    width:400px;

    pointer-events:none;

    opacity:0;

    transform:translate(110%,20px);

}

/* ========================= */
/* Animation */
/* ========================= */

.dresscode.show{

    animation:fadeIn 1.4s ease forwards;

}

.dresscode.show .dresscode__title{

    animation:fadeUp 1.6s ease .4s forwards;

}

.dresscode.show .dresscode__pin,
.dresscode.show .dresscode__text{

    animation:fadeUp 1.6s ease .8s forwards;

}

.dresscode.show .dresscode__card{

    animation:fadeUp 1.6s ease 1.2s forwards;

}
/* ===========================
   TIMELINE
=========================== */
.timeline{

    position:relative;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:visible;

    background:
        url("../assets/images/timeline/purple-timing.jpg")
        center
        center
        /cover
        no-repeat;

    opacity:0;

}

.timeline__content{

    position:relative;

    z-index:5;

    text-align:center;

    color:#EBEBEB;

}

.timeline__title,
.timeline__date,
.timeline__list{

    opacity:0;

    transform:translateY(20px);

}

.timeline__bird{

    position:absolute;

    left:45%;

    top:62%;

    width:clamp(180px,16vw,300px);

    z-index:50;

    pointer-events:none;

    opacity:0;

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

}
.timeline__title{

    font-family:"Florisel";

    font-size:130px;

    font-weight:400;

    margin-bottom:50px;

}

.timeline__date{

    font-family:"PT Serif";

    font-size:35px;

    font-weight:400;

    margin-bottom:60px;

}

.timeline__list{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:45px;

}

.timeline__item{

    font-family:"PT Serif";

    font-size:24px;

    font-weight:200;

    color:#EBEBEB;

    letter-spacing:.2px;

}

.timeline__time{

    text-align:right;

}

.timeline__line{

    text-align:center;

}

.timeline__event{

    text-align:left;

}


/* ========================= */
/* Animation */
/* ========================= */

.timeline.show{

    animation:fadeIn 1.4s ease forwards;

}

.timeline.show .timeline__title,
.timeline.show .timeline__date,
.timeline.show .timeline__list{

    animation:fadeUp 1.6s ease .4s forwards;

}

.timeline.show .timeline__bird{

    animation:
        birdAppear 1.8s cubic-bezier(.22,1,.36,1) .8s forwards,
        birdFloat 8s ease-in-out 2.6s infinite;

}

@keyframes birdAppear{

    from{

        opacity:0;

        transform:
            translate(calc(-175% + 35px),calc(-50% + 20px))
            rotate(-2deg);

    }

    to{

        opacity:1;

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

    }

}

@keyframes birdFloat{

    0%{

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

    }

    50%{

        transform:
            translate(-175%,calc(-50% - 8px))
            rotate(-3deg);

    }

    100%{

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

    }

}
/* ===========================
   DETAILS
=========================== */

.details{

    position:relative;

    min-height:160vh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:visible;

    background:#420B26;

}

.details__content{

    position:relative;

    width:1280px;

    display:flex;

    flex-direction:column;

    align-items:center;

    z-index:5;

    opacity:0;

}

.details__title{

    font-family:"Florisel";

    font-size:clamp(70px,7vw,120px);

    font-weight:400;

    color:#EBEBEB;

    margin-bottom:40px;

}

.details__cards{

    position:relative;

    width:1280px;

    height:1320px;

}

/* ---------- CARD ---------- */

.details__card{

    position:absolute;

    width:560px;

    aspect-ratio:1.33;

    filter:drop-shadow(0 18px 32px rgba(0,0,0,.22));

}

.details__card-bg{

    width:100%;

    display:block;

    user-select:none;

    pointer-events:none;

}

/* ---------- TEXT ---------- */

.details__card-content{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:58px;

    box-sizing:border-box;

    text-align:center;

    transform:translateY(-25px);

}

.details__card-title{

    font-family:"PT Serif";

    font-size:42px;

    font-weight:400;

    color:#3E1F18;

    line-height:1.1;

    margin:0 0 18px;

}

.details__card-text{

    font-family:"PT Serif";

    font-size:24px;

    line-height:1.2;

    color:#3E1F18;

    margin:0;

}

/* ---------- POSITION ---------- */

.details__card--1{

    top:120px;

    left:60px;

    transform:rotate(-10deg);

    z-index:2;

}

.details__card--2{

    top:360px;

    right:60px;

    transform:rotate(7deg);

    z-index:3;

}

.details__card--3{

    top:720px;

    left:30px;

    transform:rotate(0deg);

    z-index:2;

}

.details__card--4{

    top:980px;

    right:80px;

    transform:rotate(11deg);

    z-index:1;

}
/* ---------- HOVER ---------- */

.details__card{

    transition:
        transform .45s cubic-bezier(.22,1,.36,1),
        filter .35s ease;

}

.details__card:hover{

    filter:brightness(1.05);

}

.details__card--1:hover{

    transform:rotate(-7deg) translateY(-10px);

}

.details__card--2:hover{

    transform:rotate(9deg) translateY(-10px);

}

.details__card--3:hover{

    transform:rotate(2deg) translateY(-10px);

}

.details__card--4:hover{

    transform:rotate(13deg) translateY(-10px);

}
/* ===========================
   BUTTERFLY
=========================== */

.details__butterfly{

    position:absolute;

    left:74%;
    top:630px;

    width:210px;

    z-index:20;

    pointer-events:none;

    opacity:0;

    transform:translate(110%,0);

}

/* ========================= */
/* Animation */
/* ========================= */

.details__title,
.details__cards,
.details__butterfly{

    opacity:0;

}

.details.show .details__content{

    animation:fadeIn 1.4s ease forwards;

}

.details.show .details__title{

    animation:fadeUp 1.4s ease .4s forwards;

}

.details.show .details__cards{

    animation:fadeUp 1.4s ease .8s forwards;

}

.details.show .details__butterfly{

    animation:
        butterflyAppear 1.4s ease 1.2s forwards,
        butterfly 5s ease-in-out 2.6s infinite;

}

@keyframes butterflyAppear{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ===========================
   BUTTERFLY ANIMATION
=========================== */

@keyframes butterfly{

    0%{

        transform:
            translateY(0)
            rotate(0deg);

    }

    50%{

        transform:
            translateY(-8px)
            rotate(-3deg);

    }

    100%{

        transform:
            translateY(0)
            rotate(0deg);

    }

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

.rsvp{

    background:#420B26;

    padding:40px 0 220px;

    overflow:hidden;

}

.rsvp__wrapper{

    position:relative;

    width:1280px;

    margin:0 auto;

}
.rsvp__image{

    width:100%;

    display:block;

    filter:drop-shadow(0 40px 70px rgba(0,0,0,.28));

}

.rsvp__sheet{

    position:absolute;

    left:240px;
    top:330px;

    width:700px;

    transform:rotate(-15deg);

    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;

}

/* ========================= */
/* Text */
/* ========================= */

.rsvp__title{

    margin:0;

    font-family:"Florisel";

    font-size:140px;

    font-weight:400;

    color:#420B26;

}

.rsvp__subtitle{

    width:520px;

    margin:-10px auto 0;

    font-family:"PT Serif";

    font-size:24px;

    line-height:1.2;

    color:#420B26;

}

.rsvp__button{

    display:flex;

    justify-content:center;

    align-items:center;

    width:230px;

    height:52px;

    margin-top:60px;

    padding:0;

    border:none;

    outline:none;

    border-radius:999px;

    background:#420B26;

    color:#F7F3EE;

    font-family:"PT Serif";

    font-size:20px;

    font-weight:400;

    cursor:pointer;

    box-shadow:
        0 10px 24px rgba(45,0,22,.22);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease;

    -webkit-appearance:none;

    appearance:none;

}

.rsvp__button:hover{

    background:rgb(107, 21, 61);

    transform:translateY(-12px) scale(1.02);

    box-shadow:
        0 22px 42px rgba(45,0,22,.34);

}

.rsvp__button:active{

    transform:translateY(-1px) scale(.98);

    box-shadow:
        0 8px 20px rgba(45,0,22,.24);

}

.rsvp__button:focus{

    outline:none;

}
/* ========================= */
/* Contacts */
/* ========================= */

.rsvp__contacts{

    margin-top:240px;

}

.rsvp__contacts-title{

    margin:50px 0 8px;

    font-family:"PT Serif";

    font-size:20px;

    color:#3E1F18;

}

.rsvp__contacts-text{

    width:420px;

    margin:0 auto;

    font-family:"PT Serif";

    font-size:18px;

    line-height:1.2;

    color:#3E1F18;

}

/* ========================= */
/* Animation */
/* ========================= */

.rsvp__image,
.rsvp__title,
.rsvp__subtitle,
.rsvp__button,
.rsvp__contacts{

    opacity:0;

}

.rsvp.show .rsvp__image{

    animation:fadeUp 1.6s ease .0s forwards;

}

.rsvp.show .rsvp__title{

    animation:fadeUp 1.6s ease .4s forwards;

}

.rsvp.show .rsvp__subtitle,
.rsvp.show .rsvp__button{

    animation:fadeUp 1.6s ease .8s forwards;

}

.rsvp.show .rsvp__contacts{

    animation:fadeUp 1.6s ease 1.2s forwards;

}

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

.popup{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:flex-start;

    z-index:9999;

    padding:20px;
    
    box-sizing:border-box;

    overflow-y:auto;

    padding-top:40px;
padding-bottom:40px;

}

.popup.active{

    display:flex;

}

.popup__overlay{

    position:absolute;

    inset:0;

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

    backdrop-filter:blur(5px);

}

.popup__window{

    position:relative;

    margin:auto;

        max-height:85vh;

    overflow-y:auto;

    width:min(92%,560px);

    background:#ffffff;

    border-radius:28px;

    padding:42px;

    box-sizing:border-box;

    box-shadow:0 30px 70px rgba(0,0,0,.20);

    z-index:2;

    animation:popupShow .25s ease;

    scrollbar-width: thin;
    
    scrollbar-color: #5a5653 transparent;


}

.popup__window::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:6px;

    background:#420B26;

}

@keyframes popupShow{

    from{

        opacity:0;

        transform:translateY(15px) scale(.97);

    }

    to{

        opacity:1;

        transform:none;

    }

}

.popup__header{

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    margin-bottom:18px;

}

.popup__title{

    margin:0;

    font-family:"Florisel";

    font-size:58px;

    font-weight:400;

    color:#420B26;

    line-height:1;

}

.popup__text{

    margin:0 0 34px;

    text-align:center;

    font-family:"PT Serif";

    font-size:18px;

    line-height:1.6;

    color:#5B453E;

}

.popup__close{

    position:absolute;

    right:0;

    top:0;

    width:36px;

    height:36px;

    border:none;

    background:none;

    cursor:pointer;

    font-size:34px;

    color:#666;

    transition:.2s;

}

.popup__close:hover{

    color:#000;

}

.popup__subtitle{

    margin:0 0 34px;

    text-align:center;

    font-size:18px;

    line-height:1.6;

    color:#5B453E;

}

.popup__form{

    display:flex;

    flex-direction:column;

    gap:34px;

}

.popup__group{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.popup__question{

    margin:0;

    font-size:20px;

    font-weight:400;

    color:#2D2D2D;

    line-height:1.45;

}

.popup__radio,

.popup__check{

    display:flex;

    align-items:center;

    gap:12px;

    cursor:pointer;

    font-size:18px;

    color:#2D2D2D;

}

.popup__radio input,

.popup__check input{

    width:20px;

    height:20px;

    accent-color:#420B26;

}

.popup__textarea{

    width:100%;

    min-height:120px;

    padding:16px;

    border:1px solid #D8D8D8;

    border-radius:14px;

    resize:vertical;

    font:inherit;

    box-sizing:border-box;

    transition:.2s;

    background:#FAF8F6

}

.popup__textarea:focus{

    outline:none;

    border-color:#420B26;

}

.popup__submit{

    height:60px;

    border:none;

    border-radius:999px;

    background:#420B26;

    color:#fff;

    font-size:20px;

    cursor:pointer;

    transition:.25s;

}

.popup__submit:hover{

    background:#642038;

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(123,41,69,.25);

}

@media (max-width:768px){

    .popup__window{

        padding:26px 22px;

    }

    .popup__title{

        font-size:52px;

    }

    .popup__question{

        font-size:20px;

    }

    .popup__radio,

    .popup__check{

        font-size:18px;

    }

}

.popup__window::-webkit-scrollbar{
    width:6px;
}

.popup__window::-webkit-scrollbar-track{
    background:transparent;
}

.popup__window::-webkit-scrollbar-thumb{
    background:#5a5653;
    border-radius:999px;
}

.popup__window::-webkit-scrollbar-thumb:hover{
    background:#3f3c39;
}

/* ================= THANK YOU ================= */

.popup__success{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    min-height:520px;

    animation:popupSuccess .45s ease;

}

.popup__success-heart{

    font-size:64px;

    line-height:1;

    margin-bottom:20px;

}

.popup__success-title{

    margin:0;

    font-family:"Florisel";

    font-size:52px;

    font-weight:400;

    color:#420B26;

    line-height:1;

}

.popup__success-text{

    margin:24px 0 12px;

    font-family:"PT Serif";

    font-size:22px;

    color:#5B453E;

}

@keyframes popupSuccess{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

#popupSuccessClose{

    min-width:280px;

    height:34px;

    margin-top:40px;

    border:none;

    border-radius:999px;    

    background:#420B26;

    color:#fff;

    font-family:"PT Serif";

    font-size:18px;

    cursor:pointer;

    transition:.3s;

}

#popupSuccessClose:hover{

    background:#662039;

    transform:translateY(-2px);

    box-shadow:0 10px 24px rgba(123,41,69,.18);

}

#popupSuccessClose:active{

    transform:translateY(0);

}

.popup__success .popup__success-text,
.popup__success .popup__success-message{

    color:#5B453E !important;

}

.popup__success .popup__success-message span{

    display:block;

    margin-top:12px;

    color:#420B26 !important;

    font-family:"Florisel";

    font-size:42px;

    line-height:1;

}

.popup__submit:disabled{
    opacity:.6;
    cursor:not-allowed;
}

/* ================= MUSIC ================= */

.music-btn{

    position: fixed;

    right: 18px;

    bottom: 18px;

    width: 44px;

    height: 44px;

    border: 2px solid #EBEBEB;

    border-radius: 50%;

    background: rgba(20,20,20,.25);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:18px;

    cursor:pointer;

    transition:.25s;

    z-index:9999;

}

.music-btn:hover{

    transform:scale(1.08);

}

.music-btn.playing{

    animation:musicRotate 8s linear infinite;

}

@keyframes musicRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


/* =======================================
   MOBILE
======================================= */

@media (max-width:768px){

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

    .hero__composition{

        width:100%;
        max-width:360px;
        height:170px;

    }

    .hero__maxim{

        left:0;
        top:60px;

        font-size:100px;

    }

    .hero__and{

        left:140px;
        top:130px;

        font-size:52px;

    }

    .hero__dinara{

        right:0;
        top:220px;

        font-size:100px;

    }

    .hero__date{

        margin-top:280px;

        font-size:18px;

        letter-spacing:3px;

    }


/* ---------- INVITATION ---------- */

.invitation{

    min-height:auto;

    padding:100px 0;

}

.paper{

    width:min(92vw,420px);
    height:560px;

}

.paper-bg{

    width:100%;
    height:100%;
    object-fit:fill;

}
.invite-inner{

    max-width:72%;

}

.invite-small{

    font-size:14px;

    margin-bottom:32px;

}

.guest-name{

    font-size:52px;

    max-width:260px;

}

.invite-text{

    margin-top:30px;

    font-size:14px;

    line-height:1.4;

}

.timer-block{

    margin-top:50px;

}

.timer-title{

    font-size:13px;

    margin-bottom:18px;

}

.timer{

    gap:18px;

}

.timer-item span{

    font-size:34px;

}

.timer-item small{

    font-size:10px;

    margin-top:6px;

}

.branch-top{

    width:380px;

    top:50px;

    right:-70px;

}

.branch-bottom{

    width:380px;

    left:-70px;

    bottom:-80px;

}
/* ---------- LOCATION ---------- */

.location{
    padding:0 !important;
    overflow-x:hidden;
}

.location__frame{
    width:100%;
    max-width:100vw;
    height:auto;
    aspect-ratio:390 / 520;

    background:
        url("../assets/images/mobile-location/location-frame-mobile.png")
        center center / 100% 100% no-repeat;

    flex-shrink:0;
}

.location__content{
    padding:110px 34px 60px;

    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.location__title{
    font-size:80px;
    line-height:.74;
    margin-bottom:40px;
}

.location__place{
    max-width:230px;
    font-size:16px;
    line-height:1.25;
}

.location__address{
    max-width:210px;
    margin:0 auto 42px;
    font-size:13px;
    line-height:1.4;
}

.location__button{
    margin-top:0;
    padding:12px 34px;
    font-size:13px;
}

/* ---------- DRESS CODE ---------- */

.dresscode{

    padding:100px 0 80px;

}

.dresscode__container{

    width:min(92vw,390px);

}

.dresscode__pin{

    left:50%;
    top:0;

    width:170px;

    transform:translate(60%,20px);

}

.dresscode__title{

    font-size:28px;

    margin-bottom:26px;

}

.dresscode__text{

    max-width:310px;

    margin:0 auto 50px;

    font-size:14px;

    line-height:1.4;

}

.dresscode__gallery{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:35px;

    margin-top:0;

}

.dresscode__card{

    width:min(92vw,320px);

    margin-top:0;

}


/* ---------- TIMELINE ---------- */

.timeline{

    position:relative;

    min-height:auto;

    padding:120px 0 120px;

    overflow:hidden;

}

.timeline__content{

    width:min(92vw,360px);

    margin:0 auto;

    text-align:center;

    position:relative;

    z-index:2;

}

.timeline__title{

    font-size:80px;

    line-height:.95;

    margin-bottom:55px;

}

.timeline__date{

    font-size:22px;

    margin-bottom:55px;

    letter-spacing:1px;

}

.timeline__list{

    display:flex;

    flex-direction:column;

    gap:26px;

}

.timeline__item{

    font-size:14px;

    line-height:1.45;

}

.timeline__bird{

    position:absolute;

    left:50%;
    top:380px;

    width:100px;

    z-index:9999;

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

}

/* ---------- DETAILS ---------- */

.details{

    min-height:1100px;

    padding:55px 0 0;  

    overflow:hidden;

}

.details__content{

    width:360px;

    max-width:94vw;

    margin:0 auto;

    position:relative;

}

.details__title{

    font-size:50px;

    line-height:.75;

    text-align:center;

    margin-bottom:55px;

}

.details__cards{

    position:relative;

    width:100%;

    height:800px;

}

.details__card{

    position:absolute;

    width:305px;

    filter:
        drop-shadow(0 10px 16px rgba(0,0,0,.16))
        drop-shadow(0 24px 30px rgba(0,0,0,.16));

}

.details__card-bg{

    width:100%;

    display:block;

}

.details__card-content{

    inset:0;

    padding:52px 30px 28px;

    text-align:center;

}

.details__card-title{

    font-size:20px;

    margin-bottom:14px;

    text-align:center;

}

.details__card-text{

    font-size:14px;

    line-height:1.2;

    max-width:340px;

    margin:0 auto;

    text-align:center;

}
/* ---------- Cards ---------- */

.details__card--1{

    top:0;

    left:28px;     

    transform:rotate(-8deg);

    z-index:1;

}

.details__card--2{

    top:200px;

    left:40px;   

    transform:rotate(5deg);

    z-index:2;

}

.details__card--3{

    top:400px;   

    left:28px;  

    transform:rotate(-3deg);

    z-index:3;

}

.details__card--4{

    top:600px;

    left:32px;    

    transform:rotate(8deg);

    z-index:4;

}

/* ---------- Butterfly ---------- */

.details__butterfly{

    position:absolute;

    left:60%;
    top:396px;

    width:115px;

    z-index:20;

    transform:translate(80%,0);

}


/* ---------- RSVP ---------- */

.rsvp{

    background:#420B26;

    padding:0px 0 320px;

    overflow:hidden;

}

.rsvp__wrapper{

    width:360px;

    max-width:94vw;

    margin:0 auto;

    position:relative;

}

.rsvp__image{

    display:block;

    width:130%;

    max-width:none;

    margin-left:-15%;

}

/* ---------- Letter ---------- */

.rsvp__sheet{

    position:absolute;

    left:48%;

    top:134px;

    width:290px;

    transform:translateX(-50%) rotate(-16deg);

    text-align:center;

}

.rsvp__title{

    margin:0 0 10px;

    font-size:48px;

    line-height:.9;

}

.rsvp__subtitle{

    width:280px;

    margin:0 auto;

    font-size:13px;

    line-height:1.2;

}

.rsvp__button{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:130px;

    height:36px;

    margin-top:18px;

    border-radius:999px;

    font-size:13px;

}

/* ---------- Contacts ---------- */

.rsvp__contacts{

    position:relative;

    top:300px;

    left:21%;

    width:320px;

    margin:0;

    transform:translateX(-50%) rotate(16deg) !important;

    transform-origin:center;

    text-align:center;

    color:#EBEBEB;

}

.rsvp__contacts-title{

    margin:36px 0 14px;

    font-size:18px;

    color:#EBEBEB;

}

.rsvp__contacts-text{

    max-width:320px;

    margin:0 auto;

    font-size:13px;

    line-height:1.2;

    color:#EBEBEB;

}

/* ---------- POPUP ---------- */

.popup{

    padding:16px;

    padding-top:25px;

    padding-bottom:25px;

}

.popup__window{

    width:100%;

    max-width:360px;

    padding:26px 22px;

    border-radius:20px;

}

.popup__title{

    font-size:42px;

}

.popup__text{

    font-size:14px;

    line-height:1.5;

}

.popup__form{

    gap:24px;

}

.popup__question{

    font-size:17px;

    line-height:1.45;

}

.popup__radio,

.popup__check{

    font-size:15px;

}

.popup__textarea{

    min-height:90px;

    padding:12px;

}

.popup__submit{

    height:50px;

    font-size:16px;

}

.popup__close{

    width:30px;

    height:30px;

    font-size:28px;

}

.music-btn{

        width:36px;

        height:36px;

        right:14px;

        bottom:14px;

        font-size:15px;

        border-width:1.5px;

    }

}