/* =========================================================
   Global Scroll Reveal
========================================================= */

.ktl-reveal-up {
    opacity: 1;
    transform: translateY(0);
}

.ktl-reveal-up.ktl-reveal-pending {
    opacity: 0;
    transform: translateY(48px);
    transition:
        opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.ktl-reveal-up.ktl-reveal-pending.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   Global Scroll Reveal Delays
========================================================= */

.ktl-reveal-delay-1 {
    transition-delay: 0.12s;
}

.ktl-reveal-delay-2 {
    transition-delay: 0.24s;
}

.ktl-reveal-delay-3 {
    transition-delay: 0.36s;
}

.ktl-reveal-delay-4 {
    transition-delay: 0.48s;
}


/* =========================================================
   Home Page - Hero Animation
========================================================= */

.ktl-hero-content .ktl-reveal-up {
    opacity: 0;
    transform: translateY(40px);
    animation: ktlHeroRevealUp 1.05s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    will-change: opacity, transform;
}

.ktl-hero-content .ktl-reveal-delay-1 {
    animation-delay: 0.16s;
}

.ktl-hero-content .ktl-reveal-delay-2 {
    animation-delay: 0.32s;
}

.ktl-hero-content .ktl-reveal-delay-3 {
    animation-delay: 0.48s;
}

.ktl-hero-content .ktl-reveal-delay-4 {
    animation-delay: 0.64s;
}

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

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


/* =========================================================
   Home Page - Services Sequence
========================================================= */

.ktl-home-seq {
    opacity: 0;
    transform: translateY(40px);
    animation: ktlHomeSequenceUp 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    will-change: opacity, transform;
}

.ktl-home-seq-services-eyebrow {
    animation-delay: 1.10s;
}

.ktl-home-seq-services-title {
    animation-delay: 1.24s;
}

.ktl-home-seq-card-1 {
    animation-delay: 1.40s;
}

.ktl-home-seq-card-2 {
    animation-delay: 1.54s;
}

.ktl-home-seq-card-3 {
    animation-delay: 1.68s;
}

.ktl-home-seq-card-4 {
    animation-delay: 1.82s;
}

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

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


/* =========================================================
   Home Page - Process Extra Delays
========================================================= */

.ktl-process-delay-5 {
    transition-delay: 0.60s;
}

.ktl-process-delay-6 {
    transition-delay: 0.72s;
}


/* =========================================================
   About Page - Hero Animation
========================================================= */

.ktl-about-hero-content .ktl-reveal-up {
    animation: ktlAboutHeroRevealUp 1.05s cubic-bezier(0.22, 1, 0.36, 1) both;
    will-change: opacity, transform;
}

.ktl-about-hero-content .ktl-reveal-delay-1 {
    animation-delay: 0.16s;
}

.ktl-about-hero-content .ktl-reveal-delay-2 {
    animation-delay: 0.32s;
}

.ktl-about-hero-content .ktl-reveal-delay-3 {
    animation-delay: 0.48s;
}

.ktl-about-hero-content .ktl-reveal-delay-4 {
    animation-delay: 0.64s;
}

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

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


/* =========================================================
   About Page - Intro Sequence
========================================================= */

.ktl-about-seq {
    opacity: 0;
    transform: translateY(40px);
    animation: ktlAboutIntroRevealUp 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    will-change: opacity, transform;
}

.ktl-about-seq-eyebrow {
    animation-delay: 1.10s;
}

.ktl-about-seq-title {
    animation-delay: 1.24s;
}

.ktl-about-seq-desc {
    animation-delay: 1.40s;
}

.ktl-about-seq-button {
    animation-delay: 1.54s;
}

.ktl-about-seq-image {
    animation-delay: 1.24s;
}

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

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


/* =========================================================
   About Page - Commitment Extra Delay
========================================================= */

.ktl-about-commitment-btn-delay {
    transition-delay: 0.60s;
}


/* =========================================================
   Service Page - Hero Animation
========================================================= */

.ktl-service-hero-content .ktl-reveal-up {
    animation: ktlServiceHeroRevealUp 1.05s cubic-bezier(0.22, 1, 0.36, 1) both;
    will-change: opacity, transform;
}

.ktl-service-hero-content .ktl-reveal-delay-1 {
    animation-delay: 0.16s;
}

.ktl-service-hero-content .ktl-reveal-delay-2 {
    animation-delay: 0.32s;
}

.ktl-service-hero-content .ktl-reveal-delay-3 {
    animation-delay: 0.48s;
}

.ktl-service-hero-content .ktl-reveal-delay-4 {
    animation-delay: 0.64s;
}

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

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


/* =========================================================
   Service Page - Main Services Sequence
========================================================= */

.ktl-service-seq {
    opacity: 0;
    transform: translateY(40px);
    animation: ktlServiceSequenceUp 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    will-change: opacity, transform;
}

.ktl-service-seq-title {
    animation-delay: 1.10s;
}

.ktl-service-seq-card-1 {
    animation-delay: 1.40s;
}

.ktl-service-seq-card-2 {
    animation-delay: 1.54s;
}

.ktl-service-seq-card-3 {
    animation-delay: 1.68s;
}

.ktl-service-seq-card-4 {
    animation-delay: 1.82s;
}

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

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


/* =========================================================
   Contact Page - Hero Animation
========================================================= */

.ktl-contact-hero .ktl-reveal-up {
    animation: ktlContactHeroRevealUp 1.05s cubic-bezier(0.22, 1, 0.36, 1) both;
    will-change: opacity, transform;
}

.ktl-contact-hero .ktl-reveal-delay-1 {
    animation-delay: 0.16s;
}

.ktl-contact-hero .ktl-reveal-delay-2 {
    animation-delay: 0.32s;
}

.ktl-contact-hero .ktl-reveal-delay-3 {
    animation-delay: 0.48s;
}

.ktl-contact-hero .ktl-reveal-delay-4 {
    animation-delay: 0.64s;
}

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

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


/* =========================================================
   Contact Page - Contact Cards Sequence
========================================================= */

.ktl-contact-seq {
    opacity: 0;
    transform: translateY(40px);
    animation: ktlContactSequenceUp 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    will-change: opacity, transform;
}

.ktl-contact-seq-card-1 {
    animation-delay: 1.10s;
}

.ktl-contact-seq-card-2 {
    animation-delay: 1.24s;
}

.ktl-contact-seq-card-3 {
    animation-delay: 1.40s;
}

.ktl-contact-seq-card-4 {
    animation-delay: 1.54s;
}

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

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


/* =========================================================
   News Page - Hero Animation
========================================================= */

.ktl-news-hero-content .ktl-reveal-up {
    animation: ktlNewsHeroRevealUp 1.05s cubic-bezier(0.22, 1, 0.36, 1) both;
    will-change: opacity, transform;
}

.ktl-news-hero-content .ktl-reveal-delay-1 {
    animation-delay: 0.16s;
}

.ktl-news-hero-content .ktl-reveal-delay-2 {
    animation-delay: 0.32s;
}

.ktl-news-hero-content .ktl-reveal-delay-3 {
    animation-delay: 0.48s;
}

.ktl-news-hero-content .ktl-reveal-delay-4 {
    animation-delay: 0.64s;
}

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

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


/* =========================================================
   Project Page - Hero Animation
========================================================= */

.ktl-project-hero-content .ktl-reveal-up {
    animation: ktlProjectHeroRevealUp 1.05s cubic-bezier(0.22, 1, 0.36, 1) both;
    will-change: opacity, transform;
}

.ktl-project-hero-content .ktl-reveal-delay-1 {
    animation-delay: 0.16s;
}

.ktl-project-hero-content .ktl-reveal-delay-2 {
    animation-delay: 0.32s;
}

.ktl-project-hero-content .ktl-reveal-delay-3 {
    animation-delay: 0.48s;
}

.ktl-project-hero-content .ktl-reveal-delay-4 {
    animation-delay: 0.64s;
}

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

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



/* =========================================================
   News Page - Listing Intro Sequence
========================================================= */

.ktl-news-seq {
    opacity: 0;
    transform: translateY(40px);
    animation: ktlNewsSequenceUp 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    will-change: opacity, transform;
}

.ktl-news-seq-filter {
    animation-delay: 1.10s;
}

.ktl-news-seq-image {
    animation-delay: 1.24s;
}

.ktl-news-seq-content {
    animation-delay: 1.40s;
}

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

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


/* =========================================================
   Project Page - Listing Intro Sequence
========================================================= */

.ktl-project-seq {
    opacity: 0;
    transform: translateY(40px);
    animation: ktlProjectSequenceUp 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    will-change: opacity, transform;
}

.ktl-project-seq-filter {
    animation-delay: 1.10s;
}

.ktl-project-seq-image {
    animation-delay: 1.24s;
}

.ktl-project-seq-content {
    animation-delay: 1.40s;
}

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

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


/* =========================================================
   Shop Page - Hero Animation
========================================================= */

.ktl-shop-page .ktl-shop-breadcrumb {
    animation: ktlShopHeroRevealUp 1.05s cubic-bezier(0.22, 1, 0.36, 1) both;
    will-change: opacity, transform;
}

.ktl-shop-page .ktl-shop-hero-title {
    animation: ktlShopHeroRevealUp 1.05s 0.16s cubic-bezier(0.22, 1, 0.36, 1) both;
    will-change: opacity, transform;
}

.ktl-shop-page .ktl-shop-hero-desc {
    animation: ktlShopHeroRevealUp 1.05s 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
    will-change: opacity, transform;
}

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

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


/* =========================================================
   Shop Page - Brands Sequence
========================================================= */

.ktl-shop-seq {
    opacity: 0;
    transform: translateY(40px);
    animation: ktlShopSequenceUp 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    will-change: opacity, transform;
}

.ktl-shop-seq-eyebrow {
    animation-delay: 1.10s;
}

.ktl-shop-seq-card-1 {
    animation-delay: 1.24s;
}

.ktl-shop-seq-card-2 {
    animation-delay: 1.40s;
}

.ktl-shop-seq-card-3 {
    animation-delay: 1.54s;
}

.ktl-shop-seq-card-4 {
    animation-delay: 1.68s;
}

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

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


/* =========================================================
   Animation Resource Cleanup
========================================================= */

.ktl-animation-complete {
    will-change: auto !important;
}


/* =========================================================
   Mobile Animation
========================================================= */

@media (max-width: 767px) {

    .ktl-reveal-up.ktl-reveal-pending {
        transform: translateY(28px);
    }

    .ktl-reveal-up.ktl-reveal-pending.is-visible {
        transform: translateY(0);
    }

    .ktl-hero-content .ktl-reveal-up {
        transform: translateY(28px);
    }

    .ktl-home-seq {
        transform: translateY(28px);
    }

    .ktl-about-hero-content .ktl-reveal-up {
        transform: translateY(28px);
    }

    .ktl-about-seq {
        transform: translateY(28px);
    }

    .ktl-service-hero-content .ktl-reveal-up {
        transform: translateY(28px);
    }

    .ktl-service-seq {
        transform: translateY(28px);
    }

    .ktl-contact-hero .ktl-reveal-up {
        transform: translateY(28px);
    }

    .ktl-contact-seq {
        transform: translateY(28px);
    }

    .ktl-news-hero-content .ktl-reveal-up {
        transform: translateY(28px);
    }

    .ktl-project-hero-content .ktl-reveal-up {
        transform: translateY(28px);
    }

    .ktl-news-seq,
    .ktl-project-seq,
    .ktl-shop-seq,
    .ktl-shop-page .ktl-shop-breadcrumb,
    .ktl-shop-page .ktl-shop-hero-title,
    .ktl-shop-page .ktl-shop-hero-desc {
        transform: translateY(28px);
    }


    /* Home Page - Hero Mobile */

    @keyframes ktlHeroRevealUp {
        from {
            opacity: 0;
            transform: translateY(28px);
        }

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


    /* Home Page - Services Mobile */

    @keyframes ktlHomeSequenceUp {
        from {
            opacity: 0;
            transform: translateY(28px);
        }

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


    /* About Page - Hero Mobile */

    @keyframes ktlAboutHeroRevealUp {
        from {
            opacity: 0;
            transform: translateY(28px);
        }

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


    /* About Page - Intro Mobile */

    @keyframes ktlAboutIntroRevealUp {
        from {
            opacity: 0;
            transform: translateY(28px);
        }

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


    /* Service Page - Hero Mobile */

    @keyframes ktlServiceHeroRevealUp {
        from {
            opacity: 0;
            transform: translateY(28px);
        }

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


    /* Service Page - Main Services Mobile */

    @keyframes ktlServiceSequenceUp {
        from {
            opacity: 0;
            transform: translateY(28px);
        }

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


    /* Contact Page - Hero Mobile */

    @keyframes ktlContactHeroRevealUp {
        from {
            opacity: 0;
            transform: translateY(28px);
        }

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


    /* Contact Page - Contact Cards Mobile */

    @keyframes ktlContactSequenceUp {
        from {
            opacity: 0;
            transform: translateY(28px);
        }

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


    /* News Page - Hero Mobile */

    @keyframes ktlNewsHeroRevealUp {
        from {
            opacity: 0;
            transform: translateY(28px);
        }

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


    /* Project Page - Hero Mobile */

    @keyframes ktlProjectHeroRevealUp {
        from {
            opacity: 0;
            transform: translateY(28px);
        }

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


    /* News Page - Listing Intro Mobile */

    @keyframes ktlNewsSequenceUp {
        from {
            opacity: 0;
            transform: translateY(28px);
        }

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


    /* Project Page - Listing Intro Mobile */

    @keyframes ktlProjectSequenceUp {
        from {
            opacity: 0;
            transform: translateY(28px);
        }

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


    /* Shop Page - Hero Mobile */

    @keyframes ktlShopHeroRevealUp {
        from {
            opacity: 0;
            transform: translateY(28px);
        }

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


    /* Shop Page - Brands Mobile */

    @keyframes ktlShopSequenceUp {
        from {
            opacity: 0;
            transform: translateY(28px);
        }

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


/* =========================================================
   Accessibility - Reduced Motion
========================================================= */

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

    .ktl-reveal-up,
    .ktl-reveal-up.ktl-reveal-pending,
    .ktl-reveal-up.ktl-reveal-pending.is-visible,
    .ktl-hero-content .ktl-reveal-up,
    .ktl-about-hero-content .ktl-reveal-up,
    .ktl-service-hero-content .ktl-reveal-up,
    .ktl-contact-hero .ktl-reveal-up,
    .ktl-news-hero-content .ktl-reveal-up,
    .ktl-project-hero-content .ktl-reveal-up,
    .ktl-home-seq,
    .ktl-about-seq,
    .ktl-service-seq,
    .ktl-contact-seq,
    .ktl-news-seq,
    .ktl-project-seq,
    .ktl-shop-seq,
    .ktl-shop-page .ktl-shop-breadcrumb,
    .ktl-shop-page .ktl-shop-hero-title,
    .ktl-shop-page .ktl-shop-hero-desc {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}