/**
 * animation.css
 * Kabyapot Infinity AI X
 */

/* ==========================
   Fade In
========================== */

@keyframes kpFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.kp-fade-in {
    animation: kpFadeIn .8s ease-in-out;
}

/* ==========================
   Slide Up
========================== */

@keyframes kpSlideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.kp-slide-up {
    animation: kpSlideUp .8s ease;
}

/* ==========================
   Slide Left
========================== */

@keyframes kpSlideLeft {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.kp-slide-left {
    animation: kpSlideLeft .7s ease;
}

/* ==========================
   Zoom
========================== */

@keyframes kpZoom {
    from {
        transform: scale(.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.kp-zoom {
    animation: kpZoom .6s ease;
}

/* ==========================
   Hero Image Hover
========================== */

.kp-featured-image img,
.kp-post-item img {
    transition: transform .4s ease;
}

.kp-featured-image:hover img,
.kp-post-item:hover img {
    transform: scale(1.06);
}

/* ==========================
   Card Hover
========================== */

.kp-post-item,
.kp-featured-post {
    transition: all .35s ease;
}

.kp-post-item:hover,
.kp-featured-post:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0,0,0,.15);
}

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

.kp-btn,
.kp-readmore {
    transition: .3s;
}

.kp-btn:hover,
.kp-readmore:hover {
    transform: translateY(-2px);
}

/* ==========================
   Breaking News
========================== */

@keyframes kpTicker {

    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(-100%);
    }

}

.kp-breaking-list {
    white-space: nowrap;
    overflow: hidden;
}

.kp-breaking-list a {
    display: inline-block;
    padding-right: 50px;
    animation: kpTicker 20s linear infinite;
}

/* ==========================
   Pulse
========================== */

@keyframes kpPulse {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }

}

.kp-pulse {
    animation: kpPulse 2s infinite;
}

/* ==========================
   Smooth Scroll
========================== */

html {
    scroll-behavior: smooth;
}