/* ======================================================
   AK LAB ANIMATIONS
====================================================== */

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

.fade-up{

opacity:0;

transform:translateY(40px);

transition:
opacity .8s ease,
transform .8s ease;

}

.fade-up.show{

opacity:1;

transform:none;

}

/* ---------- Fade Left ---------- */

.fade-left{

opacity:0;

transform:translateX(-60px);

transition:
opacity .8s ease,
transform .8s ease;

}

.fade-left.show{

opacity:1;

transform:none;

}

/* ---------- Fade Right ---------- */

.fade-right{

opacity:0;

transform:translateX(60px);

transition:
opacity .8s ease,
transform .8s ease;

}

.fade-right.show{

opacity:1;

transform:none;

}

/* ======================================================
   HERO FLOAT
====================================================== */

.hero-image{

animation:

heroFloat 6s ease-in-out infinite;

}

@keyframes heroFloat{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-14px);

}

100%{

transform:translateY(0px);

}

}

/* ======================================================
   CARD FLOAT
====================================================== */

.project-card{

animation:

cardAppear .9s ease both;

}

@keyframes cardAppear{

from{

opacity:0;

transform:

translateY(40px)

scale(.95);

}

to{

opacity:1;

transform:

translateY(0)

scale(1);

}

}

/* ======================================================
   SHIMMER
====================================================== */

.project-card::after{

content:"";

position:absolute;

top:0;

left:-120%;

width:60%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.08),

transparent

);

transform:skewX(-25deg);

transition:1s;

pointer-events:none;

}

.project-card:hover::after{

left:150%;

}

/* ======================================================
   BUTTON GLOW
====================================================== */

.primary-btn{

position:relative;

overflow:hidden;

}

.primary-btn::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:60%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.25),

transparent

);

transform:skewX(-25deg);

transition:.8s;

}

.primary-btn:hover::before{

left:160%;

}

/* ======================================================
   NAVBAR
====================================================== */

.navbar{

animation:

navDrop .8s ease;

}

@keyframes navDrop{

from{

opacity:0;

transform:translateY(-30px);

}

to{

opacity:1;

transform:none;

}

}

/* ======================================================
   COUNTERS
====================================================== */

.counter{

transition:.3s;

}

.counter:hover{

transform:scale(1.08);

}

/* ======================================================
   SOCIAL LINKS
====================================================== */

.socials a{

position:relative;

}

.socials a::after{

content:"";

position:absolute;

bottom:-4px;

left:0;

width:0;

height:2px;

background:var(--primary);

transition:.3s;

}

.socials a:hover::after{

width:100%;

}

/* ======================================================
   SECTION TITLE
====================================================== */

.section-title{

transition:.3s;

}

.section-title:hover{

letter-spacing:3px;

}

/* ======================================================
   SCROLLBAR
====================================================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#08111f;

}

::-webkit-scrollbar-thumb{

background:#223b5f;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--primary);

}