*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
img{display:block;max-width:100%;-webkit-user-select:none;user-select:none}
button,input,select,textarea{font:inherit;border:none;outline:none}

body{
    background:#2a1c2e;
    font-family:'Cormorant Garamond',serif;
    color:#3d2740;overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}
@media(max-width:430px){body{background:#a894aa}}

.wrapper{
    max-width:430px;margin:0 auto;
    background:#a894aa;overflow:hidden;
}
@media(min-width:431px){.wrapper{box-shadow:0 0 80px rgba(0,0,0,.4)}}

/* ===== PAGE ===== */
.page{position:relative;width:100%}
.page-img{display:block;width:100%;height:auto;pointer-events:none}

/* ===== ПРЕЛИВАНЕ — gradient overlays ===== */
#savedate::after,
#calendar::after,
#location::after,
#program::after,
#menu::after{
    content:'';position:absolute;
    bottom:0;left:0;right:0;height:80px;
    background:linear-gradient(to bottom,transparent,#a894aa);
    z-index:2;pointer-events:none;
}
#calendar::before,
#location::before,
#program::before,
#menu::before{
    content:'';position:absolute;
    top:0;left:0;right:0;height:80px;
    background:linear-gradient(to top,transparent,#a894aa);
    z-index:2;pointer-events:none;
}

/* ===== 1. COVER — невидим клик върху овала "Отвори поканата" в самата снимка ===== */
.cover-btn{
    position:absolute;z-index:10;
    bottom:28%;left:50%;transform:translateX(-50%);
    width:35%;height:7%;
    background:transparent;border:none;cursor:pointer;
}
.cover-btn:active{background:rgba(255,255,255,.08);border-radius:50px}

/* ===== Page transitions — fade + pop ===== */
#cover{
    transition:opacity .7s ease, transform .7s ease;
}
#cover.fading-out{
    opacity:0;
    transform:scale(1.05);
    pointer-events:none;
}
#envelope.popping-in{
    animation:pagePopIn .9s cubic-bezier(.25,.46,.45,.94) both;
}
@keyframes pagePopIn{
    0%{opacity:0;transform:scale(.92)}
    100%{opacity:1;transform:scale(1)}
}

/* ===== 2. ENVELOPE (2.jpg clip-path flap) ===== */
#envelope{
    position:relative;overflow:visible;
    background:#a894aa;
}

.env-stage{
    position:relative;width:100%;
}

/* Долен слой — само тялото на плика (V-формата изрязва flap-а) */
.env-body{
    display:block;width:100%;height:auto;
    -webkit-clip-path:polygon(0 50%, 50% 62%, 100% 50%, 100% 100%, 0 100%);
    clip-path:polygon(0 50%, 50% 62%, 100% 50%, 100% 100%, 0 100%);
    position:relative;z-index:2;
}

/* Горен слой — flap-а със seal-а, който се отваря. Реалистична хартия чрез
   многослойни backgrounds + blend modes: основната снимка + paper grain
   + крайбрежно осветление за 3D ефект. */
.env-flap{
    position:absolute;top:0;left:0;
    width:100%;height:100%;
    z-index:4;
    background-image:
        /* Лек fold shadow близо до V-ръба */
        linear-gradient(to bottom, transparent 0%, transparent 78%, rgba(0,0,0,.22) 100%),
        /* Светлина горе-ляво → сянка долу-дясно (3D papier feel) */
        linear-gradient(150deg, rgba(255,255,255,.18) 0%, transparent 32%, transparent 62%, rgba(0,0,0,.2) 100%),
        /* Хартиена текстура */
        url('images/paper.png'),
        /* Фини влакна / грейн */
        url('images/grain.png'),
        /* Базова снимка на плика */
        url('images/2.jpg');
    background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat;
    background-position: center, center, 0 0, 0 0, center;
    background-size: cover, cover, 320px auto, 180px auto, cover;
    background-blend-mode: multiply, overlay, soft-light, soft-light, normal;
    -webkit-clip-path:polygon(0 0, 100% 0, 100% 50%, 50% 62%, 0 50%);
    clip-path:polygon(0 0, 100% 0, 100% 50%, 50% 62%, 0 50%);
    transform-origin:top center;
    backface-visibility:hidden;
    transition:transform 1s cubic-bezier(.3,0,.2,1), filter 1s ease;
    pointer-events:none;
    filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));
}
#envelope.opening .env-flap{
    transform:perspective(1200px) rotateX(-170deg);
    filter:drop-shadow(0 -6px 12px rgba(0,0,0,.22));
}

/* "Вътрешност" на плика — тъмен слой зад flap-а */
.env-stage::before{
    content:'';
    position:absolute;top:0;left:0;right:0;
    height:62%;z-index:1;
    background:
        radial-gradient(ellipse at 50% 80%,rgba(0,0,0,.25) 0%,transparent 60%),
        linear-gradient(to bottom,#6b4f6b 0%,#8a6f8c 100%);
    -webkit-clip-path:polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
    clip-path:polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
    opacity:0;
    transition:opacity .6s ease .4s;
}
#envelope.opening .env-stage::before{opacity:1}

.seal-btn{
    position:absolute;z-index:10;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    width:22%;aspect-ratio:1;border-radius:50%;
    background:transparent;cursor:pointer;
    animation:sealPulse 2.5s ease-in-out infinite;
}
@keyframes sealPulse{
    0%,100%{box-shadow:0 0 0 0 rgba(61,39,64,.35)}
    50%{box-shadow:0 0 25px 12px rgba(61,39,64,.15)}
}
#envelope.opening .seal-btn{opacity:0;pointer-events:none;transition:opacity .4s}

/* ===== Envelope fade-out + Save the Date slide-up ===== */
#envelope{
    transition:opacity .6s ease, transform .6s ease;
}
#envelope.fading-out{
    opacity:0;
    transform:scale(.96);
    pointer-events:none;
}

/* Snimkata na sestrata "izliza" otdolu nagore — kato hartiya ot plika */
#savedate{
    background:#a894aa;
    opacity:0;
    transform:translateY(85%);
    transition:opacity .7s ease, transform 1s cubic-bezier(.22,.61,.36,1);
    will-change:transform,opacity;
}
#savedate.sliding-up{
    opacity:1;
    transform:translateY(0);
}

/* ===== Scroll-triggered reveal ===== */

/* Image-only секции — слайд като цяло */
#calendar, #program, #menu{
    opacity:0;
    transform:translateY(60px);
    transition:opacity 1s ease, transform 1.2s cubic-bezier(.22,.61,.36,1);
}
#calendar.in-view,
#program.in-view,
#menu.in-view{
    opacity:1;
    transform:translateY(0);
}

/* Location — снимка → бутон → секунди (всеки елемент поотделно) */
#location > .page-img{
    opacity:0;
    transform:translateY(50px);
    transition:opacity .9s ease, transform 1.1s cubic-bezier(.22,.61,.36,1);
}
#location.in-view > .page-img{
    opacity:1;
    transform:translateY(0);
}
#location .map-btn{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .7s ease .45s, transform .9s cubic-bezier(.22,.61,.36,1) .45s;
}
#location.in-view .map-btn{
    opacity:1;
    transform:translateY(0);
}
#location .timer > *{
    opacity:0;
    transform:translateY(14px);
    transition:opacity .6s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
#location.in-view .timer > *:nth-child(1){transition-delay:.75s}
#location.in-view .timer > *:nth-child(2){transition-delay:.83s}
#location.in-view .timer > *:nth-child(3){transition-delay:.91s}
#location.in-view .timer > *:nth-child(4){transition-delay:.99s}
#location.in-view .timer > *:nth-child(5){transition-delay:1.07s}
#location.in-view .timer > *:nth-child(6){transition-delay:1.15s}
#location.in-view .timer > *:nth-child(7){transition-delay:1.23s}
#location.in-view .timer > *{
    opacity:1;
    transform:translateY(0);
}

/* RSVP — заглавие → всеки field поотделно */
#rsvp .rsvp-heading,
#rsvp .rsvp-form > *{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .7s ease, transform .9s cubic-bezier(.22,.61,.36,1);
}
#rsvp.in-view .rsvp-heading{transition-delay:0s}
#rsvp.in-view .rsvp-form > *:nth-child(1){transition-delay:.15s}
#rsvp.in-view .rsvp-form > *:nth-child(2){transition-delay:.25s}
#rsvp.in-view .rsvp-form > *:nth-child(3){transition-delay:.35s}
#rsvp.in-view .rsvp-form > *:nth-child(4){transition-delay:.45s}
#rsvp.in-view .rsvp-form > *:nth-child(5){transition-delay:.55s}
#rsvp.in-view .rsvp-form > *:nth-child(6){transition-delay:.65s}
#rsvp.in-view .rsvp-form > *:nth-child(7){transition-delay:.75s}
#rsvp.in-view .rsvp-heading,
#rsvp.in-view .rsvp-form > *{
    opacity:1;
    transform:translateY(0);
}


/* ===== 5. LOCATION ===== */
#location{background:#a894aa}
/* Скриваме долната част на снимката (статичния "часовник") */
.location-img{
    -webkit-clip-path:inset(0 0 38% 0);
    clip-path:inset(0 0 38% 0);
}
.location-bottom{
    position:absolute;
    left:0;right:0;bottom:0;
    height:38%;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    gap:22px;padding:0 24px;
    z-index:3;
}
.map-btn{
    padding:12px 38px;background:#3d2740;color:#fff;
    text-decoration:none;font-family:'Cormorant SC',serif;
    font-size:1rem;font-weight:600;letter-spacing:4px;
    border-radius:30px;box-shadow:0 4px 15px rgba(0,0,0,.25);
    transition:transform .2s,background .3s;white-space:nowrap;
}
.map-btn:active{transform:scale(.95);background:#6b4f6b}

/* Live countdown под бутона */
.timer{display:flex;align-items:flex-start;gap:8px}
.timer-block{display:flex;flex-direction:column;align-items:center;min-width:48px}
.timer-num{
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(1.8rem,7vw,2.6rem);font-weight:400;
    color:#3d2740;line-height:1;
}
.timer-lbl{
    font-family:'Cormorant SC',serif;
    font-size:clamp(.55rem,2vw,.72rem);font-weight:400;
    letter-spacing:2px;color:rgba(61,39,64,.65);margin-top:6px;
}
.timer-colon{
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(1.5rem,5vw,2.2rem);font-weight:300;
    color:rgba(61,39,64,.4);line-height:1;margin-top:2px;
}

/* ===== 7. RSVP ===== */
#rsvp{
    background:#a894aa;
    display:flex;align-items:center;justify-content:center;
    padding:30px 24px;
}
.rsvp-wrap{width:100%;max-width:360px;text-align:center}
.rsvp-heading{
    font-family:'Marck Script',cursive;
    font-size:clamp(1.8rem,6.5vw,2.5rem);font-weight:400;
    color:#3d2740;margin-bottom:24px;
}
.rsvp-form{display:flex;flex-direction:column;gap:14px}
.rsvp-form input[type="text"],
.rsvp-form select,
.rsvp-form textarea{
    width:100%;padding:13px 16px;
    font-family:'Cormorant Garamond',serif;font-size:1.05rem;
    color:#3d2740;background:rgba(255,255,255,.55);
    border:1px solid rgba(61,39,64,.12);border-radius:8px;
    -webkit-appearance:none;appearance:none;
    transition:border-color .3s,background .3s;
}
.rsvp-form input:focus,.rsvp-form select:focus,.rsvp-form textarea:focus{
    border-color:#6b4f6b;background:rgba(255,255,255,.75);
}
.rsvp-form select{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233d2740' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;
}
.rsvp-form textarea{resize:vertical;min-height:70px}
.radio-row{display:flex;gap:10px}
.radio-card{
    flex:1;display:flex;align-items:center;justify-content:center;
    padding:13px 8px;background:rgba(255,255,255,.55);
    border:1px solid rgba(61,39,64,.12);border-radius:8px;
    cursor:pointer;transition:all .25s;
}
.radio-card:has(input:checked){background:rgba(107,79,107,.22);border-color:#6b4f6b}
.radio-card input{display:none}
.radio-card span{font-family:'Cormorant Garamond',serif;font-size:1rem;color:#3d2740}
.menu-label{
    font-family:'Cormorant SC',serif;
    font-size:.85rem;letter-spacing:3px;
    color:rgba(61,39,64,.7);
    margin-top:4px;margin-bottom:-4px;
    text-align:left;
}
.send-btn{
    margin-top:6px;padding:15px;background:#3d2740;color:#fff;
    border-radius:28px;font-family:'Cormorant SC',serif;
    font-size:1.05rem;font-weight:600;letter-spacing:4px;
    cursor:pointer;box-shadow:0 3px 14px rgba(0,0,0,.22);
    transition:background .3s,transform .2s;
}
.send-btn:active{transform:scale(.97);background:#6b4f6b}

.rsvp-ok{display:none;padding:30px 0;animation:fadeUp .6s ease}
.rsvp-ok.show{display:block}
.ok-heart{font-size:3rem;color:#6b4f6b;display:block;margin-bottom:12px;animation:heartBeat 1.3s ease infinite}
.ok-title{font-family:'Marck Script',cursive;font-size:2.2rem;color:#3d2740;margin-bottom:6px}
.ok-sub{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.15rem;font-weight:300;color:rgba(61,39,64,.65)}

@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes heartBeat{0%,100%{transform:scale(1)}14%{transform:scale(1.15)}28%{transform:scale(1)}42%{transform:scale(1.1)}56%{transform:scale(1)}}
::placeholder{color:rgba(61,39,64,.38);font-style:italic}