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

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

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:#8B1022;
    font-family:Arial, Helvetica, sans-serif;
    overflow-x:hidden;
}

img{
    display:block;
    width:100%;
    height:auto;
}

button{
    border:none;
    background:none;
    cursor:pointer;
}

a{
    text-decoration:none;
}

.mobile-wrapper{
    width:390px;
    max-width:100%;
    margin:0 auto;
    background:#8B1022;
    overflow:visible;
}

section{
    width:100%;
    position:relative;
}


/* ========================================
   COVER
======================================== */

.cover{
    width:100%;
    display:flex;
    justify-content:center;
    background:#FEFCEF;
}

.cover-layer{
    position:relative;
    width:390px;
    height:715px;
    margin:0 auto;
}

/* Layer 1 */

.cover-atas{
    position:absolute;

    width:34%;

    top:50px;

    left:50%;
    transform:translateX(-50%);

    z-index:1;
}

/* Layer 2 */

.cover-nama{
    position:absolute;
    width:72%;
    top:130px;
    left:50%;
    transform:translateX(-50%);
    z-index:2;
}

/* Layer 3 */

.cover-pengantin{
    position:absolute;
    width:70%;
    top:220px;
    left:50%;
    transform:translateX(-50%);
    z-index:3;
}

/* Layer 4 */

.cover-tanggal{
    position:absolute;
    width:35%;
    top:490px;
    left:50%;
    transform:translateX(-50%);
    z-index:4;
}

/* Layer 5 */

.cover-button{
    position:absolute;
    width:175px;
    top:600px;
    left:50%;
    transform:translateX(-50%);
    z-index:5;
    background:none;
    border:none;
    padding:0;
}

.cover-tombol{
    width:100%;
}


/* ========================================
   PENGANTIN
======================================== */

.pengantin{
    width:100%;
    display:flex;
    justify-content:center;
    background:#8B1022;
}

.pengantin-layer{
    position:relative;
    width:390px;
    height:550px;
    margin:0 auto;

}


/* Layer 1 */

.sec2-ornament{
    position:absolute;

    width:50%;

    top:50px;

    left:50%;
    transform:translateX(-50%);

    z-index:1;
}


/* Layer 2 */

.sec2-text{
    position:absolute;

    width:70%;

    top:90px;

    left:50%;
    transform:translateX(-50%);

    z-index:2;
}


/* Layer 3 */

.sec2-outline1{
    position:absolute;

    width:80%;

    top:220px;

    left:50%;
    transform:translateX(-50%);

    z-index:3;
}


/* Layer 4 */

.sec2-outline2{
    position:absolute;

    width:80%;

    top:225px;

    left:50%;
    transform:translateX(-50%);

    z-index:4;
}


/* ========================================
   JADWAL
======================================== */

.jadwal{
    width:100%;
    display:flex;
    justify-content:center;
    background:#750214;
}

.jadwal-layer{
    position:relative;
    width:390px;
    height:540px;
    margin:0 auto;
}

/* Layer 1 */

.sec3-garis{
    position:absolute;
    width:90%;
    top:55px;
    left:50%;
    transform:translateX(-50%);
    z-index:1;
}

/* Layer 2 */

.sec3-bunga{
    position:absolute;
    width:52%;
    top:25px;
    left:50%;
    transform:translateX(-50%);
    z-index:2;
}

/* Layer 3 */

.sec3-cincin{
    position:absolute;
    width:60%;
    top:100px;
    left:50%;
    transform:translateX(-50%);
    z-index:7;
}

/* Layer 4 */

.sec3-akad{
    position:absolute;
    width:65%;
    top:170px;
    left:50%;
    transform:translateX(-50%);
    z-index:4;
}

/* Layer 5 */

.sec3-ornament{
    position:absolute;
    width:55%;
    top:290px;
    left:50%;
    transform:translateX(-50%);
    z-index:5;
}

/* Layer 6 */

.sec3-resepsi{
    position:absolute;
    width:65%;
    top:330px;
    left:50%;
    transform:translateX(-50%);
    z-index:6;
}

/* ========================================
   MAPS
======================================== */

.maps{
    width:100%;
    display:flex;
    justify-content:center;
    background:#8B1022;
}

.maps-layer{
    position:relative;
    width:390px;
    height:85px;
    margin:0 auto;
}

/* Layer 1 */

.sec4-hiasan{
    position:absolute;
    width:85%;
    top:25px;
    left:50%;
    transform:translateX(-50%);
    z-index:1;
}

/* Layer 2 */

.sec4-maps{
    position:absolute;
    width:56%;
    top:22px;
    left:50%;
    transform:translateX(-50%);
    z-index:2;
}


/* ========================================
   AYAT
======================================== */

.ayat{
    width:100%;
    display:flex;
    justify-content:center;
    background:#750214;
}

.ayat-layer{
    position:relative;
    width:390px;
    height:350px;
    margin:0 auto;
}

/* Layer 1 */

.sec5-hiasan{
    position:absolute;
    width:30%;
    bottom:40px;
    left:78%;
    transform:translateX(-50%);
    z-index:1;
}

/* Layer 2 */

.sec5-ayat{
    position:absolute;
    width:75%;
    top:40px;
    left:45%;
    transform:translateX(-50%);
    z-index:2;
}


/* ========================================
   REKENING
======================================== */

.rekening{
    width:100%;
    display:flex;
    justify-content:center;
    background:#8B1022;
}

.rekening-layer{
    position:relative;
    width:390px;
    height:300px;
    margin:0 auto;
}

/* Layer 1 */

.sec6-batas{
    position:absolute;
    width:75%;
    top:25px;
    left:50%;
    transform:translateX(-50%);
    z-index:1;
}

/* Layer 2 */

.sec6-rekening{
    position:absolute;
    width:85%;
    top:78px;
    left:50%;
    transform:translateX(-50%);
    z-index:2;
}

/* Layer 3 */

.sec6-hiasan{
    position:absolute;
    width:70%;
    top:105px;
    left:50%;
    transform:translateX(-50%);
    z-index:3;
    pointer-events:none;
}


/* ========================================
   PENUTUP
======================================== */

.penutup{
    width:100%;
    display:flex;
    justify-content:center;
    background:#8B1022;
}

.penutup-layer{
    position:relative;
    width:390px;
    height:200px;
    margin:0 auto;
}

/* Layer 1 */

.penutup-text{
    position:absolute;
    width:82%;
    top:15px;
    left:50%;
    transform:translateX(-50%);
    z-index:1;
}

/* Layer 2 */

.penutup-nama{
    position:absolute;
    width:60%;
    top:120px;
    left:50%;
    transform:translateX(-50%);
    z-index:2;
}


/* ========================================
   FOOTER
======================================== */

.footer{
    width:100%;
    display:flex;
    justify-content:center;
    background:#8B1022;
}

.footer-layer{
    position:relative;
    width:390px;
    height:115px;
    margin:0 auto;
}

.footer-image{
    position:absolute;
    width:100%;
    left:50%;
    top:10px;
    transform:translateX(-50%);
}

/* ========================================
   COVER ANIMATION
======================================== */

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateX(-50%) translateY(40px);
    }

    to{
        opacity:1;
        transform:translateX(-50%) translateY(0);
    }

}

@keyframes fadeDown{

    from{
        opacity:0;
        transform:translateX(-50%) translateY(-40px);
    }

    to{
        opacity:1;
        transform:translateX(-50%) translateY(0);
    }

}

@keyframes scaleIn{

    from{
        opacity:0;
        transform:translateX(-50%) scale(.88);
    }

    to{
        opacity:1;
        transform:translateX(-50%) scale(1);
    }

}

@keyframes scaleOut{

    from{
        opacity:0;
        transform:translateX(-50%) scale(1.10);
    }

    to{
        opacity:1;
        transform:translateX(-50%) scale(1);
    }

}

@keyframes bloom{

    from{
        opacity:0;
        transform:translateX(-50%) scale(.75);
        filter:blur(8px);
    }

    to{
        opacity:1;
        transform:translateX(-50%) scale(1);
        filter:blur(0);
    }

}

@keyframes revealCenter{

    from{
        opacity:0;
        clip-path:inset(0 50% 0 50%);
    }

    to{
        opacity:1;
        clip-path:inset(0 0 0 0);
    }

}

@keyframes pulse{

    0%{
        transform:translateX(-50%) scale(1);
    }

    50%{
        transform:translateX(-50%) scale(1.06);
    }

    100%{
        transform:translateX(-50%) scale(1);
    }

}


/* ========================================
   SCROLL ANIMATION
======================================== */

.animate{
    opacity:0;
    animation-fill-mode:both;
}

.show{
    opacity:1;
}