/* ===============================
   PAGE FADE
================================*/

body.envelope-page{

    opacity:0;

    animation:pageFade 1.4s forwards;

}

@keyframes pageFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

body.envelope-page{

    margin:0;

    background:#efe7d8;

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}

.luxury-envelope{

    position:relative;

    width:min(92vw,650px);

    animation:float 6s ease-in-out infinite;

    transition:all 1s ease;

    filter:drop-shadow(0 40px 80px rgba(0,0,0,.18));

}
.luxury-envelope img{

    width:100%;

    display:block;

    border-radius:18px;

    box-shadow:0 40px 100px rgba(0,0,0,.22);

}

.seal-button{

    position:absolute;

    width:105px;

    height:105px;

    left:50%;

    top:56%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    cursor:pointer;

    background:transparent;

    transition:transform .25s ease;

}

.seal-button:hover{

    transform:translate(-50%,-50%) scale(1.08);

}

.seal-button:active{

    transform:translate(-50%,-50%) scale(.92);

}

.luxury-envelope.open{

    transform:scale(1.08);

    opacity:0;

}

@keyframes float{

    0%{
        transform:translateY(0px) rotate(0.2deg);
    }

    25%{
        transform:translateY(-8px) rotate(-0.15deg);
    }

    50%{
        transform:translateY(-18px) rotate(0deg);
    }

    75%{
        transform:translateY(-8px) rotate(0.15deg);
    }

    100%{
        transform:translateY(0px) rotate(0.2deg);
    }

}
.seal-button{

    position:absolute;

    width:105px;

    height:105px;

    left:50%;

    top:56%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    cursor:pointer;

}

.seal-glow{

    width:100%;

    height:100%;

    border-radius:50%;

    animation:pulse 2.5s infinite;

}

@keyframes pulse{

0%{

box-shadow:0 0 0 rgba(198,163,93,0);

}

50%{

box-shadow:0 0 40px rgba(198,163,93,.55);

}

100%{

box-shadow:0 0 0 rgba(198,163,93,0);

}

}

.invite-card{

    position:absolute;

    left:50%;

    top:63%;

    transform:translate(-50%,40px);

    width:72%;

    background:#fffdf9;

    border-radius:12px;

    padding:30px;

    text-align:center;

    opacity:0;

    box-shadow:0 25px 60px rgba(0,0,0,.15);

    transition:all .9s ease;

}

.invite-card h1{

    color:#163257;

    font-family:"Great Vibes",cursive;

    font-size:56px;

    margin-bottom:15px;

}

.invite-card p{

    color:#555;

    font-size:22px;

    margin:8px 0;

}

.invite-card.show{

    opacity:1;

    transform:translate(-50%,-90px);

}

/* Luxury finish */

.luxury-envelope{

    animation:float 6s ease-in-out infinite;

    transition:all 1.8s ease;

}

.luxury-envelope img{

    user-select:none;

    pointer-events:none;

}

.seal-glow{

    animation:pulse 2.4s infinite;

}

body.envelope-page{

    transition:background 2s ease;

}

@keyframes float{

    0%{
        transform:translateY(0px) rotate(.15deg);
    }

    25%{
        transform:translateY(-8px) rotate(-.1deg);
    }

    50%{
        transform:translateY(-16px);
    }

    75%{
        transform:translateY(-8px) rotate(.1deg);
    }

    100%{
        transform:translateY(0px) rotate(.15deg);
    }

}

@keyframes pulse{

    0%{

        box-shadow:0 0 0 rgba(198,163,93,0);

    }

    50%{

        box-shadow:0 0 45px rgba(198,163,93,.65);

    }

    100%{

        box-shadow:0 0 0 rgba(198,163,93,0);

    }

}