:root {
    --gloo-bg-color-1: #7c3cff;
    --gloo-bg-color-2: #00d4ff;
    --gloo-bg-color-3: #ff4ecd;
    --gloo-bg-base: #070817;
    --gloo-bg-opacity: .74;
    --gloo-bg-blur: 64px;
    --gloo-bg-speed: 38s;
    --gloo-bg-intensity: .54;
    --gloo-bg-z-index: -1;
    --gloo-particle-size: 4;
    --gloo-custom-size: 24px;
    --gloo-spot-1-x: 16%;
    --gloo-spot-1-y: 22%;
    --gloo-spot-2-x: 82%;
    --gloo-spot-2-y: 18%;
    --gloo-spot-3-x: 72%;
    --gloo-spot-3-y: 76%;
    --gloo-spot-4-x: 24%;
    --gloo-spot-4-y: 84%;
    --gloo-orb-1-x: 8%;
    --gloo-orb-1-y: 5%;
    --gloo-orb-2-x: 68%;
    --gloo-orb-2-y: 12%;
    --gloo-orb-3-x: 42%;
    --gloo-orb-3-y: 62%;
    --gloo-rotate-a: 0deg;
    --gloo-rotate-b: 8deg;
}

.gloo-motion-bg,
.gloo-motion-bg * {
    box-sizing: border-box;
}

.gloo-motion-bg {
    --gloo-mx: 0px;
    --gloo-my: 0px;
    pointer-events: none;
    overflow: hidden;
    opacity: var(--gloo-bg-opacity);
    isolation: isolate;
    contain: paint;
}

.gloo-motion-bg--fixed {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: var(--gloo-bg-z-index);
}

html.gloo-motion-global-active {
    background: var(--gloo-bg-base);
}

body.gloo-motion-global-active {
    position: relative;
    z-index: 0;
    min-height: 100vh;
    background: transparent !important;
}

body.gloo-motion-global-active > .gloo-motion-bg--fixed {
    z-index: -1;
}

.gloo-motion-bg--inside {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
}

.gloo-motion-section,
.gloo-motion-host {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.gloo-motion-content-lift {
    position: relative;
    z-index: 1;
}

.gloo-motion-section {
    min-height: var(--gloo-section-height, 420px);
    display: grid;
    align-items: center;
    border-radius: 28px;
    background: var(--gloo-bg-base);
}

.gloo-motion-section__content {
    position: relative;
    z-index: 1;
    padding: clamp(28px, 7vw, 96px);
}

.gloo-motion-bg__base,
.gloo-motion-bg__mesh,
.gloo-motion-bg__orb,
.gloo-motion-bg__grid,
.gloo-motion-bg__canvas,
.gloo-motion-bg__vignette {
    position: absolute;
    inset: 0;
}

.gloo-motion-bg__base {
    background:
        radial-gradient(circle at 50% 10%, color-mix(in srgb, var(--gloo-bg-color-1) 20%, transparent), transparent 36%),
        linear-gradient(135deg, color-mix(in srgb, var(--gloo-bg-base) 92%, #000), var(--gloo-bg-base));
}

.gloo-motion-bg__mesh {
    background:
        radial-gradient(circle at var(--gloo-spot-1-x) var(--gloo-spot-1-y), color-mix(in srgb, var(--gloo-bg-color-1) 88%, transparent), transparent 31%),
        radial-gradient(circle at var(--gloo-spot-2-x) var(--gloo-spot-2-y), color-mix(in srgb, var(--gloo-bg-color-2) 82%, transparent), transparent 30%),
        radial-gradient(circle at var(--gloo-spot-3-x) var(--gloo-spot-3-y), color-mix(in srgb, var(--gloo-bg-color-3) 78%, transparent), transparent 34%),
        radial-gradient(circle at var(--gloo-spot-4-x) var(--gloo-spot-4-y), color-mix(in srgb, var(--gloo-bg-color-2) 58%, transparent), transparent 30%);
    filter: blur(calc(var(--gloo-bg-blur) * .42));
    opacity: calc(.7 + var(--gloo-bg-intensity) * .26);
    transform: translate3d(var(--gloo-mx), var(--gloo-my), 0) scale(1.08) rotate(var(--gloo-rotate-a));
    animation: gloo-mesh-float var(--gloo-bg-speed) ease-in-out infinite alternate;
}

.gloo-motion-bg__orb {
    width: clamp(180px, 32vw, 560px);
    height: clamp(180px, 32vw, 560px);
    border-radius: 999px;
    filter: blur(var(--gloo-bg-blur));
    mix-blend-mode: screen;
    opacity: calc(.58 + var(--gloo-bg-intensity) * .3);
    will-change: transform;
}

.gloo-motion-bg__orb--one {
    left: var(--gloo-orb-1-x);
    top: var(--gloo-orb-1-y);
    background: var(--gloo-bg-color-1);
    animation: gloo-orb-one calc(var(--gloo-bg-speed) * 1.2) ease-in-out infinite alternate;
}

.gloo-motion-bg__orb--two {
    left: var(--gloo-orb-2-x);
    top: var(--gloo-orb-2-y);
    background: var(--gloo-bg-color-2);
    animation: gloo-orb-two calc(var(--gloo-bg-speed) * .95) ease-in-out infinite alternate;
}

.gloo-motion-bg__orb--three {
    left: var(--gloo-orb-3-x);
    top: var(--gloo-orb-3-y);
    background: var(--gloo-bg-color-3);
    animation: gloo-orb-three calc(var(--gloo-bg-speed) * 1.35) ease-in-out infinite alternate;
}

.gloo-motion-bg__grid {
    background-image:
        linear-gradient(color-mix(in srgb, var(--gloo-bg-color-2) 34%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--gloo-bg-color-1) 30%, transparent) 1px, transparent 1px),
        radial-gradient(circle at 50% 105%, color-mix(in srgb, var(--gloo-bg-color-3) 35%, transparent), transparent 34%);
    background-size: 56px 56px, 56px 56px, 100% 100%;
    mask-image: radial-gradient(circle at 50% 58%, black, transparent 76%);
    opacity: .36;
    transform: perspective(900px) rotateX(58deg) scale(1.45) translateY(16%);
    transform-origin: center bottom;
    animation: gloo-grid-slide calc(var(--gloo-bg-speed) * 1.4) linear infinite;
}

.gloo-motion-bg__canvas {
    width: 100%;
    height: 100%;
    opacity: calc(.46 + var(--gloo-bg-intensity) * .42);
}

.gloo-motion-bg__vignette {
    background:
        radial-gradient(circle at 50% 42%, transparent 0 54%, rgba(0,0,0,.12) 100%),
        linear-gradient(180deg, rgba(0,0,0,.03), transparent 30%, rgba(0,0,0,.05));
}

/* Distinct effect modes */
.gloo-motion-bg[data-gloo-effect="aurora"] .gloo-motion-bg__grid,
.gloo-motion-bg[data-gloo-effect="aurora"] .gloo-motion-bg__canvas {
    display: none;
}

.gloo-motion-bg[data-gloo-effect="aurora"] .gloo-motion-bg__mesh {
    filter: blur(calc(var(--gloo-bg-blur) * .35));
    opacity: calc(.82 + var(--gloo-bg-intensity) * .18);
}

.gloo-motion-bg[data-gloo-effect="gradient"] .gloo-motion-bg__orb,
.gloo-motion-bg[data-gloo-effect="gradient"] .gloo-motion-bg__grid,
.gloo-motion-bg[data-gloo-effect="gradient"] .gloo-motion-bg__canvas {
    display: none;
}

.gloo-motion-bg[data-gloo-effect="gradient"] .gloo-motion-bg__mesh {
    filter: blur(calc(var(--gloo-bg-blur) * .18));
    opacity: calc(.86 + var(--gloo-bg-intensity) * .12);
    background:
        radial-gradient(circle at var(--gloo-spot-1-x) var(--gloo-spot-1-y), color-mix(in srgb, var(--gloo-bg-color-1) 96%, transparent), transparent 28%),
        radial-gradient(circle at var(--gloo-spot-2-x) var(--gloo-spot-2-y), color-mix(in srgb, var(--gloo-bg-color-2) 94%, transparent), transparent 28%),
        radial-gradient(circle at var(--gloo-spot-3-x) var(--gloo-spot-3-y), color-mix(in srgb, var(--gloo-bg-color-3) 92%, transparent), transparent 31%),
        linear-gradient(135deg, color-mix(in srgb, var(--gloo-bg-color-1) 18%, transparent), color-mix(in srgb, var(--gloo-bg-color-2) 14%, transparent));
}

.gloo-motion-bg[data-gloo-effect="blobs"] .gloo-motion-bg__mesh,
.gloo-motion-bg[data-gloo-effect="blobs"] .gloo-motion-bg__grid,
.gloo-motion-bg[data-gloo-effect="blobs"] .gloo-motion-bg__canvas {
    display: none;
}

.gloo-motion-bg[data-gloo-effect="blobs"] .gloo-motion-bg__orb {
    opacity: calc(.7 + var(--gloo-bg-intensity) * .26);
    filter: blur(calc(var(--gloo-bg-blur) * .92));
}

.gloo-motion-bg[data-gloo-effect="particles"] .gloo-motion-bg__grid,
.gloo-motion-bg[data-gloo-effect="particles"] .gloo-motion-bg__orb {
    display: none;
}

.gloo-motion-bg[data-gloo-effect="particles"] .gloo-motion-bg__mesh {
    opacity: .3;
    filter: blur(calc(var(--gloo-bg-blur) * .62));
}

.gloo-motion-bg[data-gloo-effect="grid"] .gloo-motion-bg__orb {
    display: none;
}

.gloo-motion-bg[data-gloo-effect="grid"] .gloo-motion-bg__mesh {
    opacity: .42;
}

.gloo-motion-bg[data-gloo-effect="grid"] .gloo-motion-bg__grid {
    opacity: calc(.58 + var(--gloo-bg-intensity) * .24);
}

.gloo-motion-bg[data-gloo-effect="custom"] .gloo-motion-bg__orb,
.gloo-motion-bg[data-gloo-effect="custom"] .gloo-motion-bg__grid {
    display: none;
}

.gloo-motion-bg[data-gloo-effect="custom"] .gloo-motion-bg__mesh {
    opacity: .22;
    filter: blur(calc(var(--gloo-bg-blur) * .72));
}

.gloo-motion-bg[data-gloo-effect="custom"] .gloo-motion-bg__canvas {
    opacity: calc(.62 + var(--gloo-bg-intensity) * .28);
}

@keyframes gloo-mesh-float {
    0% { transform: translate3d(calc(var(--gloo-mx) - 1%), calc(var(--gloo-my) + 1%), 0) scale(1.08) rotate(var(--gloo-rotate-a)); }
    100% { transform: translate3d(calc(var(--gloo-mx) + 2%), calc(var(--gloo-my) - 2%), 0) scale(1.2) rotate(var(--gloo-rotate-b)); }
}

@keyframes gloo-orb-one {
    from { transform: translate3d(-8%, -5%, 0) scale(.96); }
    to { transform: translate3d(24%, 18%, 0) scale(1.22); }
}

@keyframes gloo-orb-two {
    from { transform: translate3d(6%, -4%, 0) scale(1.08); }
    to { transform: translate3d(-22%, 22%, 0) scale(.9); }
}

@keyframes gloo-orb-three {
    from { transform: translate3d(-14%, 10%, 0) scale(1); }
    to { transform: translate3d(18%, -18%, 0) scale(1.18); }
}

@keyframes gloo-grid-slide {
    from { background-position: 0 0, 0 0, center; }
    to { background-position: 0 112px, 112px 0, center; }
}

@media (max-width: 767px) {
    .gloo-motion-bg {
        --gloo-bg-blur: 44px;
    }

    .gloo-motion-section__content {
        padding: 32px 22px;
    }
}