/* ==================================
TRUE WORSHIPERS
CINEMATIC ANIMATIONS
================================== */


/* LOADING ANIMATION */

@keyframes loading{

from{
width:0%;
}

to{
width:100%;
}

}



@keyframes pulse{

0%{

transform:scale(1);

opacity:.8;

}

50%{

transform:scale(1.08);

opacity:1;

}

100%{

transform:scale(1);

opacity:.8;

}

}



/* HERO ENTRANCE */


.hero-content h3{

animation:fadeDown 1.5s ease;

}


.hero-content h1{

animation:zoomIn 2s ease;

}


.hero-content h2{

animation:fadeUp 2s ease;

}


.hero-content p{

animation:fadeUp 2.5s ease;

}


.hero-buttons{

animation:fadeUp 3s ease;

}




/* GENERAL ANIMATIONS */


@keyframes fadeUp{

from{

opacity:0;
transform:translateY(50px);

}

to{

opacity:1;
transform:translateY(0);

}

}



@keyframes fadeDown{

from{

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

}

to{

opacity:1;
transform:translateY(0);

}

}



@keyframes zoomIn{

from{

opacity:0;
transform:scale(.5);

}

to{

opacity:1;
transform:scale(1);

}

}



/* GOLDEN LIGHT EFFECT */


.hero::before{

content:"";

position:absolute;

width:300px;
height:300px;

background:#FFD700;

filter:blur(150px);

opacity:.15;

top:20%;
left:50%;

animation:lightMove 8s infinite alternate;

}



@keyframes lightMove{

from{

transform:translate(-200px,0);

}

to{

transform:translate(200px,100px);

}

}



/* FLOATING EFFECT */


.upper-room-preview,
.event{

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

}


@keyframes floatSection{

0%{

background-position:center;

}

50%{

background-position:center 20px;

}

100%{

background-position:center;

}

}



/* BUTTON GLOW */


.btn,
.btn2{

position:relative;
overflow:hidden;

}


.btn::after,
.btn2::after{

content:"";

position:absolute;

top:0;
left:-100%;

width:100%;
height:100%;

background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,.5),
transparent
);

transition:.7s;

}


.btn:hover::after,
.btn2:hover::after{

left:100%;

}



/* GOLD SHIMMER TEXT */


.logo span,
.hero-content h1{

background:linear-gradient(
90deg,
#FFD700,
#fff,
#FFD700
);

background-size:200%;

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

animation:shine s linear infinite;

} 
.menu-toggle{
background:none !important;
-webkit-background-clip:border-box !important;
-webkit-text-fill-color:#FFD700 !important;
color:#FFD700 !important;
filter:none !important;
text-shadow:none !important;
animation:none !important;
}


@keyframes shine{

from{

background-position:0%;

}

to{

background-position:200%;

}

}
/* ==================================
TRUE WORSHIPERS ANIMATIONS
================================== */


.fade{

opacity:0;

transform:translateY(40px);

transition:1s ease;

}

.fade.show{

opacity:1;

transform:translateY(0);

}



.show{


opacity:1;

transform:translateY(0);

}




/* GOLDEN GLOW */


.glow{


animation:goldGlow 3s infinite;

}



@keyframes goldGlow{


0%{

filter:drop-shadow(0 0 5px #FFD700);

}


50%{

filter:drop-shadow(0 0 25px #FFD700);

}


100%{

filter:drop-shadow(0 0 5px #FFD700);

}


}





/* BUTTON EFFECT */


.btn,
.btn2{


transition:.4s;

}



.btn:hover,
.btn2:hover{


transform:scale(1.08);

box-shadow:
0 0 20px #FFD700;


}