:root {
    --kk-motion-duration: 2000ms;
    --kk-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html.kk-animate-ready body {
    opacity: 0;
}

html.kk-animate-ready.kk-page-loaded body {
    opacity: 1;
    transition: opacity 900ms var(--kk-motion-ease);
}

html.kk-animate-ready .kk-reveal {
    opacity: 0;
    transform: translateY(80px);
    filter: blur(10px);
    will-change: opacity, transform, filter;
    transition:
        opacity var(--kk-motion-duration) var(--kk-motion-ease),
        transform var(--kk-motion-duration) var(--kk-motion-ease),
        filter var(--kk-motion-duration) var(--kk-motion-ease);
    transition-delay: var(--kk-delay, 0ms);
}

html.kk-animate-ready .kk-reveal.kk-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

html.kk-animate-ready .site-header.kk-reveal {
    transform: translateY(-28px);
    transition-duration: 1200ms;
}

html.kk-animate-ready .hero.kk-reveal,
html.kk-animate-ready .page-hero.kk-reveal,
html.kk-animate-ready main > .section:first-child.kk-reveal {
    transition-duration: 2100ms;
}

html.kk-animate-ready .kk-media-reveal {
    opacity: 0;
    transform: scale(1.08);
    filter: blur(10px);
    will-change: opacity, transform, filter;
    transition:
        opacity 1800ms var(--kk-motion-ease),
        transform 2200ms var(--kk-motion-ease),
        filter 1800ms var(--kk-motion-ease);
    transition-delay: var(--kk-delay, 0ms);
}

html.kk-animate-ready .kk-media-reveal.kk-visible,
html.kk-animate-ready .kk-visible .kk-media-reveal {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}

html.kk-animate-ready .kk-text-reveal {
    opacity: 0;
    transform: translateY(34px);
    filter: blur(8px);
    will-change: opacity, transform, filter;
    transition:
        opacity 1800ms var(--kk-motion-ease),
        transform 1800ms var(--kk-motion-ease),
        filter 1800ms var(--kk-motion-ease);
    transition-delay: var(--kk-delay, 0ms);
}

html.kk-animate-ready .kk-text-reveal.kk-visible,
html.kk-animate-ready .kk-visible .kk-text-reveal {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.button,
.nav-cta {
    transition:
        transform 420ms var(--kk-motion-ease),
        box-shadow 420ms var(--kk-motion-ease),
        filter 420ms var(--kk-motion-ease),
        background-color 420ms var(--kk-motion-ease),
        border-color 420ms var(--kk-motion-ease);
}

.button:hover,
.nav-cta:hover {
    transform: translateY(-2px) scale(1.015);
    box-shadow: 0 18px 42px rgba(10, 14, 26, .14);
}

.card,
.contact-card,
.faq-item,
.stat-block,
.process > div {
    transition:
        transform 520ms var(--kk-motion-ease),
        box-shadow 520ms var(--kk-motion-ease),
        border-color 520ms var(--kk-motion-ease),
        filter 520ms var(--kk-motion-ease);
}

.card:hover,
.contact-card:hover,
.faq-item:hover,
.process > div:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 62px rgba(10, 14, 26, .13);
}

img,
.browser-frame,
.hero-bg-video {
    transition:
        transform 900ms var(--kk-motion-ease),
        filter 900ms var(--kk-motion-ease);
}

img:hover,
.browser-frame:hover {
    transform: scale(1.018);
}

.site-nav a {
    overflow: hidden;
}

.site-nav a::after,
.card a::after,
.showcase-row a::after,
.site-footer a::after {
    transition: transform 420ms var(--kk-motion-ease);
}

.icon-badge,
.brand .wordmark span:first-child {
    transition: transform 420ms var(--kk-motion-ease);
}

.card:hover .icon-badge,
.brand:hover .wordmark span:first-child {
    transform: scale(1.04) rotate(-2deg);
}

@media (prefers-reduced-motion: reduce) {
    html.kk-animate-ready body,
    html.kk-animate-ready .kk-reveal,
    html.kk-animate-ready .kk-media-reveal,
    html.kk-animate-ready .kk-text-reveal {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition-duration: 1ms !important;
        transition-delay: 0ms !important;
    }
}