/* ==========================================================
   VISIT ATLANTA FORME
   Premium Animation Library
   Version : 1.0
========================================================== */


/* ==========================================================
   GLOBAL TRANSITION
========================================================== */

*{
    transition:
        background .35s ease,
        color .35s ease,
        border-color .35s ease,
        transform .35s ease,
        opacity .35s ease,
        box-shadow .35s ease;
}


/* ==========================================================
   FADE UP
========================================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:
        translateY(60px);

    }

    to{

        opacity:1;

        transform:
        translateY(0);

    }

}

.fade-up{

    animation:
    fadeUp
    1s
    ease
    forwards;

}


/* ==========================================================
   FADE LEFT
========================================================== */

@keyframes fadeLeft{

from{

opacity:0;

transform:translateX(-60px);

}

to{

opacity:1;

transform:translateX(0);

}

}

.fade-left{

animation:fadeLeft .9s ease forwards;

}


/* ==========================================================
   FADE RIGHT
========================================================== */

@keyframes fadeRight{

from{

opacity:0;

transform:translateX(60px);

}

to{

opacity:1;

transform:translateX(0);

}

}

.fade-right{

animation:fadeRight .9s ease forwards;

}


/* ==========================================================
   SCALE IN
========================================================== */

@keyframes scaleIn{

0%{

opacity:0;

transform:scale(.85);

}

100%{

opacity:1;

transform:scale(1);

}

}

.scale-in{

animation:

scaleIn .8s ease forwards;

}


/* ==========================================================
   ZOOM
========================================================== */

.zoom-hover{

overflow:hidden;

}

.zoom-hover img{

transition:1s;

}

.zoom-hover:hover img{

transform:scale(1.12);

}


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

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}

.float{

animation:

floating 5s ease infinite;

}


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

@keyframes glow{

0%{

box-shadow:

0 0 0 rgba(13,110,253,0);

}

50%{

box-shadow:

0 0 40px rgba(13,110,253,.35);

}

100%{

box-shadow:

0 0 0 rgba(13,110,253,0);

}

}

.glow{

animation:

glow

3s infinite;

}


/* ==========================================================
   BUTTON RIPPLE
========================================================== */

.btn-primary{

position:relative;

overflow:hidden;

}

.btn-primary::before{

content:"";

position:absolute;

width:0;

height:0;

left:50%;

top:50%;

border-radius:50%;

background:

rgba(255,255,255,.2);

transform:

translate(-50%,-50%);

transition:.6s;

}

.btn-primary:hover::before{

width:350px;

height:350px;

}


/* ==========================================================
   HERO TITLE
========================================================== */

.hero h1{

animation:

fadeUp 1.2s ease;

}

.hero p{

animation:

fadeUp 1.5s ease;

}

.hero-buttons{

animation:

fadeUp 1.8s ease;

}


/* ==========================================================
   GLASS CARD
========================================================== */

.glass-card{

animation:

fadeRight

1.2s ease;

}


/* ==========================================================
   BOUNCE
========================================================== */

@keyframes bounce{

0%{

transform:translateY(0);

}

30%{

transform:translateY(-12px);

}

60%{

transform:translateY(6px);

}

100%{

transform:translateY(0);

}

}

.bounce:hover{

animation:

bounce .6s;

}


/* ==========================================================
   ROTATE
========================================================== */

.rotate:hover{

transform:

rotate(8deg);

}


/* ==========================================================
   PULSE
========================================================== */

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

100%{

transform:scale(1);

}

}

.pulse{

animation:

pulse 3s infinite;

}


/* ==========================================================
   ICON FLOAT
========================================================== */

.social a:hover{

transform:

translateY(-8px)

scale(1.15);

}


/* ==========================================================
   NAV LINK
========================================================== */

.nav-menu a{

position:relative;

}

.nav-menu a::after{

transition:.35s;

}


/* ==========================================================
   SEARCH BUTTON
========================================================== */

.search-btn:hover{

transform:

scale(1.08)

rotate(10deg);

}


/* ==========================================================
   HERO VIDEO
========================================================== */

.hero video{

animation:

videoZoom

18s linear infinite alternate;

}

@keyframes videoZoom{

from{

transform:scale(1);

}

to{

transform:scale(1.08);

}

}


/* ==========================================================
   AURORA
========================================================== */

.hero::before{

animation:

aurora

12s ease infinite alternate;

}

@keyframes aurora{

0%{

transform:

translate(0,0);

}

50%{

transform:

translate(50px,-40px);

}

100%{

transform:

translate(-20px,30px);

}

}


/* ==========================================================
   BLUR LIGHT
========================================================== */

.hero::after{

animation:

blurMove

10s ease infinite alternate;

}

@keyframes blurMove{

from{

transform:

translateX(0);

}

to{

transform:

translateX(60px);

}

}


/* ==========================================================
   LOADER
========================================================== */

.loader-logo{

animation:

loaderPulse

1.6s infinite;

}

@keyframes loaderPulse{

0%{

transform:scale(1);

opacity:.8;

}

50%{

transform:scale(1.06);

opacity:1;

}

100%{

transform:scale(1);

opacity:.8;

}

}


/* ==========================================================
   IMAGE HOVER
========================================================== */

.gallery img{

transition:1s;

}

.gallery img:hover{

transform:

scale(1.08)

rotate(.5deg);

}


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

.card{

transition:.4s;

}

.card:hover{

transform:

translateY(-15px);

box-shadow:

0 30px 60px rgba(0,0,0,.15);

}


/* ==========================================================
   CTA BUTTON
========================================================== */

.cta .btn-primary:hover{

transform:

translateY(-6px)

scale(1.05);

}


/* ==========================================================
   SCROLL INDICATOR
========================================================== */

@keyframes scroll{

0%{

transform:

translateY(0);

opacity:1;

}

50%{

transform:

translateY(10px);

opacity:.5;

}

100%{

transform:

translateY(0);

opacity:1;

}

}

.scroll-indicator{

animation:

scroll

2s infinite;

}


/* ==========================================================
   ROTATING BORDER
========================================================== */

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

.rotate-border{

position:relative;

}

.rotate-border::before{

content:"";

position:absolute;

inset:-2px;

border-radius:inherit;

padding:2px;

background:

conic-gradient(

#0D6EFD,

#68C9FF,

#FFB87A,

#0D6EFD

);

-webkit-mask:

linear-gradient(#fff 0 0) content-box,

linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

animation:

spin 8s linear infinite;

}


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

.shimmer{

background:

linear-gradient(

90deg,

#ffffff 0%,

#ffe6b5 45%,

#ffffff 100%

);

background-size:200%;

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

animation:

shine

3s linear infinite;

}

@keyframes shine{

to{

background-position:200%;

}


/* ==========================================================
   HOVER UNDERLINE
========================================================== */

.hover-line{

position:relative;

display:inline-block;

}

.hover-line::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

height:2px;

width:0;

background:#FFB87A;

transition:.4s;

}

.hover-line:hover::after{

width:100%;

}