/*==================================================
CAREER PLATFORM
Premium Animation Engine
==================================================*/

/*-----------------------------------
Global Transition
-----------------------------------*/

*{

transition:
background .45s cubic-bezier(.19,1,.22,1),
color .35s ease,
border-color .35s ease,
transform .45s cubic-bezier(.19,1,.22,1),
box-shadow .45s cubic-bezier(.19,1,.22,1);

}

/*-----------------------------------
Page Fade
-----------------------------------*/

body{

animation:PageFade .8s ease forwards;

}

@keyframes PageFade{

from{

opacity:0;

}

to{

opacity:1;

}

}

/*-----------------------------------
Hero Fade Up
-----------------------------------*/

.fade-up{

opacity:0;

transform:translateY(60px);

animation:FadeUp 1s forwards;

}

.fade-up.delay-1{

animation-delay:.15s;

}

.fade-up.delay-2{

animation-delay:.3s;

}

.fade-up.delay-3{

animation-delay:.45s;

}

@keyframes FadeUp{

to{

opacity:1;

transform:translateY(0);

}

}

/*-----------------------------------
Scale In
-----------------------------------*/

.scale-in{

opacity:0;

transform:scale(.92);

animation:ScaleIn .8s forwards;

}

@keyframes ScaleIn{

to{

opacity:1;

transform:scale(1);

}

}

/*-----------------------------------
Floating Cards
-----------------------------------*/

.float{

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

}

.float2{

animation:Float2 12s ease-in-out infinite;

}

.float3{

animation:Float3 16s ease-in-out infinite;

}

@keyframes Float{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

}

@keyframes Float2{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(12px);

}

}

@keyframes Float3{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-22px);

}

}

/*-----------------------------------
Glass Glow
-----------------------------------*/

.glow{

position:relative;

overflow:hidden;

}

.glow::before{

content:"";

position:absolute;

top:-120%;

left:-50%;

width:60%;

height:300%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.18),

transparent);

transform:rotate(25deg);

}

.glow:hover::before{

animation:GlassSweep 1.3s linear;

}

@keyframes GlassSweep{

0%{

left:-80%;

}

100%{

left:180%;

}

}

/*-----------------------------------
Button Pulse
-----------------------------------*/

.pulse:hover{

animation:Pulse .8s;

}

@keyframes Pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

100%{

transform:scale(1);

}

}

/*-----------------------------------
Image Zoom
-----------------------------------*/

.zoom{

overflow:hidden;

}

.zoom img{

transition:transform 1.2s ease;

}

.zoom:hover img{

transform:scale(1.08);

}

/*-----------------------------------
Underline Animation
-----------------------------------*/

.link-line{

position:relative;

display:inline-block;

}

.link-line::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:0;

height:2px;

background:#fff;

transition:.35s;

}

.link-line:hover::after{

width:100%;

}

/*-----------------------------------
Rotate
-----------------------------------*/

.rotate{

animation:Rotate 25s linear infinite;

}

@keyframes Rotate{

from{

transform:rotate(0);

}

to{

transform:rotate(360deg);

}

}

/*-----------------------------------
Glow Pulse
-----------------------------------*/

.glow-pulse{

animation:GlowPulse 3s infinite;

}

@keyframes GlowPulse{

0%,100%{

box-shadow:

0 0 0 rgba(0,87,255,.15);

}

50%{

box-shadow:

0 0 50px rgba(0,87,255,.35);

}

}

/*-----------------------------------
Scroll Reveal
-----------------------------------*/

.reveal{

opacity:0;

transform:translateY(70px);

transition:1s;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

/*-----------------------------------
Blur Reveal
-----------------------------------*/

.blur-reveal{

opacity:0;

filter:blur(20px);

transition:1.2s;

}

.blur-reveal.active{

opacity:1;

filter:blur(0);

}

/*-----------------------------------
Background Float
-----------------------------------*/

.background-orb{

position:absolute;

border-radius:50%;

filter:blur(120px);

animation:Orb 18s ease-in-out infinite;

}

@keyframes Orb{

0%{

transform:translate(0,0);

}

25%{

transform:translate(60px,-30px);

}

50%{

transform:translate(-30px,60px);

}

75%{

transform:translate(40px,20px);

}

100%{

transform:translate(0,0);

}

}

/*-----------------------------------
Loading Screen
-----------------------------------*/

.loading-screen{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:#050505;

display:flex;

justify-content:center;

align-items:center;

z-index:999999;

animation:LoadingHide .8s ease 1.5s forwards;

}

.loading-logo img{

width:160px;

animation:LogoPulse 1.5s infinite;

}

@keyframes LogoPulse{

0%,100%{

transform:scale(1);

opacity:1;

}

50%{

transform:scale(1.08);

opacity:.8;

}

}

@keyframes LoadingHide{

to{

opacity:0;

visibility:hidden;

}
}