#intro{

    position:fixed;

    inset:0;

    width:100%;

    height:100dvh;

    overflow:hidden;

    touch-action:none;

    z-index:9999;

}

.bg-left,
.bg-right{
    position:absolute;
    top:0;
    width:50%;
    height:100%;
    background-image:url("../assets/background.jpg");
    background-size:200% 100%;
    background-repeat:no-repeat;
    z-index:1;
}

.background{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:1;
}

.groom{
    position:absolute;
    bottom:0;
    right:-60px;   /* بدل -180 */
    width:260px;
    z-index:2;
}

.bride{
    position:absolute;
    bottom:0;
    left:-60px;    /* بدل -180 */
    width:260px;
    z-index:2;
}

@keyframes blink{

0%,100%{
opacity:1;
}

50%{
opacity:.3;
}


}
#sparkles{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:4;
}
.sparkle{
    position:absolute;
    color:white;
    opacity:0;
    pointer-events:none;
    user-select:none;

    text-shadow:
        0 0 3px #fff,
        0 0 6px #f5f5f5,
        0 0 12px rgba(255,255,255,.9);
}
#introTitle{

    position:absolute;

    left:50%;
    top:18%;

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

    z-index:5;

    font-family:'Cormorant SC',serif;


    font-size:36px;

    font-weight:500;

    letter-spacing:6px;

    color:#FFFFFF;
    text-shadow:0 1px 4px rgba(0,0,0,.30);
    text-align:center;

    line-height:1.3;
    

    opacity:0;

}

#introTitle span{

    display:block;

    margin-top:8px;

}