/* ===========================
   RESET
=========================== */

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

html{
    scroll-behavior:smooth;
}

body{

    background:linear-gradient(
        180deg,
        #fdfbf7 0%,
        #f7f2e9 50%,
        #f3ede3 100%
    );

    color:#3d332d;

    font-family:'Poppins',sans-serif;

    overflow-x:hidden;

}

/* ===========================
BACKGROUND
=========================== */

.background{

    position:fixed;

    inset:0;

    background:

    radial-gradient(circle at top,#fffefb,#f7f2e9);

    z-index:-2;

}

.particles{

    position:fixed;

    inset:0;

    z-index:-1;

    opacity:.2;

}

/* ===========================
PAGES
=========================== */

.page{

    min-height:100vh;

    width:100%;

    display:none;

    justify-content:center;

    align-items:center;

    padding:35px;

}

.page.active{

    display:flex;

}

/* ===========================
INTRO CARD
=========================== */

.intro-card{

    width:100%;

    max-width:420px;

    background:white;

    border-radius:28px;

    padding:45px 30px;

    text-align:center;

    box-shadow:

    0 15px 45px rgba(0,0,0,.08);

}

.logo{

    font-family:'Cinzel',serif;

    font-size:56px;

    color:#b58a2d;

    letter-spacing:8px;

}

.small-title{

    margin-top:10px;

    letter-spacing:3px;

    text-transform:uppercase;

    font-size:13px;

    color:#8d7b66;

}

.gold-line{

    width:90px;

    height:2px;

    background:#c9a13f;

    margin:25px auto;

}

.arabic{

    font-size:28px;

    line-height:1.9;

    margin-bottom:20px;

}

.translation{

    color:#6d6257;

    line-height:1.8;

}

blockquote{

    margin:30px 0;

    font-style:italic;

    line-height:1.9;

    color:#555;

}

.surah{

    display:block;

    margin-bottom:35px;

    color:#b58a2d;

    font-weight:600;

}

#openBtn{

    border:none;

    background:#b58a2d;

    color:white;

    padding:15px 45px;

    border-radius:40px;

    font-size:16px;

    cursor:pointer;

    transition:.35s;

}

#openBtn:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 25px rgba(181,138,45,.35);

}

/* ===========================
ENVELOPE
=========================== */

.envelope-wrapper{

    text-align:center;

    width:100%;

}

.envelope{

    position:relative;

    width:330px;

    height:220px;

    margin:auto;

    perspective:1200px;

    filter:drop-shadow(0 20px 45px rgba(0,0,0,.18));

}

.envelope-bottom{

    position:absolute;

    bottom:0;

    width:100%;

    height:100%;

    background:#efe2c7;

    border-radius:8px;

    box-shadow:0 18px 40px rgba(0,0,0,.12);

}

.envelope-top{

    position:absolute;

    top:0;

    width:100%;
    height:100%;

    background:linear-gradient(180deg,#fbf3e5,#ead8b9);

    clip-path:polygon(0 0,100% 0,50% 62%);

    transform-origin:top center;

    transition:transform 1.2s cubic-bezier(.25,.8,.25,1);

    z-index:3;

    backface-visibility:hidden;

}

#seal{

    position:absolute;

    left:50%;
    top:58%;

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

    width:82px;
    height:82px;

    border-radius:50%;

    background:
    radial-gradient(circle at 30% 30%,
    #b23b4b,
    #7A1E2C);

    display:flex;

    align-items:center;

    justify-content:center;

    color:white;

    font-family:'Cinzel',serif;

    font-size:22px;

    letter-spacing:2px;

    cursor:pointer;

    z-index:5;

    box-shadow:
    0 10px 30px rgba(122,30,44,.45),
    inset 0 3px 8px rgba(255,255,255,.25),
    inset 0 -8px 12px rgba(0,0,0,.25);

    transition:.3s;

}

#seal:hover{

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

    box-shadow:
        0 18px 40px rgba(122,30,44,.55),
        inset 0 3px 8px rgba(255,255,255,.35),
        inset 0 -10px 15px rgba(0,0,0,.35);

}

.tap{

    margin-top:35px;

    color:#8d7b66;

    letter-spacing:2px;

    text-transform:uppercase;

    font-size:13px;

}

/* invitation hidden */

#invitationPage{

    display:none;

}

/* envelope hidden */

#envelopePage{

    display:none;

}

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

.invitation-card{

    position:relative;
    z-index:2;
    overflow: hidden;

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

    background:
        radial-gradient(circle at 20% 20%, rgba(255,248,220,.45) 0%, transparent 25%),
        radial-gradient(circle at 80% 70%, rgba(250,240,200,.35) 0%, transparent 30%),
        linear-gradient(to bottom, #fffdf8, #f9f5ea);

    border-radius:30px;

    padding:45px 30px;

    text-align:center;

    border:2px solid rgba(212,175,55,.45);

    box-shadow:
        0 15px 45px rgba(0,0,0,.08),
        0 0 0 6px rgba(212,175,55,.08);

}

.invitation-card::before{

    content:"";

    position:absolute;

    top:18px;
    left:18px;

    width:80px;
    height:80px;

    border-top:2px solid #D4AF37;
    border-left:2px solid #D4AF37;

    border-radius:20px 0 0 0;

    opacity:.7;

}

.invitation-card::after{

    content:"";

    position:absolute;

    bottom:18px;
    right:18px;

    width:80px;
    height:80px;

    border-bottom:2px solid #D4AF37;
    border-right:2px solid #D4AF37;

    border-radius:0 0 20px 0;

    opacity:.7;

}


.card-shimmer{

    position:absolute;
    top:0;
    left:-150%;

    width:60%;
    height:100%;

    pointer-events:none;

    background:linear-gradient(
        110deg,
        transparent 0%,
        rgba(255,255,255,0) 35%,
        rgba(255,230,120,0.18) 50%,
        rgba(255,255,255,0) 65%,
        transparent 100%
    );

    transform:skewX(-25deg);

    animation:cardShimmer 12s ease-in-out infinite;

}

@keyframes cardShimmer{

    0%{
        left:-150%;
    }

    15%{
        left:-150%;
    }

    40%{
        left:180%;
    }

    100%{
        left:180%;
    }

}

.invite-title{

    font-family:'Cinzel',serif;

    color:#b58a2d;

    font-size:28px;

}

.host{

    margin-top:15px;

    color:#777;

}

.parents{

    margin:18px 0;

    font-weight:600;

}

.invite-text{

    line-height:1.8;

    color:#666;

}

.groom,
.bride{

    font-family:'Cormorant Garamond',serif;

    font-size:46px;

    color:#7A1E2C;

    margin-top:18px;

}

.and{

    font-size:36px;

    margin:12px 0;

    color:#b58a2d;

}

.bride-family{

    margin-top:15px;

    color:#666;

    line-height:1.8;

}

.divider{

    width:90px;

    height:2px;

    background:#c9a13f;

    margin:35px auto;

}

.date,
.venue{

    font-family:'Cinzel',serif;

    color:#b58a2d;

    margin-top:18px;

}

.time,
.address{

    margin-top:12px;

    line-height:1.9;

}

.map-button{

    display:inline-block;

    margin-top:35px;

    background:#b58a2d;

    color:white;

    text-decoration:none;

    padding:14px 34px;

    border-radius:40px;

    transition:.3s;

}

.map-button:hover{

    transform:translateY(-3px);

}

/* ==========================================
   ANIMATIONS
========================================== */

.fade-in{
    animation:fadeIn .8s ease forwards;
}

.fade-out{
    animation:fadeOut .6s ease forwards;
}

@keyframes fadeIn{

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

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

}

@keyframes fadeOut{

    from{
        opacity:1;
    }

    to{
        opacity:0;
    }

}

@keyframes glow{

    0%{
        box-shadow:0 0 15px rgba(181,138,45,.2);
    }

    50%{
        box-shadow:0 0 35px rgba(181,138,45,.6);
    }

    100%{
        box-shadow:0 0 15px rgba(181,138,45,.2);
    }

}

#seal{

    animation:glow 3s infinite;

}

/* ==========================================
   MOBILE
========================================== */
@media screen and (max-width: 600px){

    .page{
        padding:20px 12px;
    }

    .intro-card,
    .invitation-card{
        width:92%;
        max-width:360px;
        padding:30px 20px;
        border-radius:24px;
    }

    .logo{
        font-size:42px;
        letter-spacing:5px;
    }

    .small-title{
        font-size:11px;
    }

    .arabic{
        font-size:22px;
    }

    .translation,
    blockquote,
    .invite-text,
    .host,
    .parents,
    .bride-family,
    .time,
    .address{
        font-size:15px;
        line-height:1.7;
    }

    .invite-title{
        font-size:22px;
    }

    .groom,
    .bride{
        font-size:34px;
    }

    .and{
        font-size:28px;
    }

    .date,
    .venue{
        font-size:18px;
    }

    .map-button{
        padding:12px 28px;
        font-size:16px;
    }

    .envelope{
        width:270px;
        height:180px;
    }

    
}
/* ===========================
   GOLD PARTICLES
=========================== */

.particles{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:-1;

}

.particles span{

    position:absolute;

    width:8px;
    height:8px;

    border-radius:50%;

    background:radial-gradient(circle,#fff7cf,#d4af37);

    opacity:.85;

    filter:blur(.3px);

    box-shadow:
        0 0 8px rgba(212,175,55,.8),
        0 0 18px rgba(212,175,55,.5);

    animation:floatUp 14s linear infinite;

}

/* Random positions */

.particles span:nth-child(1){left:8%;bottom:-20px;animation-delay:0s;}
.particles span:nth-child(2){left:20%;bottom:-50px;animation-delay:2s;}
.particles span:nth-child(3){left:32%;bottom:-35px;animation-delay:4s;}
.particles span:nth-child(4){left:44%;bottom:-25px;animation-delay:6s;}
.particles span:nth-child(5){left:56%;bottom:-60px;animation-delay:8s;}
.particles span:nth-child(6){left:68%;bottom:-30px;animation-delay:1s;}
.particles span:nth-child(7){left:78%;bottom:-40px;animation-delay:5s;}
.particles span:nth-child(8){left:86%;bottom:-20px;animation-delay:3s;}
.particles span:nth-child(9){left:92%;bottom:-50px;animation-delay:7s;}
.particles span:nth-child(10){left:50%;bottom:-80px;animation-delay:9s;}

@keyframes floatUp{

    from{

        transform:translateY(0) scale(.5);

        opacity:0;

    }

    20%{

        opacity:.4;

    }

    to{

        transform:translateY(-110vh) scale(1);

        opacity:0;

    }

}

@keyframes floatEnvelope{

    0%{
        transform:translateY(0px);
    }

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

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

}

.envelope{

    animation:floatEnvelope 4s ease-in-out infinite;

}

/* ===========================
   BACKGROUND DECORATIONS
=========================== */

.flower{

    position:fixed;

    font-size:70px;

    opacity:.12;

    pointer-events:none;

    z-index:-1;

    filter:blur(.3px);

}

.flower-top-left{

    top:20px;

    left:20px;

    transform:rotate(-20deg);

}

.flower-top-right{

    top:20px;

    right:20px;

    transform:scaleX(-1) rotate(-20deg);

}

.flower-bottom-left{

    bottom:20px;

    left:20px;

    transform:rotate(180deg);

}

.flower-bottom-right{

    bottom:20px;

    right:20px;

    transform:scaleX(-1) rotate(180deg);

}

.gold-fall {
    position: fixed;
    top: -20px;
    width: 12px;
    height: 12px;
    background: radial-gradient(circle, #fff3b0, #d4af37);
    border-radius: 50%;
    opacity: 0.8;
    z-index: 5;
    animation: goldDrop 12s linear infinite;
}

/* Different positions and timing */
.gold-fall:nth-child(1){
    left:10%;
    animation-delay:0s;
}

.gold-fall:nth-child(2){
    left:25%;
    animation-delay:3s;
}

.gold-fall:nth-child(3){
    left:45%;
    animation-delay:6s;
}

.gold-fall:nth-child(4){
    left:65%;
    animation-delay:2s;
}

.gold-fall:nth-child(5){
    left:80%;
    animation-delay:5s;
}

.gold-fall:nth-child(6){
    left:90%;
    animation-delay:8s;
}


@keyframes goldDrop {

    0%{
        transform:
        translateY(-20px)
        rotate(0deg);
        opacity:0;
    }

    20%{
        opacity:1;
    }

    100%{
        transform:
        translateY(110vh)
        rotate(360deg);
        opacity:0;
    }

}




/* ===========================
   ORNAMENT CORNERS
=========================== */

.corner{
    position:fixed;
    width:260px;
    height:260px;
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
    pointer-events:none;
    z-index:0;
    opacity:.55;
}

/* Top Left */
.corner-top-left{
    top:0;
    left:0;
    background-image:url("assets/images/corner-top-left.png");
}

/* Top Right */
.corner-top-right{
    top:0;
    right:0;
    transform:scaleX(-1);
    background-image:url("assets/images/corner-top-left.png");
}

/* Bottom Left */
.corner-bottom-left{
    bottom:0;
    left:0;
    transform:scaleY(-1);
    background-image:url("assets/images/corner-top-left.png");
}

/* Bottom Right */
.corner-bottom-right{
    bottom:0;
    right:0;
    transform:scale(-1);
    background-image:url("assets/images/corner-top-left.png");
}


.invitation-card{
    box-shadow:
        0 25px 70px rgba(0,0,0,.12),
        0 0 60px rgba(212,175,55,.15);
}

.card-shimmer{
    animation: cardShimmer 20s linear infinite;
}

.map-button:hover{
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 12px 30px rgba(181,138,45,.35);
}

.invitation-card{
    animation: inviteAppear 1s ease;
}

@keyframes inviteAppear{
    from{
        opacity:0;
        transform:scale(.95);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

body{
    background:linear-gradient(
        180deg,
        #fdfbf7 0%,
        #f7f2e9 50%,
        #f3ede3 100%
    );

    color:#3d332d;
    font-family:'Poppins',sans-serif;
    overflow-x:hidden;
}

/* ===========================
   MOBILE CORNER FIX
=========================== */

@media screen and (max-width:600px){

    .corner{
        width:90px;
        height:90px;
        opacity:.35;
    }

    .corner-top-left{
        top:0;
        left:0;
    }

    .corner-top-right{
        top:0;
        right:0;
    }

    .corner-bottom-left{
        bottom:0;
        left:0;
    }

    .corner-bottom-right{
        bottom:0;
        right:0;
    }

}

@media screen and (max-width:600px){

    .corner{
        width:80px;
        height:80px;
        opacity:.3;
    }

}

/* ===========================
   MOBILE FLOWER FIX
=========================== */

@media screen and (max-width:600px){

    .flower{
        font-size:45px;
        opacity:.08;
    }

}