/*==========================================================
GENESIS V2
ANIMATIONS
==========================================================*/

@layer animations {

/*==========================================================
KEYFRAMES
==========================================================*/

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(60px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

@keyframes fadeDown{

0%{

opacity:0;

transform:translateY(-60px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

@keyframes fadeLeft{

0%{

opacity:0;

transform:translateX(-60px);

}

100%{

opacity:1;

transform:translateX(0);

}

}

@keyframes fadeRight{

0%{

opacity:0;

transform:translateX(60px);

}

100%{

opacity:1;

transform:translateX(0);

}

}

@keyframes scaleIn{

0%{

opacity:0;

transform:scale(.8);

}

100%{

opacity:1;

transform:scale(1);

}

}

@keyframes rotate{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

@keyframes pulse{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

}

@keyframes float{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

}

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

@keyframes loaderSpin{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

@keyframes loaderPulse{

0%,100%{

transform:scale(1);

opacity:1;

}

50%{

transform:scale(1.08);

opacity:.85;

}

}

@keyframes progressFill{

0%{

width:0;

}

100%{

width:100%;

}

/*==========================================================
LOGO RINGS
==========================================================*/

}

@keyframes ringOne{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

@keyframes ringTwo{

from{

transform:rotate(360deg);

}

to{

transform:rotate(0deg);

}

}

@keyframes ringThree{

0%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

100%{

transform:scale(1);

}

}

/*==========================================================
HERO BADGE
==========================================================*/

@keyframes badgeShine{

0%{

left:-120%;

}

100%{

left:220%;

}

}

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

@keyframes scrollWheel{

0%{

transform:translateY(0);

opacity:1;

}

100%{

transform:translateY(18px);

opacity:0;

}

}

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

@keyframes glow{

0%,100%{

box-shadow:

0 0 18px rgba(255,0,85,.18);

}

50%{

box-shadow:

0 0 40px rgba(255,0,85,.45);

}

}

/*==========================================================
CLASSES
==========================================================*/

.fade-up{

animation:

fadeUp .9s var(--ease) forwards;

}

.fade-down{

animation:

fadeDown .9s var(--ease) forwards;

}

.fade-left{

animation:

fadeLeft .9s var(--ease) forwards;

}

.fade-right{

animation:

fadeRight .9s var(--ease) forwards;

}

.scale-in{

animation:

scaleIn .8s var(--ease) forwards;

}

.float{

animation:

float 5s ease-in-out infinite;

}

.rotate{

animation:

rotate 18s linear infinite;

}

.pulse{

animation:

pulse 3s ease-in-out infinite;

}

.loader-ring{

animation:

loaderSpin 5s linear infinite;

}

.loader-logo{

animation:

loaderPulse 2s ease-in-out infinite;

}

.loader-progress-fill{

animation:

progressFill 2.5s linear forwards;

}

.ring-1{

animation:

ringOne 18s linear infinite;

}

.ring-2{

animation:

ringTwo 25s linear infinite;

}

.ring-3{

animation:

ringThree 6s ease-in-out infinite;

}

.scroll-wheel{

animation:

scrollWheel 1.5s infinite;

}

.btn-primary{

animation:

glow 4s ease-in-out infinite;

}

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

@keyframes auroraFlow{

0%{

transform:
translate(-8%,-6%)
rotate(0deg)
scale(1);

}

25%{

transform:
translate(8%,-12%)
rotate(90deg)
scale(1.08);

}

50%{

transform:
translate(12%,10%)
rotate(180deg)
scale(1);

}

75%{

transform:
translate(-10%,8%)
rotate(270deg)
scale(1.06);

}

100%{

transform:
translate(-8%,-6%)
rotate(360deg)
scale(1);

}

}

/*==========================================================
MESH BACKGROUND
==========================================================*/

@keyframes meshMove{

0%{

background-position:0% 50%;

}

25%{

background-position:50% 0%;

}

50%{

background-position:100% 50%;

}

75%{

background-position:50% 100%;

}

100%{

background-position:0% 50%;

}

}

/*==========================================================
LIQUID BLOB
==========================================================*/

@keyframes blobMorph{

0%,100%{

border-radius:
42% 58% 65% 35% /
40% 42% 58% 60%;

transform:
translate(0,0)
rotate(0deg);

}

25%{

border-radius:
58% 42% 45% 55% /
55% 65% 35% 45%;

transform:
translate(20px,-15px)
rotate(90deg);

}

50%{

border-radius:
35% 65% 58% 42% /
60% 35% 65% 40%;

transform:
translate(-15px,20px)
rotate(180deg);

}

75%{

border-radius:
60% 40% 35% 65% /
35% 60% 40% 65%;

transform:
translate(15px,-20px)
rotate(270deg);

}

}

/*==========================================================
FLOATING CARDS
==========================================================*/

@keyframes floatingCard{

0%,100%{

transform:
translateY(0);

}

50%{

transform:
translateY(-18px);

}

}

/*==========================================================
SPARKS
==========================================================*/

@keyframes spark{

0%{

opacity:0;

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

}

20%{

opacity:1;

}

100%{

opacity:0;

transform:
translateY(-120px)
scale(1.3);

}

}

/*==========================================================
STAR TWINKLE
==========================================================*/

@keyframes twinkle{

0%,100%{

opacity:.2;

transform:scale(1);

}

50%{

opacity:1;

transform:scale(1.8);

}

}

/*==========================================================
SPOTLIGHT
==========================================================*/

@keyframes spotlight{

0%,100%{

transform:
translate(-8%,-8%);

}

25%{

transform:
translate(12%,-2%);

}

50%{

transform:
translate(8%,12%);

}

75%{

transform:
translate(-12%,6%);

}

}

/*==========================================================
PARTICLES
==========================================================*/

@keyframes particleRise{

0%{

opacity:0;

transform:
translateY(60px)
scale(.4);

}

20%{

opacity:1;

}

100%{

opacity:0;

transform:
translateY(-600px)
scale(1.2);

}

}

/*==========================================================
CLASSES
==========================================================*/

.hero-aurora{

animation:

auroraFlow 22s ease-in-out infinite;

}

.hero-grid{

animation:

meshMove 20s linear infinite;

background-size:300% 300%;

}

.liquid-blob{

animation:

blobMorph 14s ease-in-out infinite;

}

.floating-card{

animation:

floatingCard 6s ease-in-out infinite;

}

.card-one{

animation-delay:0s;

}

.card-two{

animation-delay:1.5s;

}

.card-three{

animation-delay:3s;

}

.spark{

animation:

spark 2.5s linear infinite;

}

.star{

animation:

twinkle 4s ease-in-out infinite;

}

.spotlight{

animation:

spotlight 18s ease-in-out infinite;

}

.particle{

animation:

particleRise linear infinite;

}
/*==========================================================
SCROLL REVEAL
==========================================================*/

.reveal{

opacity:0;

transform:translateY(60px);

transition:
opacity .9s var(--ease),
transform .9s var(--ease);

will-change:opacity,transform;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

.reveal-left{

opacity:0;

transform:translateX(-80px);

transition:all .9s var(--ease);

}

.reveal-left.active{

opacity:1;

transform:none;

}

.reveal-right{

opacity:0;

transform:translateX(80px);

transition:all .9s var(--ease);

}

.reveal-right.active{

opacity:1;

transform:none;

}

.reveal-scale{

opacity:0;

transform:scale(.85);

transition:all .8s var(--ease);

}

.reveal-scale.active{

opacity:1;

transform:scale(1);

}

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

.service-box,
.stat-card,
.why-card,
.process-card,
.contact-card{

transform-style:preserve-3d;

perspective:1200px;

will-change:transform;

}

.service-box:hover,
.stat-card:hover,
.why-card:hover,
.process-card:hover,
.contact-card:hover{

transform:

translateY(-12px)

rotateX(4deg)

rotateY(-4deg)

scale(1.015);

}

/*==========================================================
MAGNETIC
==========================================================*/

.magnetic{

transition:

transform .12s ease-out;

will-change:transform;

}

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

.ripple{

position:absolute;

border-radius:50%;

transform:scale(0);

pointer-events:none;

background:

rgba(255,255,255,.35);

animation:

ripple .65s linear;

}

@keyframes ripple{

to{

transform:scale(12);

opacity:0;

}

}

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

.shimmer{

position:relative;

overflow:hidden;

}

.shimmer::after{

content:"";

position:absolute;

left:-150%;

top:0;

width:45%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.22),

transparent);

transform:skewX(-25deg);

animation:

shimmer 3.5s infinite;

}

@keyframes shimmer{

0%{

left:-150%;

}

100%{

left:180%;

}

}

/*==========================================================
COUNTER
==========================================================*/

.counter{

transition:

transform .3s;

}

.counter.animate{

animation:

counterPop .8s;

}

@keyframes counterPop{

0%{

transform:scale(.7);

}

60%{

transform:scale(1.15);

}

100%{

transform:scale(1);

}

}

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

.hero-title{

animation:

heroReveal 1.2s ease;

}

@keyframes heroReveal{

0%{

opacity:0;

filter:blur(10px);

transform:

translateY(40px);

}

100%{

opacity:1;

filter:blur(0);

transform:

translateY(0);

}

}

/*==========================================================
HERO SUBTITLE
==========================================================*/

.hero-subtitle{

animation:

fadeUp 1.3s ease;

}

/*==========================================================
BUTTONS
==========================================================*/

.hero-buttons{

animation:

fadeUp 1.5s ease;

}

/*==========================================================
TRUST BADGES
==========================================================*/

.hero-trust{

animation:

fadeUp 1.7s ease;

}

/*==========================================================
BACKGROUND BLUR
==========================================================*/

.blur-1{

animation:

float 12s ease-in-out infinite;

}

.blur-2{

animation:

float 16s ease-in-out infinite reverse;

}

.blur-3{

animation:

float 18s ease-in-out infinite;

}

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

.glow-hover{

transition:

box-shadow .35s,

transform .35s;

}

.glow-hover:hover{

box-shadow:

0 0 40px rgba(255,0,85,.28),

0 0 80px rgba(139,0,255,.12);

}

/*==========================================================
GRADIENT ROTATION
==========================================================*/

.gradient-rotate{

background-size:300% 300%;

animation:

meshMove 10s linear infinite;

}

/*==========================================================
SOFT BREATHING
==========================================================*/

.breathe{

animation:

pulse 4s ease-in-out infinite;

}
/*==========================================================
PERFORMANCE HELPERS
==========================================================*/

.gpu{

transform:translateZ(0);

backface-visibility:hidden;

perspective:1000px;

will-change:transform,opacity;

}

.gpu *{

backface-visibility:hidden;

}

/*==========================================================
OPTIMIZED ELEMENTS
==========================================================*/

.hero,
.hero-logo,
.hero-left,
.hero-right,
.header,
.navbar,
.service-box,
.stat-card,
.why-card,
.process-card,
.contact-card,
.footer,
.popup,
.loader-wrapper,
.floating-card{

transform:translateZ(0);

backface-visibility:hidden;

will-change:transform;

}

/*==========================================================
HOVER OPTIMIZATION
==========================================================*/

.service-box,
.stat-card,
.why-card,
.process-card,
.contact-card,
.btn-primary,
.btn-secondary,
.btn-nav,
.service-btn{

transition:

transform .35s var(--ease),

box-shadow .35s var(--ease),

border-color .35s var(--ease),

background .35s var(--ease);

}

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

.delay-1{

animation-delay:.1s;

}

.delay-2{

animation-delay:.2s;

}

.delay-3{

animation-delay:.3s;

}

.delay-4{

animation-delay:.4s;

}

.delay-5{

animation-delay:.5s;

}

.delay-6{

animation-delay:.6s;

}

/*==========================================================
SCROLL ANIMATION HELPERS
==========================================================*/

.parallax-slow{

will-change:transform;

transition:transform .12s linear;

}

.parallax-medium{

will-change:transform;

transition:transform .08s linear;

}

.parallax-fast{

will-change:transform;

transition:transform .05s linear;

}

/*==========================================================
SMOOTH VISIBILITY
==========================================================*/

.fade{

opacity:0;

transition:

opacity .6s ease;

}

.fade.show{

opacity:1;

}

/*==========================================================
MOBILE OPTIMIZATION
==========================================================*/

@media (hover:none){

.service-box:hover,
.stat-card:hover,
.why-card:hover,
.process-card:hover,
.contact-card:hover{

transform:none;

box-shadow:none;

}

.btn-primary:hover,
.btn-secondary:hover,
.btn-nav:hover,
.service-btn:hover{

transform:none;

}

}

/*==========================================================
REDUCED MOTION
==========================================================*/

@media (prefers-reduced-motion:reduce){

*,
*::before,
*::after{

animation:none!important;

transition:none!important;

scroll-behavior:auto!important;

}

.reveal,
.reveal-left,
.reveal-right,
.reveal-scale{

opacity:1!important;

transform:none!important;

}

}

/*==========================================================
PRINT
==========================================================*/

@media print{

.hero-aurora,
.hero-grid,
.hero-noise,
.background-blur,
.spotlight,
.cursor-dot,
.cursor-ring,
.cursor-glow,
.whatsapp-float,
.back-top,
#loader{

display:none!important;

}

}

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

.animate{

animation-duration:1s;

animation-fill-mode:both;

}

.animate-fast{

animation-duration:.6s;

}

.animate-slow{

animation-duration:1.5s;

}

.infinite{

animation-iteration-count:infinite;

}

.paused{

animation-play-state:paused;

}

/*==========================================================
END OF ANIMATIONS
==========================================================*/

}