/* Community field: buyers on the left margin, shops on the right. Center stays calm. */

.hh-field {
    --hh-scroll: 0;
    --hh-mx: 0;
    --hh-my: 0;
    --hh-wx: 0;
    --hh-wy: 0;
    --hh-wheel: 0;
    --hh-hub-on: 0;
    position: fixed;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

#main,
.hh-landing-footer {
    position: relative;
    z-index: 1;
}

.hh-field__mesh,
.hh-field__aurora,
.hh-field__net,
.hh-field__vignette {
    position: absolute;
    inset: 0;
}

.hh-field__net {
    /* Hub wires must reach the phone; edge fade is handled in canvas clips. */
}

.hh-field__particles {
    position: fixed;
    inset: 0;
    z-index: 75;
    pointer-events: none;
}

.hh-field__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
    will-change: transform;
}

.hh-field__blob--buy {
    width: min(5rem, 7vw);
    height: min(28rem, 58vh);
    left: -2%;
    top: 18%;
    background: radial-gradient(circle, rgba(80, 67, 172, 0.22), transparent 72%);
    transform: translate3d(
        calc(var(--hh-mx) * -1.6vw + var(--hh-wx) * -1vw),
        calc(var(--hh-my) * -3vh + var(--hh-wy) * -4vh + var(--hh-scroll) * 4vh),
        0
    );
}

.hh-field__blob--sell {
    width: min(5rem, 7vw);
    height: min(28rem, 58vh);
    right: -2%;
    top: 22%;
    background: radial-gradient(circle, rgba(195, 87, 106, 0.16), transparent 72%);
    transform: translate3d(
        calc(var(--hh-mx) * 1.6vw + var(--hh-wx) * 1vw),
        calc(var(--hh-my) * 3vh + var(--hh-wy) * 4vh + var(--hh-scroll) * -3vh),
        0
    );
}

.dark .hh-field__blob--buy {
    background: radial-gradient(circle, rgba(124, 107, 214, 0.26), transparent 72%);
}

.dark .hh-field__blob--sell {
    background: radial-gradient(circle, rgba(195, 87, 106, 0.2), transparent 72%);
}

.hh-field__aurora {
    width: min(5rem, 7vw);
    height: 58%;
    top: 18%;
    filter: blur(28px);
    opacity: calc(0.28 + var(--hh-wheel) * 0.18);
    pointer-events: none;
}

.hh-field__aurora--left {
    left: 0;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(80, 67, 172, 0.14),
        transparent
    );
    transform: translate3d(0, calc(var(--hh-my) * 4% + var(--hh-wy) * 6%), 0);
}

.hh-field__aurora--right {
    right: 0;
    left: auto;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(195, 87, 106, 0.12),
        transparent
    );
    transform: translate3d(0, calc(var(--hh-my) * -4% + var(--hh-wy) * -6%), 0);
}

.dark .hh-field__aurora--left {
    background: linear-gradient(
        180deg,
        transparent,
        rgba(124, 107, 214, 0.18),
        transparent
    );
}

.dark .hh-field__aurora--right {
    background: linear-gradient(
        180deg,
        transparent,
        rgba(232, 150, 164, 0.14),
        transparent
    );
}

.hh-field__vignette {
    background:
        radial-gradient(120% 80% at 50% 20%, transparent 42%, color-mix(in srgb, var(--hh-bg) 46%, transparent) 100%);
}

.hh-hero.hh-hero--pairs {
    background:
        radial-gradient(60% 40% at 50% 0%, color-mix(in srgb, #ffffff 42%, transparent), transparent 72%),
        linear-gradient(180deg, color-mix(in srgb, #faf7ff 38%, transparent) 0%, transparent 78%);
}

.dark .hh-hero.hh-hero--pairs {
    background:
        radial-gradient(70% 50% at 50% 0%, rgba(80, 67, 172, 0.22), transparent 65%),
        linear-gradient(180deg, rgba(13, 16, 21, 0.2) 0%, transparent 70%);
}

.landing-features-section.hh-features--pin {
    background: color-mix(in srgb, var(--hh-bg) 48%, transparent) !important;
}

.dark .landing-features-section.hh-features--pin,
html.hh-landing body.dark .landing-features-section.hh-features--pin {
    background: color-mix(in srgb, #0d1015 42%, transparent) !important;
}

.hh-final.hh-final--pin {
    background: transparent;
}

@media (max-width: 1099px) {
    .hh-field__blob--buy,
    .hh-field__blob--sell {
        width: min(5rem, 7vw);
        height: min(14rem, 36vh);
        opacity: 0.55;
        transform: none;
    }
}

@media (max-width: 767px) {
    .hh-field__blob--buy,
    .hh-field__blob--sell {
        opacity: 0.4;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hh-field__blob,
    .hh-field__aurora {
        transform: none !important;
        filter: none;
    }

    .hh-field__blob--buy {
        left: 0;
        top: 24%;
        opacity: 0.35;
    }

    .hh-field__blob--sell {
        right: 0;
        top: 28%;
        opacity: 0.3;
    }

    .hh-field__aurora,
    .hh-field__net,
    .hh-field__particles {
        display: none;
    }
}