/* =========================
   SCROLL REVEAL ANIMATION
========================= */

.reveal{
opacity:0;
transform:translateY(60px) scale(.96);
filter:blur(6px);
transition:1s cubic-bezier(.2,.65,.2,1);
}

.reveal.visible{
opacity:1;
transform:none;
filter:blur(0);
}


/* =========================
   STAGGER ANIMATION
========================= */

.stagger > *{
opacity:0;
transform:translateY(40px);
transition:.7s ease;
}

.stagger.visible > *{
opacity:1;
transform:none;
}

.stagger.visible > *:nth-child(1){transition-delay:.1s}
.stagger.visible > *:nth-child(2){transition-delay:.2s}
.stagger.visible > *:nth-child(3){transition-delay:.3s}
.stagger.visible > *:nth-child(4){transition-delay:.4s}
.stagger.visible > *:nth-child(5){transition-delay:.5s}
.stagger.visible > *:nth-child(6){transition-delay:.6s}


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

.float{
animation:floatAnim 8s ease-in-out infinite;
}

@keyframes floatAnim{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-12px)}
}


/* =========================
   PREMIUM CARD HOVER
========================= */

.card,
.val-card{
transition:.35s ease;
}

.card:hover,
.val-card:hover{
transform:translateY(-12px) scale(1.02);
box-shadow:0 30px 70px rgba(0,0,0,.12);
}


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

.img-zoom{
overflow:hidden;
}

.img-zoom img{
transition:transform .6s ease;
}

.img-zoom:hover img{
transform:scale(1.08);
}


/* =========================
   ICON HOVER MOTION
========================= */

.icon-blob{
transition:.35s ease;
}

.card:hover .icon-blob{
transform:scale(1.12) rotate(-6deg);
}


/* =========================
   HERO ENTRANCE
========================= */

.hero-title,
.hero-sub{
opacity:0;
transform:translateY(40px);
animation:heroFade 1s ease forwards;
}

.hero-sub{
animation-delay:.2s;
}

@keyframes heroFade{
to{
opacity:1;
transform:none;
}
}


/* =========================
   PARALLAX IMAGES
========================= */

.parallax{
transition:transform .2s ease-out;
}


/* =========================
   SECTION FADE TRANSITION
========================= */

.section-fade{
opacity:0;
transform:translateY(30px);
transition:.9s ease;
}

.section-fade.visible{
opacity:1;
transform:none;
}


/* =========================
   FLOATING BACKGROUND BLOBS
========================= */

.blob{
position:absolute;
border-radius:50%;
filter:blur(60px);
opacity:.3;
animation:blobFloat 14s ease-in-out infinite;
}

@keyframes blobFloat{
0%,100%{transform:translateY(0)}
50%{transform:translateY(40px)}
}