/* ======= THEME SHIFT TRANSITION ======= */
html.theme-shift,
html.theme-shift body,
html.theme-shift .hdr,
html.theme-shift .hero,
html.theme-shift .svc,
html.theme-shift .case,
html.theme-shift .testi,
html.theme-shift .bento-card,
html.theme-shift .cert,
html.theme-shift .tl-card,
html.theme-shift .tools-wrap,
html.theme-shift .cta-box,
html.theme-shift .ft,
html.theme-shift .stats-bar,
html.theme-shift .platforms,
html.theme-shift .clients-trust {
    transition: background-color .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease !important
}

/* ======= SCROLL REVEAL ======= */
.rv {
    opacity: 0;
    transform: translateY(28px) scale(.98);
    transition: opacity .65s cubic-bezier(.22, .61, .36, 1), transform .65s cubic-bezier(.22, .61, .36, 1)
}

.rv.on {
    opacity: 1;
    transform: translateY(0) scale(1)
}

.rv-d1 {
    transition-delay: .1s
}

.rv-d2 {
    transition-delay: .18s
}

.rv-d3 {
    transition-delay: .26s
}

.rv-d4 {
    transition-delay: .34s
}

.rv-d5 {
    transition-delay: .42s
}

.rv-d6 {
    transition-delay: .5s
}

.rv-d7 {
    transition-delay: .58s
}

.rv-d8 {
    transition-delay: .66s
}

.rv-d9 {
    transition-delay: .74s
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce) {
    .rv {
        opacity: 1;
        transform: none;
        transition: none
    }

    .rv-d1,
    .rv-d2,
    .rv-d3,
    .rv-d4,
    .rv-d5,
    .rv-d6,
    .rv-d7,
    .rv-d8,
    .rv-d9 {
        transition-delay: 0s
    }
}

/* ======= KEYFRAMES ======= */
@keyframes float {

    0%,
    100% {
        transform: translate(0, 0) scale(1)
    }

    33% {
        transform: translate(25px, -35px) scale(1.03)
    }

    66% {
        transform: translate(-20px, 25px) scale(.97)
    }
}

@keyframes pulse-dot {

    0%,
    100% {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .5;
        transform: scale(.8)
    }
}

@keyframes marquee {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-50%)
    }
}

@keyframes gradient-shift {

    0%,
    100% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }
}

@keyframes counter-up {
    from {
        opacity: 0;
        transform: translateY(12px)
    }

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

@keyframes shimmer {
    0% {
        background-position: -200% 0
    }

    100% {
        background-position: 200% 0
    }
}

@keyframes blob {

    0%,
    100% {
        border-radius: 60% 40% 30% 70%/60% 30% 70% 40%
    }

    50% {
        border-radius: 30% 60% 70% 40%/50% 60% 30% 60%
    }
}

/* ======= SKELETON LOADING ======= */
.skel {
    position: relative;
    overflow: hidden
}

.skel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    z-index: 3;
    border-radius: inherit;
    pointer-events: none
}

.skel .svc-top,
.skel .svc-desc,
.skel .svc-feats,
.skel .svc-result,
.skel .case-badge,
.skel h3,
.skel .case-metrics,
.skel .case-det,
.skel .case-tags,
.skel .case-period,
.skel .testi-stars,
.skel .testi-quote,
.skel .testi-author {
    opacity: 0
}

.skel-bar {
    height: 14px;
    border-radius: 4px;
    background: var(--bg3)
}

.skel-bar.w60 {
    width: 60%
}

.skel-bar.w80 {
    width: 80%
}

.skel-bar.w40 {
    width: 40%
}

.skel-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg3)
}

body.loaded .skel::after {
    animation: none;
    opacity: 0;
    transition: opacity .3s ease
}

body.loaded .skel .svc-top,
body.loaded .skel .svc-desc,
body.loaded .skel .svc-feats,
body.loaded .skel .svc-result,
body.loaded .skel .case-badge,
body.loaded .skel h3,
body.loaded .skel .case-metrics,
body.loaded .skel .case-det,
body.loaded .skel .case-tags,
body.loaded .skel .case-period,
body.loaded .skel .testi-stars,
body.loaded .skel .testi-quote,
body.loaded .skel .testi-author {
    opacity: 1;
    transition: opacity .4s var(--ease)
}

/* ======= CURSOR GLOW ======= */
.cursor-glow {
    position: fixed;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 99, 235, .05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    transform: translate(-50%, -50%);
    will-change: left, top
}

/* ======= GRAIN ======= */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.018'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: -1;
    opacity: .35
}