/* =====================================================
   INK & SNOW
   ANIMATION SYSTEM
===================================================== */



/* =========================
   SCROLL REVEAL
========================= */


.reveal{


opacity:0;


transform:

translateY(60px);


transition:

1s cubic-bezier(
0.16,
1,
0.3,
1
);


}





.reveal.show{


opacity:1;


transform:

translateY(0);


}






/* =========================
   DELAYS
========================= */


.service-card:nth-child(2),
.feature-card:nth-child(2),
.package-card:nth-child(2),
.testimonial-card:nth-child(2){


transition-delay:.15s;


}





.service-card:nth-child(3),
.feature-card:nth-child(3),
.package-card:nth-child(3),
.testimonial-card:nth-child(3){


transition-delay:.3s;


}





.service-card:nth-child(4),
.feature-card:nth-child(4){


transition-delay:.45s;


}






/* =========================
   HERO LOAD ANIMATION
========================= */


.hero-content{


animation:

heroAppear 1.2s ease forwards;


}





.hero-visual{


animation:

heroAppear 1.5s ease forwards;


animation-delay:.2s;


}






@keyframes heroAppear{


from{


opacity:0;


transform:

translateY(50px);


}


to{


opacity:1;


transform:

translateY(0);


}


}







/* =========================
   PREMIUM HOVER EFFECT
========================= */


.service-card,
.package-card,
.feature-card,
.testimonial-card{


will-change:

transform;


}
/* =====================================================
   PARTICLE EFFECT
===================================================== */


.particles{


position:absolute;

top:0;

left:0;

width:100%;

height:100%;


overflow:hidden;


pointer-events:none;


z-index:0;


}





.particle{


position:absolute;


background:

rgba(255,255,255,.7);


border-radius:50%;


filter:

blur(.5px);


animation:

particleFloat infinite linear;


}





@keyframes particleFloat{


0%{


transform:

translateY(100vh)
translateX(0);


opacity:0;


}





20%{


opacity:1;


}




80%{


opacity:1;


}




100%{


transform:

translateY(-100vh)
translateX(50px);


opacity:0;


}



}