/*==================================================
SVP WEBWORKS - PREMIUM ANIMATIONS
==================================================*/

/* Fade Up */

.fade-up{
opacity:0;
transform:translateY(60px);
transition:all .8s ease;
}

.fade-up.active{
opacity:1;
transform:translateY(0);
}

/* Fade Down */

.fade-down{
opacity:0;
transform:translateY(-60px);
transition:.8s ease;
}

.fade-down.active{
opacity:1;
transform:translateY(0);
}

/* Fade Left */

.fade-left{
opacity:0;
transform:translateX(-60px);
transition:.8s ease;
}

.fade-left.active{
opacity:1;
transform:translateX(0);
}

/* Fade Right */

.fade-right{
opacity:0;
transform:translateX(60px);
transition:.8s ease;
}

.fade-right.active{
opacity:1;
transform:translateX(0);
}

/* Zoom */

.zoom-in{
opacity:0;
transform:scale(.8);
transition:.8s ease;
}

.zoom-in.active{
opacity:1;
transform:scale(1);
}

.zoom-out{
opacity:0;
transform:scale(1.2);
transition:.8s ease;
}

.zoom-out.active{
opacity:1;
transform:scale(1);
}

/* Blur Reveal */

.blur-reveal{

opacity:0;

filter:blur(12px);

transition:1s ease;

}

.blur-reveal.active{

opacity:1;

filter:blur(0);

}

/* Rotate */

.rotate-up{

opacity:0;

transform:rotate(-10deg) translateY(40px);

transition:1s ease;

}

.rotate-up.active{

opacity:1;

transform:rotate(0);

}

/* Card Hover */

.card-hover{

transition:.35s;

}

.card-hover:hover{

transform:translateY(-12px);

box-shadow:0 20px 50px rgba(0,0,0,.15);

}

/* Image Zoom */

.image-hover{

overflow:hidden;

border-radius:18px;

}

.image-hover img{

transition:.5s;

}

.image-hover:hover img{

transform:scale(1.08);

}

/* Floating */

.float{

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

}

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

}

/* Pulse */

.pulse{

animation:pulse 2s infinite;

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

100%{

transform:scale(1);

}

}

/* Bounce */

.bounce{

animation:bounce 2.5s infinite;

}

@keyframes bounce{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

}

/* Rotate Infinite */

.rotate{

animation:rotate 12s linear infinite;

}

@keyframes rotate{

from{

transform:rotate(0);

}

to{

transform:rotate(360deg);

}

}

/* Shine Button */

.primary-btn{

position:relative;

overflow:hidden;

}

.primary-btn::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:50%;

height:100%;

background:rgba(255,255,255,.3);

transform:skewX(-25deg);

transition:.8s;

}

.primary-btn:hover::before{

left:140%;

}

/*==================================================
ADVANCED PREMIUM ANIMATIONS
==================================================*/

/* ========= Glass Hover ========= */

.glass-card{
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
background:rgba(255,255,255,.75);
border:1px solid rgba(255,255,255,.25);
transition:.4s ease;
}

.glass-card:hover{
transform:translateY(-12px);
box-shadow:0 25px 60px rgba(0,0,0,.15);
}

/* ========= Gradient Animation ========= */

.gradient-bg{
background:linear-gradient(
-45deg,
#0A84FF,
#6E56CF,
#00C2FF,
#ffffff
);

background-size:400% 400%;

animation:gradientMove 12s ease infinite;
}

@keyframes gradientMove{

0%{
background-position:0% 50%;
}

50%{
background-position:100% 50%;
}

100%{
background-position:0% 50%;
}

}

/* ========= Floating Blob ========= */

.blob{

position:absolute;

width:350px;
height:350px;

border-radius:50%;

background:rgba(10,132,255,.12);

filter:blur(90px);

animation:blobFloat 14s ease-in-out infinite;

}

@keyframes blobFloat{

0%{

transform:translate(0,0);

}

50%{

transform:translate(70px,-50px);

}

100%{

transform:translate(0,0);

}

}

/* ========= Hero Shapes ========= */

.hero-shape{

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

}

@keyframes heroFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-25px);

}

100%{

transform:translateY(0);

}

}

/* ========= Gradient Text ========= */

.gradient-text{

background:linear-gradient(
90deg,
#0A84FF,
#6E56CF,
#00C2FF
);

background-size:200%;

-webkit-background-clip:text;

color:transparent;

animation:textGradient 6s linear infinite;

}

@keyframes textGradient{

to{

background-position:200%;

}

}

/* ========= Shimmer ========= */

.shimmer{

position:relative;

overflow:hidden;

}

.shimmer::after{

content:"";

position:absolute;

top:0;

left:-150%;

width:50%;

height:100%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.6),

transparent

);

animation:shimmer 2.5s infinite;

}

@keyframes shimmer{

100%{

left:150%;

}

}

/* ========= Ripple ========= */

.ripple{

position:relative;

overflow:hidden;

}

.ripple span{

position:absolute;

border-radius:50%;

transform:scale(0);

animation:rippleAnim .7s linear;

background:rgba(255,255,255,.4);

}

@keyframes rippleAnim{

to{

transform:scale(4);

opacity:0;

}

}

/* ========= Scroll Progress ========= */

#progressBar{

position:fixed;

top:0;

left:0;

width:0;

height:4px;

background:#0A84FF;

z-index:99999;

transition:.2s;

}

/* ========= Navbar ========= */

header{

transition:.35s ease;

}

header.scrolled{

background:#fff;

box-shadow:0 8px 30px rgba(0,0,0,.08);

}

/* ========= Button Hover ========= */

.primary-btn,
.secondary-btn{

transition:.35s;

}

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

transform:translateY(-4px);

box-shadow:0 15px 35px rgba(10,132,255,.25);

}

/* ========= Card Rotate ========= */

.rotate-card{

transition:.45s;

transform-style:preserve-3d;

}

.rotate-card:hover{

transform:rotateX(6deg) rotateY(-6deg);

}

/* ========= Image Tilt ========= */

.tilt img{

transition:.45s;

}

.tilt:hover img{

transform:rotate(2deg) scale(1.05);

}

/* ========= Stagger ========= */

.stagger>*{

opacity:0;

transform:translateY(40px);

}

.stagger.active>*{

opacity:1;

transform:translateY(0);

transition:.7s;

}

.stagger.active>*:nth-child(1){

transition-delay:.1s;

}

.stagger.active>*:nth-child(2){

transition-delay:.2s;

}

.stagger.active>*:nth-child(3){

transition-delay:.3s;

}

.stagger.active>*:nth-child(4){

transition-delay:.4s;

}

.stagger.active>*:nth-child(5){

transition-delay:.5s;

}

/* ========= Page Loader ========= */

.loader{

position:fixed;

inset:0;

display:flex;

justify-content:center;

align-items:center;

background:#fff;

z-index:999999;

transition:.6s;

}

.loader.hide{

opacity:0;

visibility:hidden;

}

.loader-circle{

width:70px;

height:70px;

border:6px solid #ddd;

border-top:6px solid #0A84FF;

border-radius:50%;

animation:spin .9s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

/* ========= Marquee ========= */

.marquee{

display:flex;

gap:80px;

white-space:nowrap;

animation:marqueeMove 20s linear infinite;

}

@keyframes marqueeMove{

from{

transform:translateX(0);

}

to{

transform:translateX(-50%);

}

}

/* ========= Scroll Arrow ========= */

.back-top{

transition:.4s;

}

.back-top:hover{

transform:translateY(-8px);

}

/* ========= Hover Glow ========= */

.hover-glow:hover{

box-shadow:0 0 40px rgba(10,132,255,.35);

}

/* ========= Scale ========= */

.scale:hover{

transform:scale(1.04);

}

/* ========= Fade Delay Utilities ========= */

.delay-1{
animation-delay:.2s;
}

.delay-2{
animation-delay:.4s;
}

.delay-3{
animation-delay:.6s;
}

.delay-4{
animation-delay:.8s;
}

.delay-5{
animation-delay:1s;
}

/* ========= Cursor Transition ========= */

*{
scroll-behavior:smooth;
}