.fp-abstract-particle-hero-background-ui {
    /* Layout & Sizing System */
    --fp-container-width: 100%;
    --fp-max-width: 500px;
    --fp-aspect-ratio: 1 / 1;

    /* Semantic Color System (Putih / Biru Dongker / Biru Permata) */
    --fp-primary-color: #FFFFFF; /* Putih (Base) */
    --fp-secondary-color: #F8FAFC; /* Muted Light Background */
    --fp-muted-color: #64748B; /* Soft Muted Text */
    --fp-soft-color: #0A192F; /* Biru Dongker / Deep Navy */
    --fp-background-color: transparent;

    --fp-info-color: #0F52BA; /* Biru Permata / Deep Sapphire */
    --fp-warning-color: #0F52BA;
    --fp-danger-color: #0F52BA;
    --fp-accent-color: #0F52BA; /* Biru Permata */

    width: var(--fp-container-width);
    max-width: var(--fp-max-width);
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
    background-color: var(--fp-background-color);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.fp-abstract-particle-hero-background-ui * {
    box-sizing: border-box;
}

.fp-abstract-particle-hero-background-ui-stage {
    width: 100%;
    aspect-ratio: var(--fp-aspect-ratio);
    background-color: var(--fp-primary-color);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(10, 25, 47, 0.05);
    /* Layer 1: Subtle Base Breathing */
    animation: fp-abstract-particle-hero-background-ui-breathe 8s ease-in-out infinite alternate;
}

@keyframes fp-abstract-particle-hero-background-ui-breathe {
    0% { box-shadow: inset 0 0 0 rgba(10, 25, 47, 0); }
    100% { box-shadow: inset 0 0 40px rgba(10, 25, 47, 0.04); }
}

/* Subtle Grid Overlay for Studio Vibe */
.fp-abstract-particle-hero-background-ui-stage::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--fp-muted-color) 0.5px, transparent 0.5px);
    background-size: 24px 24px;
    opacity: 0.15;
    z-index: 1;
}

/* Abstract Fluid Gooey Container */
.fp-abstract-particle-hero-background-ui-fluid {
    position: absolute;
    inset: 0;
    z-index: 2;
    filter: url('#fp-abstract-particle-hero-background-ui-goo');
    overflow: hidden;
    pointer-events: none;
}

/* Blob Positioning Container (Controlled by JS) */
.fp-abstract-particle-hero-background-ui-blob-pos {
    position: absolute;
    width: 0;
    height: 0;
    will-change: left, top, transform;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); /* For Spike */
}

/* Layer 3 Reactive Spike */
.fp-abstract-particle-hero-background-ui-blob-pos.fp-abstract-particle-hero-background-ui-spike {
    transform: scale(1.6);
}

/* Layer 2: Rotational & Morphing Motion (CSS) */
.fp-abstract-particle-hero-background-ui-blob-shape {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Organic border radius for liquid feel */
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    animation: 
        fp-abstract-particle-hero-background-ui-morph 8s ease-in-out infinite alternate, 
        fp-abstract-particle-hero-background-ui-spin 12s linear infinite;
}

@keyframes fp-abstract-particle-hero-background-ui-morph {
    0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
    100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

@keyframes fp-abstract-particle-hero-background-ui-spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Individual Blob Specs */
.fp-abstract-particle-hero-background-ui-shape-1 {
    width: 260px; height: 260px;
    background: var(--fp-accent-color); /* Sapphire */
    opacity: 0.9;
}

.fp-abstract-particle-hero-background-ui-shape-2 {
    width: 200px; height: 200px;
    background: var(--fp-soft-color); /* Deep Navy */
    opacity: 0.85;
    animation-duration: 9s, 15s;
    animation-direction: alternate-reverse, reverse;
}

.fp-abstract-particle-hero-background-ui-shape-3 {
    width: 160px; height: 160px;
    background: rgba(15, 82, 186, 0.6); /* Semi-transparent Sapphire */
    animation-duration: 7s, 10s;
}

/* Content Overlay */
.fp-abstract-particle-hero-background-ui-content {
    position: relative;
    z-index: 3;
    text-align: center;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.fp-abstract-particle-hero-background-ui-badge {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--fp-primary-color);
    background-color: var(--fp-soft-color);
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(10, 25, 47, 0.2);
}

.fp-abstract-particle-hero-background-ui-title {
    font-size: 2.75rem;
    font-weight: 900;
    color: var(--fp-soft-color);
    margin: 0;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.fp-abstract-particle-hero-background-ui-subtitle {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--fp-muted-color);
    margin: 0;
    letter-spacing: 0.05em;
}

/* Responsive Scaling */
@media (max-width: 480px) {
    .fp-abstract-particle-hero-background-ui-shape-1 { width: 160px; height: 160px; }
    .fp-abstract-particle-hero-background-ui-shape-2 { width: 120px; height: 120px; }
    .fp-abstract-particle-hero-background-ui-shape-3 { width: 100px; height: 100px; }
    .fp-abstract-particle-hero-background-ui-title { font-size: 2rem; }
}

(function() {
    const instances = document.querySelectorAll('.fp-abstract-particle-hero-background-ui');

    instances.forEach(root => {
        if (root.dataset.fpInitialized) return;
        root.dataset.fpInitialized = 'true';

        const posEls = root.querySelectorAll('.fp-abstract-particle-hero-background-ui-blob-pos');
        if (!posEls.length) return;

        let rafId;
        let isVisible = true;

        // Visibility State
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => isVisible = entry.isIntersecting);
        }, { threshold: 0.1 });
        observer.observe(root);

        // Orbit Configurations for each fluid particle
        const configs = [
            { rx: 20, ry: 15, speedX: 0.0004, speedY: 0.0005, ox: 50, oy: 50 },
            { rx: 18, ry: 25, speedX: 0.0006, speedY: 0.0003, ox: 45, oy: 55 },
            { rx: 25, ry: 20, speedX: 0.0003, speedY: 0.0007, ox: 55, oy: 45 }
        ];

        function fp_abstract_particle_hero_background_ui_render(t) {
            // GC Protection
            if (!document.body.contains(root)) {
                observer.disconnect();
                cancelAnimationFrame(rafId);
                return;
            }

            // Pause when out of view
            if (!isVisible || document.visibilityState === 'hidden') {
                rafId = requestAnimationFrame(fp_abstract_particle_hero_background_ui_render);
                return;
            }

            // Layer 3: Reactive Spike (Occasional Organic Surge)
            if (Math.random() < 0.004) {
                const targetIdx = Math.floor(Math.random() * posEls.length);
                const target = posEls[targetIdx];
                
                target.classList.add('fp-abstract-particle-hero-background-ui-spike');
                setTimeout(() => {
                    if (target) target.classList.remove('fp-abstract-particle-hero-background-ui-spike');
                }, 600); 
            }

            // Apply dynamic JS orbital positioning
            posEls.forEach((el, i) => {
                const c = configs[i];
                const x = c.ox + Math.sin(t * c.speedX) * c.rx;
                const y = c.oy + Math.cos(t * c.speedY) * c.ry;
                el.style.left = `${x}%`;
                el.style.top = `${y}%`;
            });

            rafId = requestAnimationFrame(fp_abstract_particle_hero_background_ui_render);
        }

        rafId = requestAnimationFrame(fp_abstract_particle_hero_background_ui_render);
    });
})();