#welcome{

    position:fixed;
    inset:0;

    background:#F9F6F0;

    visibility:hidden;
    opacity:0;

    z-index:20;

    overflow:hidden;

}

/* العنوان */


/* الأسماء */



.monogram{

    position:absolute;

    left:50%;
    top:42%;

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

    width:340px;
    height:340px;

}
.monogram img{

    position:absolute;

    width:250px;

    top:50%;
    left:50%;

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

    opacity:0;

    pointer-events:none;

}
/* حرف ن */

#noon{

    z-index:2;

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

}

/* حرف م */

#meem{

    z-index:3;

}
#photoSection{

    position:relative;

    width:100%;

    height:100vh;

    opacity:0;

}
#couple{

    position:absolute;

    left:50%;
    top:50%;

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

    width:min(88%,520px);

    border-radius:30px;

    overflow:hidden;

    box-shadow:

0 20px 45px rgba(0,0,0,.18);

border:1px solid rgba(255,255,255,.55);

}

#quoteText{

    position:absolute;

    top:7%;

    left:50%;

    transform:translateX(-50%);

    width:82%;

    max-width:520px;

    opacity:0;

    z-index:40;

}
#textShine{

    position:absolute;

    top:7%;

    left:50%;

    transform:translateX(-220%) skewX(-25deg);

    width:120px;

    height:110px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.95),
        transparent
    );

    z-index:45;

    pointer-events:none;

    opacity:0;

    filter:blur(10px);

}



#scrollHint{

    position:absolute;

    left:50%;

    bottom:38px;

    transform:translateX(-50%);

    opacity:0;

}

#scrollHint span{

    display:block;

    width:28px;

    height:46px;

    border:2px solid #222;

    border-radius:20px;

    position:relative;

}

#scrollHint span::before{

    content:"";

    position:absolute;

    left:50%;

    top:8px;

    width:4px;

    height:8px;

    background:#222;

    border-radius:10px;

    transform:translateX(-50%);

    animation:scroll 1.5s infinite;

}
#scrollHint{

    cursor:pointer;

}
#scrollHint{

    cursor:pointer;

    -webkit-tap-highlight-color: transparent;

    outline:none;

}

#scrollHint:focus{

    outline:none;

}



#scrollHint span{

    -webkit-tap-highlight-color: transparent;

}
*{

    -webkit-tap-highlight-color: transparent;

}

@keyframes scroll{

    0%{

        opacity:1;

        transform:translate(-50%,0);

    }

    100%{

        opacity:0;

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

    }

}

@keyframes down{

0%{

transform:rotate(45deg) translate(0,0);

}

50%{

transform:rotate(45deg) translate(8px,8px);

}

100%{

transform:rotate(45deg) translate(0,0);

}

}

.blur{

    filter:blur(4px);

    transition:1s;

}
#shine{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    120deg,

    transparent,

    rgba(255,255,255,.65),

    transparent);

    transform:translateX(-130%);

    pointer-events:none;


}

/* ==========================
   Invitation Section
========================== */
#invitationSection{

    width:100%;
    max-width:100%;

    background:#F9F6F0;

    display:flex;

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

    padding:70px 25px;

    opacity:0;
}

.inviteContainer{

    width:92%;

    max-width:550px;

    margin:auto;

    text-align:center;

    position:relative;

}

#inviteQuote{

    width:88%;

    max-width:520px;

    display:block;

    margin:0 auto 55px;

}

#inviteShine{

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-220%) skewX(-25deg);

    width:120px;

    height:110px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.9),
        transparent
    );

    filter:blur(10px);

    pointer-events:none;

}

.inviteSmall{

    font-family:'Aref Ruqaa', serif;

    font-size:24px;

    color:#7F7F7F;

    margin-bottom:8px;

    line-height:1;

}

.inviteTitle{

    font-family:'Aref Ruqaa', serif;

    font-size:26px;

    font-weight:500;

    color:#3d3d3d;

    letter-spacing:1px;

    line-height:1.4;

    margin-bottom:42px;

    white-space:nowrap;

}

#coupleNames{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:0px;

    flex-wrap:nowrap;

    margin-top:35px;
    
    overflow: hidden;

    

}

#nada,
#mahmoud{

    width:min(180px,38vw);

    height:auto;
}

#heart{

    width:54px;

    height:auto;

    margin-top:8px;

}
@keyframes heartBeat{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.12);
    }

    100%{
        transform:scale(1);
    }

}

#heart{

    width:46px;

    height:auto;

    margin-top:4px;

    animation:heartBeat 1.6s ease-in-out infinite;

    transform-origin:center;

}

#inviteScrollHint{

    margin:150px auto 0;

    width:28px;

    opacity:0;

    cursor:pointer;

}

#inviteScrollHint span{

    display:block;

    width:28px;

    height:46px;

    border:2px solid #555;

    border-radius:20px;

    position:relative;

}

#inviteScrollHint span::before{

    content:"";

    position:absolute;

    left:50%;

    top:8px;

    width:4px;

    height:8px;

    background:#555;

    border-radius:10px;

    transform:translateX(-50%);

    animation:scroll 1.5s infinite;

}



#dateSection{

    min-height:100vh;

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    background:#F9F6F0;

    overflow:hidden;

}
#revealCircle{

    position:relative;

    width:220px;

    height:220px;

    display:flex;

    justify-content:center;

    align-items:center;

    transform:translateY(-45px);

}

#seal{

    position:absolute;

    inset:0;

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

    transform-origin:center;

}

#tapText{

    position:absolute;

    font-size:22px;

    letter-spacing:4px;

    color:#777;

    cursor:pointer;

    user-select:none;

    z-index:10;

}

#dateContent{

    display:none;

    text-align:center;
    transform:translateY(-45px);


    



}

#dateContent h2{

    font-size:92px;

    font-weight:300;

    margin:0;

}

#dateContent h3{

    font-size:34px;

    letter-spacing:12px;

    margin:0;

}

#dateContent h4{

    font-size:24px;

    color:#888;

    margin:8px 0 0;

}

#leftHalf,
#rightHalf{

    transform-origin:center;

}

#flash{

    position:absolute;

    width:30px;

    height:30px;

    border-radius:50%;

    background:white;

    opacity:0;

    filter:blur(10px);

    pointer-events:none;

    z-index:8;

}


#nextSectionText{

    margin-top:28px;

    font-size:16px;

    color:#555;

    text-align:center;

    line-height:1.6;

    font-family:'Cormorant Garamond', serif;

}

#nextSectionText span{

    font-style:italic;

}

#dateScrollHint{

    margin:22px auto 0;

    width:28px;

    cursor:pointer;

}

#dateScrollHint span{

    display:block;

    width:28px;

    height:46px;

    border:2px solid #555;

    border-radius:20px;

    position:relative;

}

#dateScrollHint span::before{

    content:"";

    position:absolute;

    left:50%;

    top:8px;

    width:4px;

    height:8px;

    background:#555;

    border-radius:10px;

    transform:translateX(-50%);

    animation:scroll 1.5s infinite;

}