/* ===================================================
GRID4K PREMIUM ANIMATIONS CSS
Enterprise • Smooth • Modern • Optimized
=================================================== */

/* ===================================================
FADE IN
=================================================== */

@keyframes fadeIn{

0%{

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

}

100%{

opacity:1;
transform:translateY(0);

}

}

/* ===================================================
SLIDE LEFT
=================================================== */

@keyframes slideLeft{

0%{

opacity:0;
transform:translateX(80px);

}

100%{

opacity:1;
transform:translateX(0);

}

}

/* ===================================================
SLIDE RIGHT
=================================================== */

@keyframes slideRight{

0%{

opacity:0;
transform:translateX(-80px);

}

100%{

opacity:1;
transform:translateX(0);

}

}

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

@keyframes zoomIn{

0%{

opacity:0;
transform:scale(0.88);

}

100%{

opacity:1;
transform:scale(1);

}

}

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

@keyframes floating{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0px);

}

}

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

@keyframes rotate{

0%{

transform:rotate(0deg);

}

100%{

transform:rotate(360deg);

}

}

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

@keyframes pulse{

0%{

transform:scale(1);

opacity:1;

}

50%{

transform:scale(1.04);

opacity:0.92;

}

100%{

transform:scale(1);

opacity:1;

}

}

/* ===================================================
GRADIENT MOVE
=================================================== */

@keyframes gradientMove{

0%{

background-position:0% 50%;

}

50%{

background-position:100% 50%;

}

100%{

background-position:0% 50%;

}

}

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

@keyframes textGlow{

0%{

text-shadow:
0 0 8px rgba(123,44,255,0.2);

}

50%{

text-shadow:
0 0 20px rgba(123,44,255,0.35),
0 0 40px rgba(37,99,235,0.20);

}

100%{

text-shadow:
0 0 8px rgba(123,44,255,0.2);

}

}

/* ===================================================
SHINE EFFECT
=================================================== */

@keyframes shine{

0%{

left:-100%;

}

100%{

left:120%;

}

}

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

.fade-in{

animation:fadeIn 1s ease forwards;

}

.slide-left{

animation:slideLeft 1s ease forwards;

}

.slide-right{

animation:slideRight 1s ease forwards;

}

.zoom-in{

animation:zoomIn 1s ease forwards;

}

.floating{

animation:floating 5s ease-in-out infinite;

}

.pulse{

animation:pulse 2.5s ease infinite;

}

.text-glow{

animation:textGlow 3s ease infinite;

}

/* ===================================================
GRADIENT TEXT
=================================================== */

.gradient-text{

background:

linear-gradient(
90deg,
#2563eb,
#7b2cff,
#ff6a00
);

background-size:300% 300%;

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

animation:gradientMove 8s ease infinite;

}

/* ===================================================
BUTTON EFFECTS
=================================================== */

.primary-btn,
.header-btn{

position:relative;

overflow:hidden;

}

.primary-btn::before,
.header-btn::before{

content:'';

position:absolute;

top:0;
left:-100%;

width:100%;
height:100%;

background:
rgba(255,255,255,0.18);

transform:skewX(-20deg);

transition:0.5s;

}

.primary-btn:hover::before,
.header-btn:hover::before{

animation:shine 1s forwards;

}

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

.service-card,
.stat-box{

position:relative;

overflow:hidden;

}

.service-card::after,
.stat-box::after{

content:'';

position:absolute;

width:220px;
height:220px;

background:
rgba(123,44,255,0.04);

border-radius:50%;

top:-120px;
right:-120px;

transition:0.5s;

}

.service-card:hover::after,
.stat-box:hover::after{

transform:scale(1.5);

}

/* ===================================================
HOVER EFFECTS
=================================================== */

.hover-up{

transition:0.4s ease;

}

.hover-up:hover{

transform:translateY(-10px);

}

.hover-scale{

transition:0.4s ease;

}

.hover-scale:hover{

transform:scale(1.04);

}

/* ===================================================
HERO IMAGE ANIMATION
=================================================== */

.hero-image img{

animation:floating 6s ease-in-out infinite;

}

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

.cta-box{

position:relative;

overflow:hidden;

}

.cta-box::before{

content:'';

position:absolute;

width:420px;
height:420px;

background:
rgba(255,255,255,0.08);

border-radius:50%;

top:-200px;
right:-200px;

filter:blur(20px);

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#ffffff;

}

::-webkit-scrollbar-thumb{

background:

linear-gradient(
180deg,
#2563eb,
#7b2cff,
#ff6a00
);

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:
linear-gradient(
180deg,
#7b2cff,
#ff6a00
);

}

/* ===================================================
TEXT SELECTION
=================================================== */

::selection{

background:#7b2cff;
color:#ffffff;

}

/* ===================================================
SMOOTH PERFORMANCE
=================================================== */

img,
button,
a,
.service-card,
.stat-box{

will-change:transform;

}

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

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

*{

animation:none !important;
transition:none !important;
scroll-behavior:auto !important;

}

}

/* ===================================================
END
=================================================== */