/**
 * Homepage desktop watercolor ambience — LocalBoost guest marketing.
 * Desktop only (≥1024px). Does not alter mobile/tablet layouts.
 */

@media (min-width: 1024px) {
    .lb-sales.lb-page {
        position: relative;
        isolation: isolate;
        --wc-teal: rgba(15, 118, 110, 0.26);
        --wc-lime: rgba(184, 218, 22, 0.32);
        --wc-mint: rgba(20, 184, 166, 0.2);
        --wc-sage: rgba(95, 127, 7, 0.14);
    }

    .lb-wc-canvas {
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
        pointer-events: none;
    }

    .lb-wc-blob {
        position: absolute;
        display: block;
        border-radius: 58% 42% 64% 36% / 48% 56% 44% 52%;
        filter: blur(42px) saturate(1.18);
        opacity: 0.72;
        will-change: transform;
        animation: lb-wc-float 24s ease-in-out infinite;
    }

    .lb-wc-blob--hero-teal {
        top: -4rem;
        left: -6rem;
        width: 34rem;
        height: 30rem;
        background:
            radial-gradient(circle at 38% 42%, var(--wc-teal), transparent 62%),
            radial-gradient(circle at 72% 68%, var(--wc-mint), transparent 58%);
        animation-duration: 26s;
    }

    .lb-wc-blob--hero-lime {
        top: 2rem;
        right: -2rem;
        width: 38rem;
        height: 34rem;
        background:
            radial-gradient(circle at 30% 34%, var(--wc-lime), transparent 60%),
            radial-gradient(circle at 78% 72%, var(--wc-sage), transparent 64%);
        animation-duration: 32s;
        animation-delay: -6s;
    }

    .lb-wc-blob--mid-teal {
        top: 42%;
        left: 8%;
        width: 28rem;
        height: 24rem;
        background: radial-gradient(circle at 50% 50%, var(--wc-teal), transparent 68%);
        opacity: 0.45;
        animation-duration: 30s;
        animation-delay: -12s;
    }

    .lb-wc-blob--mid-lime {
        top: 58%;
        right: 6%;
        width: 32rem;
        height: 28rem;
        background:
            radial-gradient(circle at 42% 38%, var(--wc-lime), transparent 62%),
            radial-gradient(circle at 70% 78%, var(--wc-mint), transparent 66%);
        opacity: 0.5;
        animation-duration: 28s;
        animation-delay: -4s;
    }

    .lb-wc-blob--foot {
        bottom: -6rem;
        left: 22%;
        width: 36rem;
        height: 28rem;
        background:
            radial-gradient(circle at 40% 40%, var(--wc-mint), transparent 64%),
            radial-gradient(circle at 68% 60%, var(--wc-lime), transparent 68%);
        opacity: 0.42;
        animation-duration: 34s;
        animation-delay: -18s;
    }

    .lb-sales.lb-page > :not(.lb-wc-canvas) {
        position: relative;
        z-index: 1;
    }

    .lb-hero-section {
        overflow: visible;
    }

    .lb-hero-section::before {
        content: "";
        position: absolute;
        inset: -2rem -3rem auto 28%;
        height: min(52vh, 34rem);
        z-index: -1;
        border-radius: 52% 48% 58% 42% / 44% 56% 40% 60%;
        background:
            radial-gradient(circle at 24% 30%, rgba(184, 218, 22, 0.28), transparent 58%),
            radial-gradient(circle at 76% 64%, rgba(15, 118, 110, 0.22), transparent 62%);
        filter: blur(22px) saturate(1.12);
        opacity: 0.82;
        pointer-events: none;
        animation: lb-wc-bloom 20s ease-in-out infinite alternate;
    }

    .lb-glow.lb-hero-preview::after {
        content: "";
        position: absolute;
        inset: 8% -8% -6% -4%;
        z-index: -1;
        border-radius: 46% 54% 52% 48% / 50% 46% 54% 50%;
        background:
            radial-gradient(circle at 34% 28%, rgba(184, 218, 22, 0.36), transparent 56%),
            radial-gradient(circle at 72% 70%, rgba(15, 118, 110, 0.3), transparent 60%),
            radial-gradient(circle at 50% 50%, rgba(255, 254, 251, 0.5), transparent 72%);
        filter: blur(18px);
        opacity: 0.9;
        pointer-events: none;
        animation: lb-wc-bloom 16s ease-in-out infinite alternate-reverse;
    }

    .lb-hero-dash {
        box-shadow:
            0 40px 100px -48px rgba(16, 37, 31, 0.62),
            0 0 0 1px rgba(255, 255, 255, 0.65),
            inset 0 1px 0 rgba(255, 255, 255, 0.82);
    }

    .lb-workflow-band {
        background:
            radial-gradient(ellipse 48% 42% at 14% 32%, rgba(15, 118, 110, 0.14), transparent 72%),
            radial-gradient(ellipse 40% 36% at 86% 48%, rgba(184, 218, 22, 0.22), transparent 70%),
            radial-gradient(circle at 18% 28%, rgba(15, 118, 110, 0.12), transparent 24rem),
            radial-gradient(circle at 76% 42%, rgba(184, 218, 22, 0.2), transparent 22rem);
    }

    .lb-band--mint::before {
        opacity: 0.92;
        background:
            radial-gradient(ellipse 55% 48% at 12% 22%, rgba(15, 118, 110, 0.16), transparent 72%),
            radial-gradient(ellipse 42% 38% at 88% 78%, rgba(184, 218, 22, 0.24), transparent 70%),
            linear-gradient(180deg, rgba(237, 245, 239, 0.72), rgba(247, 250, 246, 0.38));
        filter: blur(0.5px);
    }

    .lb-feature-alt {
        background:
            radial-gradient(ellipse 46% 40% at 10% 18%, rgba(15, 118, 110, 0.12), transparent 72%),
            radial-gradient(ellipse 38% 34% at 92% 82%, rgba(184, 218, 22, 0.2), transparent 70%),
            radial-gradient(circle at 88% 12%, rgba(184, 218, 22, 0.16), transparent 18rem),
            var(--lb-cream);
    }

    .lb-card,
    .lb-window,
    .lb-testimonial-card,
    .lb-workflow-card {
        background: color-mix(in srgb, rgba(255, 255, 252, 0.9) 86%, rgba(237, 245, 239, 0.4));
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .lb-social-proof {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
    }

    .lb-card.lb-hover:hover,
    .lb-testimonial-card:hover,
    .lb-step-card.lb-hover:hover {
        box-shadow:
            0 34px 90px -62px rgba(16, 37, 31, 0.58),
            0 0 0 1px color-mix(in srgb, var(--lb-green) 18%, var(--lb-line)),
            0 18px 48px -28px rgba(15, 118, 110, 0.12);
    }

    .lb-cta-panel {
        box-shadow:
            0 50px 120px -60px rgba(6, 20, 15, 0.9),
            0 0 0 1px rgba(184, 218, 22, 0.14),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    .lb-cta-panel::after {
        content: "";
        position: absolute;
        inset: -12% -8%;
        z-index: -1;
        border-radius: 50% 42% 58% 44% / 46% 54% 42% 56%;
        background:
            radial-gradient(circle at 30% 28%, rgba(20, 184, 166, 0.28), transparent 58%),
            radial-gradient(circle at 74% 72%, rgba(184, 218, 22, 0.22), transparent 62%);
        filter: blur(36px);
        opacity: 0.65;
        pointer-events: none;
    }

    .lb-pill {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    }

    .lb-button {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.22),
            0 22px 48px -30px rgba(15, 118, 110, 0.9),
            0 8px 24px -12px rgba(15, 118, 110, 0.28);
    }
}

@keyframes lb-wc-float {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
    33% {
        transform: translate3d(1.5%, -1.2%, 0) scale(1.03) rotate(1.5deg);
    }
    66% {
        transform: translate3d(-1.2%, 1.4%, 0) scale(0.98) rotate(-1deg);
    }
}

@keyframes lb-wc-bloom {
    0% {
        transform: scale(1) translate3d(0, 0, 0);
        opacity: 0.72;
    }
    100% {
        transform: scale(1.06) translate3d(1%, -1.5%, 0);
        opacity: 0.88;
    }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
    .lb-wc-blob,
    .lb-hero-section::before,
    .lb-glow.lb-hero-preview::after {
        animation: none !important;
    }
}

html[data-theme-resolved='dark'] .lb-wc-canvas {
    display: none;
}