/*==================================================
PAD PRINTS & DESIGNS
ANIMATIONS.CSS
==================================================*/

/*==================================
GLOBAL TRANSITIONS
==================================*/

*{

    transition:
        background-color .35s ease,
        color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

/*==================================
FADE-IN REVEAL
==================================*/

.reveal{

    opacity:0;

    transform:translateY(60px);

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

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/*==================================
HERO IMAGE ZOOM
==================================*/

.slide img{

    animation:heroZoom 8s linear forwards;

}

@keyframes heroZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.08);

    }

}

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

.float{

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

}

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

/*==================================
BUTTON HOVER
==================================*/

.btn{

    position:relative;

    overflow:hidden;

}

.btn::before{

    content:"";

    position:absolute;

    top:50%;

    left:50%;

    width:0;

    height:0;

    border-radius:50%;

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

    transform:translate(-50%,-50%);

    transition:.6s;

}

.btn:hover::before{

    width:420px;

    height:420px;

}

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

.service-image,
.feature-image,
.product-card,
.portfolio-item{

    overflow:hidden;

}

.service-image img,
.feature-image img,
.product-card img,
.portfolio-item img{

    transition:transform .6s ease;

}

.service-card:hover img,
.product-card:hover img,
.portfolio-item:hover img,
.feature-image:hover img{

    transform:scale(1.08);

}

/*==================================
CLIENT LOGOS
==================================*/

.client-slider{
    overflow: hidden;
    width: 100%;
    padding: 30px 0;
}

.client-track{
    display: flex;
    gap: 60px;
    width: max-content;
    animation: scrollClients 25s linear infinite;
}

.client-slider:hover .client-track{
    animation-play-state: paused;
}

.client-track img{
    height: 80px;
    width: auto;
    object-fit: contain;
    transition: transform .3s ease;
}

.client-track img:hover{
    transform: scale(1.15);
}

@keyframes scrollClients{
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-50%);
    }
}

@media (max-width:768px){
    .client-track{
        gap: 40px;
    }

    .client-track img{
        height: 60px;
    }
}

/*==================================
UNDERLINE ANIMATION
==================================*/

.navigation a{

    position:relative;

}

.navigation a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.35s;

}

.navigation a:hover::after,

.navigation a.active::after{

    width:100%;

}

/*==================================
SECTION ENTRANCE
==================================*/

section{

    animation:fadeSection .8s ease both;

}

@keyframes fadeSection{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

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

.service-card,
.product-card,
.portfolio-item,
.comparison-card{

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.service-card:hover,
.product-card:hover,
.portfolio-item:hover,
.comparison-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(0,0,0,.12);

}

/*==================================
ICON BOUNCE
==================================*/

.contact-item i{

    transition:transform .3s ease;

}

.contact-item:hover i{

    transform:scale(1.15);

}

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

.cta-box{

    position:relative;

    overflow:hidden;

}

.cta-box::after{

    content:"";

    position:absolute;

    inset:-40%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.12),
        transparent
    );

    transform:rotate(25deg) translateX(-120%);

    animation:shine 5s infinite;

}

@keyframes shine{

    to{

        transform:rotate(25deg) translateX(220%);

    }

}

/*==================================
SCROLL TO TOP
==================================*/

.scroll-top{

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

}

.scroll-top:hover{

    transform:translateY(-5px);

}

/*==================================
LOADING
==================================*/

body{

    opacity:0;

    transition:opacity .5s ease;

}

body.loaded{

    opacity:1;

}