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

@keyframes fadeIn{

from{

opacity:0;

}

to{

opacity:1;

}

}

@keyframes floating{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0px);

}

}

@keyframes zoom{

0%{

transform:scale(.8);

}

100%{

transform:scale(1);

}

}

.fade-in{

animation:fadeIn 1s ease;

}

.floating{

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

}

.zoom{

animation:zoom .8s ease;

}
@keyframes fadeOut{

    from{

        opacity:1;

    }

    to{

        opacity:0;

        transform:scale(1.08);

    }

}
@keyframes twinkle{

0%{

opacity:.2;

transform:scale(.8);

}

100%{

opacity:1;

transform:scale(1.4);

}

}
@keyframes fall{

0%{

transform:translateY(-120px) rotate(0deg);

opacity:0;

}

20%{

opacity:1;

}

100%{

transform:translateY(110vh) rotate(360deg);

opacity:.8;

}

}
@keyframes up{

0%{

transform:translateY(110vh);

opacity:0;

}

20%{

opacity:.6;

}

100%{

transform:translateY(-120px);

opacity:0;

}

}
@keyframes shine{

0%{

left:-120%;

}

100%{

left:120%;

}

}
@keyframes zoomBackground{

0%{

transform:scale(1);

}

100%{

transform:scale(1.08);

}

}
@keyframes titleGlow{

0%{

text-shadow:

0 0 10px white,

0 0 20px #8FCBFF;

}

100%{

text-shadow:

0 0 18px white,

0 0 45px #8FCBFF,

0 0 80px #8FCBFF;

}

}
@keyframes moonFloat{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0px);

}

}
@keyframes fogMove{

0%{

transform:translateX(-5%);

}

100%{

transform:translateX(5%);

}

}
@keyframes cursor{

0%{

border-color:white;

}

50%{

border-color:transparent;

}

100%{

border-color:white;

}

}
/* ==========================================
SCENE TRANSITION
========================================== */

.fade-in-scene{

    animation:sceneFadeIn .9s ease forwards;

}

.fade-out-scene{

    animation:sceneFadeOut .8s ease forwards;

}

@keyframes sceneFadeIn{

    from{

        opacity:0;

        transform:scale(1.04);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes sceneFadeOut{

    from{

        opacity:1;

        transform:scale(1);

    }

    to{

        opacity:0;

        transform:scale(.97);

    }

}
@keyframes showName{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
@keyframes floatingTitle{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}
@keyframes buttonLight{

0%{

left:-120%;

}

100%{

left:120%;

}

}
@keyframes floatCard{

0%{

transform:translateY(0px) rotate(-3deg);

}

50%{

transform:translateY(-10px) rotate(-2deg);

}

100%{

transform:translateY(0px) rotate(-3deg);

}

}
@keyframes fadeTimeline{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}