.fp-b2c-subscription-box-traffic-funnel-ui {
    /* Layout System */
    --fp-container-width: 100%;
    --fp-max-width: 500px;
    --fp-aspect-ratio: 1 / 1;

    /* Semantic Color System (Tangerine Playful) */
    --fp-primary-color: #FDFBF7; /* Krem Terang (Background) */
    --fp-secondary-color: #F0EBE1; /* Soft Cream Border/Shadows */
    --fp-muted-color: #A39B94; /* Muted Text */
    --fp-soft-color: #2D2A26; /* Hitam (Text) */
    --fp-background-color: transparent;

    --fp-info-color: #FFB088; /* Light Tangerine */
    --fp-warning-color: #FF9466; /* Mid Tangerine */
    --fp-danger-color: #FF5E1A; /* Deep Tangerine */
    --fp-accent-color: #FF7E40; /* Oranye Senja (Tangerine Pop) */

    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;
    color: var(--fp-soft-color);
}

.fp-b2c-subscription-box-traffic-funnel-ui * {
    box-sizing: border-box;
}

/* ━━━━━━━━━━━━━━━━━━
   STAGE & LAYER 1 (BREATHING)
   ━━━━━━━━━━━━━━━━━━ */
.fp-b2c-subscription-box-traffic-funnel-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-radius: 32px;
    border: 2px solid var(--fp-secondary-color);
    box-shadow: 0 16px 40px rgba(45, 42, 38, 0.04);
    /* Layer 1: Subtle Base Breathing */
    animation: fp-b2c-subscription-box-traffic-funnel-ui-breathe 6s ease-in-out infinite alternate;
}

@keyframes fp-b2c-subscription-box-traffic-funnel-ui-breathe {
    0% { transform: translateY(0); box-shadow: 0 16px 40px rgba(45, 42, 38, 0.04); }
    100% { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(255, 126, 64, 0.08); }
}

/* Playful Dotted Background */
.fp-b2c-subscription-box-traffic-funnel-ui-stage::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--fp-muted-color) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    opacity: 0.15;
    z-index: 0;
}

/* Wrapper for Funnel and Analytics */
.fp-b2c-subscription-box-traffic-funnel-ui-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ━━━━━━━━━━━━━━━━━━
   FUNNEL CORE & LIQUID
   ━━━━━━━━━━━━━━━━━━ */
.fp-b2c-subscription-box-traffic-funnel-ui-funnel {
    position: relative;
    width: 160px;
    height: 220px;
    display: flex;
    justify-content: center;
}

.fp-b2c-subscription-box-traffic-funnel-ui-liquid-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    /* Match the funnel shape to contain the liquid visually before the mask */
    clip-path: polygon(6.25% 4.5%, 93.75% 4.5%, 65.6% 45.4%, 65.6% 86.3%, 34.3% 86.3%, 34.3% 45.4%);
}

.fp-b2c-subscription-box-traffic-funnel-ui-liquid-level {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(85%); /* Start mostly empty */
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
}

.fp-b2c-subscription-box-traffic-funnel-ui-liquid-solid {
    position: absolute;
    top: 20px; /* Below the waves */
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, var(--fp-accent-color) 0%, var(--fp-danger-color) 100%);
    transition: filter 0.3s ease;
}

/* Layer 2: Wave Motion */
.fp-b2c-subscription-box-traffic-funnel-ui-waves {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 20px;
    display: flex;
}

.fp-b2c-subscription-box-traffic-funnel-ui-wave-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: fp-b2c-subscription-box-traffic-funnel-ui-wave-pan 3s linear infinite;
}

.fp-b2c-subscription-box-traffic-funnel-ui-wave-back {
    fill: var(--fp-warning-color);
    opacity: 0.8;
    animation-duration: 4s;
    animation-direction: reverse;
}

.fp-b2c-subscription-box-traffic-funnel-ui-wave-front {
    fill: var(--fp-accent-color);
    margin-top: 4px;
}

@keyframes fp-b2c-subscription-box-traffic-funnel-ui-wave-pan {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* The Inverted Mask & Glass Outline */
.fp-b2c-subscription-box-traffic-funnel-ui-mask {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ━━━━━━━━━━━━━━━━━━
   ANALYTICS CARDS
   ━━━━━━━━━━━━━━━━━━ */
.fp-b2c-subscription-box-traffic-funnel-ui-card {
    position: absolute;
    background-color: var(--fp-primary-color);
    border: 2px solid var(--fp-secondary-color);
    border-radius: 16px;
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(45, 42, 38, 0.05);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 3;
}

.fp-b2c-subscription-box-traffic-funnel-ui-card-top { top: 15%; left: 8%; }
.fp-b2c-subscription-box-traffic-funnel-ui-card-mid { top: 45%; right: 8%; }
.fp-b2c-subscription-box-traffic-funnel-ui-card-bot { bottom: 15%; left: 12%; }

.fp-b2c-subscription-box-traffic-funnel-ui-card-label {
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--fp-muted-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.fp-b2c-subscription-box-traffic-funnel-ui-card-value {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--fp-soft-color);
    line-height: 1;
    font-feature-settings: "tnum";
    transition: color 0.3s ease;
}

/* Playful Dots */
.fp-b2c-subscription-box-traffic-funnel-ui-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: var(--fp-info-color);
    border-radius: 50%;
    z-index: 1;
}
.fp-b2c-subscription-box-traffic-funnel-ui-d1 { top: 25%; right: 20%; animation: fp-b2c-subscription-box-traffic-funnel-ui-float 3s ease-in-out infinite alternate; }
.fp-b2c-subscription-box-traffic-funnel-ui-d2 { bottom: 30%; left: 25%; animation: fp-b2c-subscription-box-traffic-funnel-ui-float 4s ease-in-out infinite alternate-reverse; width: 8px; height: 8px; background-color: var(--fp-accent-color); }

@keyframes fp-b2c-subscription-box-traffic-funnel-ui-float {
    0% { transform: translateY(0) scale(1); }
    100% { transform: translateY(-15px) scale(1.1); }
}

/* ━━━━━━━━━━━━━━━━━━
   LAYER 3: REACTIVE SPIKE
   ━━━━━━━━━━━━━━━━━━ */
.fp-b2c-subscription-box-traffic-funnel-ui-spike .fp-b2c-subscription-box-traffic-funnel-ui-liquid-solid {
    filter: brightness(1.2);
    background: linear-gradient(180deg, #FF9466 0%, var(--fp-accent-color) 100%);
}

.fp-b2c-subscription-box-traffic-funnel-ui-spike .fp-b2c-subscription-box-traffic-funnel-ui-card {
    border-color: var(--fp-accent-color);
    box-shadow: 0 12px 32px rgba(255, 126, 64, 0.2);
    transform: scale(1.05) translateY(-4px);
}

.fp-b2c-subscription-box-traffic-funnel-ui-spike .fp-b2c-subscription-box-traffic-funnel-ui-card-value {
    color: var(--fp-accent-color);
}

.fp-b2c-subscription-box-traffic-funnel-ui-glass-stroke {
    transition: stroke 0.3s ease;
}

.fp-b2c-subscription-box-traffic-funnel-ui-spike .fp-b2c-subscription-box-traffic-funnel-ui-glass-stroke {
    stroke: var(--fp-accent-color);
}

/* Responsive */
@media (max-width: 480px) {
    .fp-b2c-subscription-box-traffic-funnel-ui-funnel { transform: scale(0.8); }
    .fp-b2c-subscription-box-traffic-funnel-ui-card { padding: 6px 12px; }
    .fp-b2c-subscription-box-traffic-funnel-ui-card-value { font-size: 1.25rem; }
    .fp-b2c-subscription-box-traffic-funnel-ui-card-top { top: 10%; left: 5%; }
    .fp-b2c-subscription-box-traffic-funnel-ui-card-mid { top: 40%; right: 5%; }
    .fp-b2c-subscription-box-traffic-funnel-ui-card-bot { bottom: 10%; left: 5%; }
}

(function() {
    const instances = document.querySelectorAll('.fp-b2c-subscription-box-traffic-funnel-ui');

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

        const stage = root.querySelector('.fp-b2c-subscription-box-traffic-funnel-ui-stage');
        const liquidLevel = root.querySelector('.fp-b2c-subscription-box-traffic-funnel-ui-liquid-level');
        
        const valVisits = root.querySelector('.fp-b2c-subscription-box-traffic-funnel-ui-val-visits');
        const valLeads = root.querySelector('.fp-b2c-subscription-box-traffic-funnel-ui-val-leads');
        const valSubs = root.querySelector('.fp-b2c-subscription-box-traffic-funnel-ui-val-subs');
        
        if (!stage || !liquidLevel) return;

        let rafId;
        let isVisible = true;
        let lastTime = 0;
        let surgeTimer = 0;

        // Analytics State
        let state = {
            visits: 12450,
            leads: 3200,
            subs: 850
        };

        let targets = {
            visits: 12450,
            leads: 3200,
            subs: 850
        };

        const maxSubs = 1500; // For percentage calculation

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

        function formatNumber(num) {
            return Math.floor(num).toLocaleString('en-US');
        }

        function fp_b2c_subscription_box_traffic_funnel_ui_loop(timestamp) {
            if (!document.body.contains(root)) {
                cancelAnimationFrame(rafId);
                observer.disconnect();
                return;
            }

            if (document.visibilityState === 'hidden' || !isVisible) {
                rafId = requestAnimationFrame(fp_b2c_subscription_box_traffic_funnel_ui_loop);
                return;
            }

            if (!lastTime) lastTime = timestamp;
            const dt = timestamp - lastTime;
            lastTime = timestamp;

            surgeTimer += dt;

            // Random Surge Logic (Layer 3 Spike)
            if (surgeTimer > 3000) {
                surgeTimer = 0;
                if (Math.random() > 0.3) {
                    // Trigger Conversion Surge
                    targets.visits += Math.floor(Math.random() * 50 + 20);
                    targets.leads += Math.floor(Math.random() * 15 + 5);
                    targets.subs += Math.floor(Math.random() * 5 + 1);
                    
                    // Keep subs in bounds for demo loop
                    if (targets.subs > maxSubs) targets.subs = 500;

                    stage.classList.add('fp-b2c-subscription-box-traffic-funnel-ui-spike');
                    
                    setTimeout(() => {
                        if (stage) stage.classList.remove('fp-b2c-subscription-box-traffic-funnel-ui-spike');
                    }, 500);
                }
            }

            // Smooth Interpolation
            state.visits += (targets.visits - state.visits) * 0.1;
            state.leads += (targets.leads - state.leads) * 0.1;
            state.subs += (targets.subs - state.subs) * 0.1;

            // Update DOM text
            if (valVisits) valVisits.textContent = formatNumber(state.visits);
            if (valLeads) valLeads.textContent = formatNumber(state.leads);
            if (valSubs) valSubs.textContent = formatNumber(state.subs);

            // Update Liquid Level (TranslateY 100% is empty, 0% is full)
            const fillPercent = Math.min(1, Math.max(0.1, state.subs / maxSubs));
            const translateY = (1 - fillPercent) * 100;
            liquidLevel.style.transform = `translateY(${translateY}%)`;

            rafId = requestAnimationFrame(fp_b2c_subscription_box_traffic_funnel_ui_loop);
        }

        rafId = requestAnimationFrame(fp_b2c_subscription_box_traffic_funnel_ui_loop);
    });
})();