.parallax-surface {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    --parallax-y: 0px;
    --parallax-bg-y: 0px;
    --parallax-opacity: 0.30;
}

.parallax-surface > :not(.parallax-field) {
    position: relative;
    z-index: 1;
}

.parallax-field {
    position: absolute;
    inset: -18% -8%;
    z-index: 0;
    pointer-events: none;
    opacity: var(--parallax-opacity);
    transform: translate3d(0, var(--parallax-y), 0);
    will-change: transform;
    contain: layout paint;
}

.parallax-field::before,
.parallax-field::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    filter: blur(36px);
    transform: translateZ(0);
}

.parallax-field::before {
    width: min(46vw, 620px);
    height: min(46vw, 620px);
    right: -8%;
    top: 4%;
    background:
        radial-gradient(circle at 40% 38%, rgba(255, 255, 255, 0.12), transparent 61%),
        radial-gradient(circle at 72% 66%, rgba(120, 214, 202, 0.11), transparent 60%);
}

.parallax-field::after {
    width: min(30vw, 420px);
    height: min(30vw, 420px);
    left: -7%;
    bottom: 7%;
    background:
        radial-gradient(circle at 44% 42%, rgba(198, 157, 98, 0.10), transparent 62%),
        radial-gradient(circle at 68% 68%, rgba(255, 255, 255, 0.06), transparent 58%);
}

.parallax-surface.parallax-hero .parallax-field,
.parallax-surface.parallax-cta .parallax-field {
    --parallax-opacity: 0.34;
}

.parallax-surface.parallax-has-bg::before {
    transform: scale(1.06) translate3d(0, var(--parallax-bg-y), 0) !important;
    will-change: transform;
}

html.a11y-on .parallax-field {
    display: none !important;
}

html.a11y-on .parallax-surface.parallax-has-bg::before {
    transform: scale(1.02) !important;
}

@media (max-width: 760px) {
    .parallax-field {
        inset: -10% -16%;
        opacity: calc(var(--parallax-opacity) * 0.6);
    }

    .parallax-field::before {
        width: 360px;
        height: 360px;
    }

    .parallax-field::after {
        width: 260px;
        height: 260px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .parallax-field {
        display: none !important;
    }

    .parallax-surface.parallax-has-bg::before {
        transform: scale(1.02) !important;
        will-change: auto;
    }
}