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

body{

    overflow:hidden;

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

}

.sky{

    position:relative;

    width:100%;

    height:100vh;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #eef9f0 0%,
        #f4efff 55%,
        #ffffff 100%
    );

}


/*==================================
CAHAYA PAGI
==================================*/

.sunlight{

    position:absolute;

    top:-180px;

    right:-180px;

    width:650px;

    height:650px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(255,240,170,.85) 0%,

        rgba(255,240,170,.45) 30%,

        rgba(255,240,170,.12) 60%,

        transparent 80%

    );

    animation:shine 8s ease-in-out infinite;

}


/*==================================
AWAN
==================================*/

.cloud{

    position:absolute;

    background:white;

    border-radius:100px;

    opacity:.55;

    filter:blur(2px);

}

.cloud::before{

    content:"";

    position:absolute;

    background:white;

    border-radius:50%;

}

.cloud::after{

    content:"";

    position:absolute;

    background:white;

    border-radius:50%;

}

.cloud1{

    width:140px;
    height:45px;

    top:18%;

    left:-180px;

    animation:cloudMove 90s linear infinite;

}

.cloud1::before{

    width:55px;
    height:55px;

    left:20px;
    top:-25px;

}

.cloud1::after{

    width:70px;
    height:70px;

    right:20px;
    top:-30px;

}

.cloud2{

    width:180px;
    height:55px;

    top:35%;

    left:-300px;

    animation:cloudMove 120s linear infinite;

}

.cloud2::before{

    width:70px;
    height:70px;

    left:30px;
    top:-35px;

}

.cloud2::after{

    width:90px;
    height:90px;

    right:25px;
    top:-40px;

}

.cloud3{

    width:120px;
    height:38px;

    top:12%;

    left:-120px;

    animation:cloudMove 70s linear infinite;

}

.cloud3::before{

    width:45px;
    height:45px;

    left:20px;
    top:-20px;

}

.cloud3::after{

    width:55px;
    height:55px;

    right:18px;
    top:-22px;

}


/*==================================
ANIMASI
==================================*/

@keyframes cloudMove{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(140vw);

    }

}

@keyframes shine{

    0%{

        transform:scale(1);

        opacity:.75;

    }

    50%{

        transform:scale(1.08);

        opacity:1;

    }

    100%{

        transform:scale(1);

        opacity:.75;

    }

}
/*==================================
PERJALANAN TUMBUH
==================================*/

.journey{

    position:absolute;

    width:100%;

    height:100%;

    left:0;

    top:0;

}


/*=========================
TUNAS
=========================*/

#tunas{

    position:absolute;

    left:6%;

    bottom:10%;

    width:110px;

    opacity:0;

    animation:

    munculTunas 2s forwards;

}


/*=========================
TUMBUH
=========================*/

#tumbuh{

    position:absolute;

    left:41%;

    bottom:12%;

    width:170px;

    opacity:0;

    animation:

    munculTumbuh 2s forwards;

    animation-delay:2s;

}


/*=========================
POHON
=========================*/

#pohon{

    position:absolute;

    right:6%;

    bottom:8%;

    width:320px;

    opacity:0;

    animation:

    munculPohon 2.5s forwards,

    nafasPohon 5s ease-in-out infinite;

    animation-delay:

    4.2s,

    6.8s;

}


/*=========================
ANIMASI
=========================*/

@keyframes munculTunas{

0%{

opacity:0;

transform:

translateY(80px)

scale(.4);

}

100%{

opacity:1;

transform:

translateY(0)

scale(1);

}

}
@keyframes munculTumbuh{

0%{

opacity:0;

transform:

translateX(-140px)
translateY(15px)
scale(.55)
rotate(-8deg);

filter:blur(6px);

}

45%{

opacity:.7;

}

100%{

opacity:1;

transform:

translateX(0)
translateY(0)
scale(1)
rotate(0);

filter:blur(0);

}

}
@keyframes munculPohon{

0%{

opacity:0;

transform:

translateX(-180px)
translateY(20px)
scale(.6);

filter:blur(10px);

}

50%{

opacity:.8;

}

100%{

opacity:1;

transform:none;

filter:blur(0);

}

}
@keyframes nafasPohon{

0%{

transform:scale(1);

}

50%{

transform:scale(1.02);

}

100%{

transform:scale(1);

}

}
/*====================================
ENERGI KEHIDUPAN
====================================*/

.energy{

position:absolute;

height:4px;

border-radius:20px;

background:

linear-gradient(

90deg,

transparent,

#9be39f,

#d8c7ff,

transparent

);

opacity:0;

filter:blur(2px);

}


/*=========================
TUNAS -> TUMBUH
=========================*/

.energy1{

left:13%;

bottom:19%;

width:0;

animation:

growEnergy1 1.4s forwards;

animation-delay:1.6s;

}


/*=========================
TUMBUH -> POHON
=========================*/

.energy2{

left:47%;

bottom:26%;

width:0;

animation:

growEnergy2 1.6s forwards;

animation-delay:3.8s;

}
@keyframes growEnergy1{

0%{

width:0;

opacity:0;

}

20%{

opacity:1;

}

100%{

width:240px;

opacity:0;

}

}



@keyframes growEnergy2{

0%{

width:0;

opacity:0;

}

20%{

opacity:1;

}

100%{

width:310px;

opacity:0;

}

}
.story{

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

pointer-events:none;

z-index:30;

}
/*==================================================
JUDUL TUMBUHKU
==================================================*/
.story h1{

    position:absolute;

    top:6%;

    left:30%;

    transform:translateX(-50%);
    
    display:flex;
    gap:20px;

    font-family:'Cormorant Garamond',serif;

    font-size:96px;

    font-weight:700;

    letter-spacing:4px;

    color:#6B5FD6;

    text-align:center;

    white-space:nowrap;

    opacity:0;

    animation:
        judulMuncul 2s forwards;

    animation-delay:7s;

}
/*efek kilau*/
.story h1{

overflow:hidden;

}

.story h1::after{

content:"";

position:absolute;

top:0;

left:-140%;

width:50%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.95),

transparent

);

transform:skewX(-25deg);

animation:

shineText 8s infinite;

animation-delay:9s;

}
@keyframes shineText{

0%{

left:-140%;

}

20%{

left:140%;

}

100%{

left:140%;

}

}
.line{

font-size:24px;

margin-top:8px;

color:#666;

opacity:0;

}

.l1{

position:absolute;

left:11%;

bottom:30%;

font-size:30px;

color:#6f6f6f;

font-weight:500;

opacity:0;

animation:

fadeLine 1.2s forwards;

animation-delay:1.5s;

}
.l2{

position:absolute;

left:42%;

bottom:37%;

font-size:34px;

color:#6f6f6f;

font-weight:500;

opacity:0;

animation:

fadeLine 1.2s forwards;

animation-delay:3.4s;

}
.l3{

position:absolute;

right:19%;

bottom:63%;

font-size:34px;

color:#6f6f6f;

font-weight:500;

opacity:0;

animation:

fadeLine 1.2s forwards;

animation-delay:5.3s;

}
.l4{

position:absolute;

right:9%;

bottom:57%;

font-size:28px;

color:#777;

font-weight:400;

opacity:0;

animation:

fadeLine 1.2s forwards;

animation-delay:6.2s;

}
@keyframes fadeLine{

from{

opacity:0;

transform:

translateY(18px);

}

to{

opacity:1;

transform:none;

}

}

@keyframes judulMuncul{

0%{

opacity:0;

transform:

translateY(-20px)
scale(.9);

}

100%{

opacity:1;

transform:none;

}

}

/*tagline mimpi*/

.tagline-final{

    position:absolute;

    top:20%;

    left:35%;

    transform:translateX(-50%);

    font-size:22px;

    color:#666;

    font-weight:400;

    letter-spacing:1px;

    opacity:0;

    animation:fadeLine 2s forwards;

    animation-delay:8s;

    white-space:nowrap;

}
/*==================================
BURUNG
==================================*/

.birds{

    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;

}

.bird{

    position:absolute;

    width:18px;
    height:8px;

    opacity:.28;

}

.bird::before,
.bird::after{

    content:"";

    position:absolute;

    width:10px;
    height:5px;

    border-top:2px solid rgba(60,60,60,.35);
    border-radius:50%;

}

.bird::before{

    left:0;
    transform:rotate(-18deg);

}

.bird::after{

    right:0;
    transform:rotate(18deg);

}

/*========================*/

.b1{

    top:13%;
    left:-40px;

    animation:flyA 28s linear infinite;

}

.b2{

    top:18%;
    left:-120px;

    animation:flyB 34s linear infinite;

}

.b3{

    top:10%;
    left:-220px;

    animation:flyC 40s linear infinite;

}

.b4{

    top:15%;
    left:-320px;

    animation:flyA 48s linear infinite;

}

.b5{

    top:8%;
    left:-420px;

    animation:flyB 56s linear infinite;

}

/*========================*/

@keyframes flyA{

0%{

left:-50px;
transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

left:110%;
transform:translateY(5px);

}

}

@keyframes flyB{

0%{

left:-120px;
transform:translateY(4px);

}

50%{

transform:translateY(-6px);

}

100%{

left:110%;
transform:translateY(2px);

}

}

@keyframes flyC{

0%{

left:-220px;
transform:translateY(-4px);

}

50%{

transform:translateY(8px);

}

100%{

left:110%;
transform:translateY(-2px);

}

}

/*pohon berdenyut*/
.pohon{

    animation:

    munculPohon 2s forwards,

    denyutPohon 4s ease-in-out infinite;

    animation-delay:
    5s,
    10s;

}
@keyframes denyutPohon{

0%{

transform:scale(1);

}

50%{

transform:scale(1.02);

}

100%{

transform:scale(1);

}

}

/*==============================
KELopak
==============================*/

.petals{

position:absolute;
inset:0;
pointer-events:none;
overflow:hidden;

}

.petal{

position:absolute;

width:10px;
height:14px;

background:#ffc9e5;

border-radius:100% 100% 100% 20%;

opacity:0;

animation:fall 14s linear infinite;

}

/*=====================
POSISI AWAL
======================*/

.petal:nth-child(1){left:73%;top:50%;animation-delay:12s;}
.petal:nth-child(2){left:75%;top:53%;animation-delay:13s;}
.petal:nth-child(3){left:77%;top:49%;animation-delay:14s;}
.petal:nth-child(4){left:79%;top:49%;animation-delay:15s;}
.petal:nth-child(5){left:80%;top:49%;animation-delay:16s;}
.petal:nth-child(6){left:74%;top:47%;animation-delay:17s;}
.petal:nth-child(7){left:76%;top:53%;animation-delay:18s;}
.petal:nth-child(8){left:81%;top:55%;animation-delay:19s;}
.petal:nth-child(9){left:78%;top:58%;animation-delay:20s;}
.petal:nth-child(10){left:72%;top:55%;animation-delay:21s;}
.petal:nth-child(11){left:75%;top:59%;animation-delay:22s;}
.petal:nth-child(12){left:79%;top:57%;animation-delay:23s;}
.petal:nth-child(13){left:82%;top:48%;animation-delay:24s;}
.petal:nth-child(14){left:80%;top:49%;animation-delay:25s;}
.petal:nth-child(15){left:77%;top:55%;animation-delay:26s;}

@keyframes fall{

0%{

opacity:0;

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

}

8%{

opacity:.9;

}

100%{

opacity:0;

transform:
translate(-180px,320px)
rotate(360deg);

}

}
/*panah masuk*/

/*==================================================
JUDUL TUMBUHKU
==================================================*/

.logo-wrap{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

}
/*/*==================================================
PANAH MASUK
==================================================*/

.enter-link{

    position:fixed;
    right:40px;
    bottom:40px;

    width:70px;
    height:70px;

    border-radius:50%;

    background:linear-gradient(135deg,#22C55E,#16A34A);

    color:#FFF;

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

    font-size:38px;
    font-weight:bold;

    text-decoration:none;

    box-shadow:
        0 10px 25px rgba(22,163,74,.35);

    transition:.3s;
    animation:
        showArrow 1s forwards,
        arrowMove 2s ease-in-out infinite;

    animation-delay:
        9s,
        10s;

}

@keyframes showArrow{

    from{

        opacity:0;

    }

    to{

        opacity:.65;

    }


}

.enter-link:hover{

    transform:scale(1.08);

    box-shadow:
        0 15px 35px rgba(22,163,74,.45);

    background:linear-gradient(135deg,#FACC15,#EAB308);

    color:#14532D;
}

@keyframes arrowMove{

0%,100%{

transform:translateX(0);

}

50%{

transform:translateX(8px);

}

}
body{

transition:.8s;

}

body.fadeout{

opacity:0;

transform:scale(1.02);

filter:blur(3px);

}