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

.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}


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

.floating-card-one {
    animation: floatingOne 4s ease-in-out infinite;
}

.floating-card-two {
    animation: floatingTwo 4.5s ease-in-out infinite;
}

@keyframes floatingOne {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

}

@keyframes floatingTwo {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }

}


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

.btn-primary span,
.product-link span,
.screen-button span {
    transition: transform 0.25s ease;
}

.btn-primary:hover span,
.product-link:hover span,
.screen-button:hover span {
    transform: translateX(4px);
}


/* =========================
   ACCESSIBILITY
========================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }

}

/* =========================================================
   KARTEL62 FAST CELL
   GLOBAL ANIMATION SYSTEM
   ========================================================= */


/* =========================================================
   GLOBAL TRANSITION
   ========================================================= */

a,
button,
input,
select,
textarea,
.product-card,
.category-card,
.feature-card,
.contact-info-card,
.quick-help-card,
.faq-category-card {

    transition:
        color .25s ease,
        background-color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease,
        opacity .25s ease;

}


/* =========================================================
   REVEAL
   ========================================================= */

.reveal {

    opacity: 0;

    transform:
        translateY(22px);

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

}


.reveal.visible {

    opacity: 1;

    transform:
        translateY(0);

}


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

.product-grid .reveal:nth-child(2),
.category-grid .reveal:nth-child(2),
.feature-grid .reveal:nth-child(2),
.contact-info-grid .reveal:nth-child(2),
.quick-help-grid .reveal:nth-child(2) {

    transition-delay: .08s;

}


.product-grid .reveal:nth-child(3),
.category-grid .reveal:nth-child(3),
.feature-grid .reveal:nth-child(3),
.contact-info-grid .reveal:nth-child(3),
.quick-help-grid .reveal:nth-child(3) {

    transition-delay: .16s;

}


.product-grid .reveal:nth-child(4),
.category-grid .reveal:nth-child(4),
.feature-grid .reveal:nth-child(4),
.contact-info-grid .reveal:nth-child(4),
.quick-help-grid .reveal:nth-child(4) {

    transition-delay: .24s;

}


.product-grid .reveal:nth-child(5),
.category-grid .reveal:nth-child(5),
.feature-grid .reveal:nth-child(5) {

    transition-delay: .32s;

}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {

    transition:
        box-shadow .25s ease;

}


/* =========================================================
   MOBILE MENU ICON
   ========================================================= */

.mobile-toggle span {

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

}


.mobile-toggle.is-active span:nth-child(1) {

    transform:
        translateY(6px)
        rotate(45deg);

}


.mobile-toggle.is-active span:nth-child(2) {

    opacity: 0;

}


.mobile-toggle.is-active span:nth-child(3) {

    transform:
        translateY(-6px)
        rotate(-45deg);

}


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

.product-card-image img,
.hero-image img,
.contact-hero-image img,
.faq-hero-image img {

    transition:
        transform .5s ease;

}


.product-card:hover
.product-card-image img {

    transform:
        scale(1.04);

}


.hero-image:hover img,
.contact-hero-image:hover img,
.faq-hero-image:hover img {

    transform:
        scale(1.015);

}


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

.btn {

    position: relative;

    overflow: hidden;

}


.btn::after {

    content: "";

    position: absolute;

    top: 0;

    left: -100%;

    width: 60%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.18),
            transparent
        );

    transform: skewX(-20deg);

    transition:
        left .55s ease;

}


.btn:hover::after {

    left: 130%;

}


/* =========================================================
   FOCUS
   ========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {

    outline:
        3px solid
        rgba(37,99,235,.25);

    outline-offset: 3px;

}


/* =========================================================
   FAQ
   ========================================================= */

.faq-item p {

    animation:
        faqOpen .25s ease;

}


@keyframes faqOpen {

    from {

        opacity: 0;

        transform:
            translateY(-5px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   STATUS
   ========================================================= */

.status-box {

    animation:
        statusAppear .4s ease;

}


@keyframes statusAppear {

    from {

        opacity: 0;

        transform:
            translateY(8px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


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

.loading-pulse {

    animation:
        loadingPulse 1.5s ease-in-out infinite;

}


@keyframes loadingPulse {

    0%,
    100% {

        opacity: .55;

    }

    50% {

        opacity: 1;

    }

}


/* =========================================================
   FLOAT
   ========================================================= */

.float-animation {

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

}


@keyframes floatElement {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-7px);

    }

}


/* =========================================================
   DISABLE MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior:
            auto;

    }


    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;

    }


    .reveal {

        opacity: 1;

        transform:
            none;

    }

}