/* WML Glow Grid Background
   Re-creates the WML Elements hero background: glowing blobs, a masked
   square grid, and floating particles. Background only — no text. */

.wml-glow-grid {
    position: relative;
    width: 100%;
    min-height: var(--ggb-min-height, 100vh);
    overflow: hidden;
    background: var(--ggb-base, #070a12);
    isolation: isolate;
}

/* --- Glow blobs --- */
/* Outer wrapper centers the blob at its left/top %; the inner element is left
   free to run the drift transform animation. Size, color, blur, animation and
   direction are set inline per repeater item. */
.wml-glow-grid__blob-pos {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
}

.wml-glow-grid__blob {
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
}

/* --- Square grid --- */
.wml-glow-grid__grid {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image:
        linear-gradient(var(--ggb-grid-color, rgba(255, 255, 255, .045)) 1px, transparent 1px),
        linear-gradient(90deg, var(--ggb-grid-color, rgba(255, 255, 255, .045)) 1px, transparent 1px);
    background-size: var(--ggb-grid-size, 48px) var(--ggb-grid-size, 48px);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 80%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 80%);
    animation: wml-ggb-gridmove var(--ggb-grid-speed, 8s) linear infinite;
}

/* Disable grid motion when duration is 0 */
.wml-glow-grid[data-grid-speed="0"] .wml-glow-grid__grid {
    animation: none;
}

/* --- Particles --- */
.wml-glow-grid__particles {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.wml-glow-grid__particle {
    position: absolute;
    border-radius: 50%;
    filter: blur(.4px);
}

/* --- Content layer --- */
.wml-glow-grid__content {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    min-height: inherit;
    justify-content: var(--ggb-justify, center);
    align-items: var(--ggb-align, center);
}

/* --- Keyframes --- */
@keyframes wml-ggb-blob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(48px, -36px) scale(1.12); }
    66% { transform: translate(-36px, 26px) scale(.94); }
}

@keyframes wml-ggb-gridmove {
    from { transform: translateY(0); }
    to { transform: translateY(var(--ggb-grid-size, 48px)); }
}

@media (prefers-reduced-motion: reduce) {
    .wml-glow-grid__blob,
    .wml-glow-grid__grid {
        animation: none !important;
    }
}