/* ==========================================
   Webica Studio Animations
========================================== */


/* ------------------------------------------
   Smooth Scrolling
------------------------------------------ */

html{

    scroll-behavior:smooth;

}


/* ------------------------------------------
   Default Transitions
------------------------------------------ */

a,
button,
.btn,
.product-card,
.service-card,
.feature-card,
.process-card,
.faq-item,
img{

    transition:all .3s ease;

}



/* ------------------------------------------
   Scroll Reveal
------------------------------------------ */

.reveal{

    opacity:0;

    transform:translateY(50px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}


.reveal.active{

    opacity:1;

    transform:translateY(0);

}



/* ------------------------------------------
   Fade In
------------------------------------------ */

.fade-in{

    animation:fadeIn .8s ease forwards;

}


@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}



/* ------------------------------------------
   Fade Up
------------------------------------------ */

.fade-up{

    animation:fadeUp .8s ease forwards;

}


@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



/* ------------------------------------------
   Scale In
------------------------------------------ */

.scale-in{

    animation:scaleIn .6s ease forwards;

}


@keyframes scaleIn{

    from{

        opacity:0;

        transform:scale(.9);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}



/* ------------------------------------------
   Float
------------------------------------------ */

.float{

    animation:float 4s ease-in-out infinite;

}


@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}



/* ------------------------------------------
   Button Hover
------------------------------------------ */

.btn:hover{

    transform:translateY(-3px);

}



/* ------------------------------------------
   Card Hover
------------------------------------------ */

.product-card:hover,
.service-card:hover,
.feature-card:hover{

    transform:translateY(-8px);

}



/* ------------------------------------------
   Image Hover
------------------------------------------ */

.product-image img:hover,
.product-image-gallery img:hover{

    transform:scale(1.03);

}



/* ------------------------------------------
   Navigation Hover
------------------------------------------ */

.nav-links a{

    position:relative;

}


.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:0;

    height:2px;

    background:#000;

    transition:.3s;

}


.nav-links a:hover::after{

    width:100%;

}



/* ------------------------------------------
   FAQ Animation
------------------------------------------ */

.faq-answer{

    transition:

        max-height .4s ease,

        opacity .4s ease;

}



/* ------------------------------------------
   Popup Animation
------------------------------------------ */

.image-popup{

    animation:popupFade .25s ease;

}


@keyframes popupFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}



/* ------------------------------------------
   Hero
------------------------------------------ */

.hero-content{

    animation:fadeUp .8s ease;

}


.hero-image{

    animation:scaleIn .9s ease;

}



/* ------------------------------------------
   Announcement Marquee
------------------------------------------ */

.announcement-track{

    animation:marquee 30s linear infinite;

}


@keyframes marquee{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}



/* ------------------------------------------
   Mobile
------------------------------------------ */

@media(max-width:768px){

    .reveal{

        transform:translateY(25px);

    }

}