.fp-saas-subscription-upgrade-sync-ui {
    --fp-container-width: 100%;
    --fp-max-width: 500px;
    --fp-aspect-ratio: 1 / 1;

    --fp-primary-color: #ffffff;
    --fp-secondary-color: #f1f5f9;
    --fp-muted-color: #1e293b;
    --fp-soft-color: rgba(255, 255, 255, 0.7);
    --fp-background-color: transparent;

    --fp-info-color: #94a3b8;
    --fp-warning-color: #7dd3fc;
    --fp-danger-color: #0369a1;
    --fp-accent-color: #0ea5e9;

    width: var(--fp-container-width);
    max-width: var(--fp-max-width);
    margin: 0 auto;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--fp-muted-color);
    overflow: hidden;
    box-sizing: border-box;
    background-color: var(--fp-background-color);
}

.fp-saas-subscription-upgrade-sync-ui-stage {
    width: 100%;
    aspect-ratio: var(--fp-aspect-ratio);
    background: linear-gradient(135deg, var(--fp-secondary-color) 0%, #e2e8f0 100%);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,0.5);
    box-shadow: 0 20px 40px -10px rgba(30, 41, 59, 0.08);
}

.fp-saas-subscription-upgrade-sync-ui-blob {
    position: absolute;
    border-radius: 50%;
    background: var(--fp-accent-color);
    filter: blur(40px);
    opacity: 0.15;
    z-index: 1;
}

.fp-saas-subscription-upgrade-sync-ui-blob-1 {
    width: 250px;
    height: 250px;
    top: -50px;
    right: -50px;
    animation: fp-saas-subscription-upgrade-sync-ui-float 8s ease-in-out infinite alternate;
}

.fp-saas-subscription-upgrade-sync-ui-blob-2 {
    width: 200px;
    height: 200px;
    bottom: -50px;
    left: -50px;
    background: var(--fp-warning-color);
    animation: fp-saas-subscription-upgrade-sync-ui-float 10s ease-in-out infinite alternate-reverse;
}

.fp-saas-subscription-upgrade-sync-ui-card {
    position: relative;
    z-index: 10;
    width: 80%;
    max-width: 340px;
    background: var(--fp-soft-color);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    padding: 32px 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    box-shadow: 
        0 10px 25px rgba(30, 41, 59, 0.05),
        inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    animation: fp-saas-subscription-upgrade-sync-ui-breathe 4s ease-in-out infinite;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.fp-saas-subscription-upgrade-sync-ui-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fp-saas-subscription-upgrade-sync-ui-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--fp-muted-color);
    letter-spacing: -0.02em;
}

.fp-saas-subscription-upgrade-sync-ui-subtitle {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fp-info-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fp-saas-subscription-upgrade-sync-ui-visualizer {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-saas-subscription-upgrade-sync-ui-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid transparent;
}

.fp-saas-subscription-upgrade-sync-ui-ring-1 {
    width: 100%;
    height: 100%;
    border-top-color: var(--fp-accent-color);
    border-bottom-color: var(--fp-accent-color);
    animation: fp-saas-subscription-upgrade-sync-ui-spin 3s linear infinite;
    opacity: 0.5;
}

.fp-saas-subscription-upgrade-sync-ui-ring-2 {
    width: 75%;
    height: 75%;
    border-left-color: var(--fp-warning-color);
    border-right-color: var(--fp-warning-color);
    animation: fp-saas-subscription-upgrade-sync-ui-spin 2s linear infinite reverse;
    opacity: 0.8;
}

.fp-saas-subscription-upgrade-sync-ui-icon-wrap {
    position: absolute;
    width: 48px;
    height: 48px;
    background: var(--fp-primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(14, 165, 233, 0.15);
    z-index: 5;
    color: var(--fp-accent-color);
    transition: all 0.3s ease;
}

.fp-saas-subscription-upgrade-sync-ui-icon-wrap svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fp-saas-subscription-upgrade-sync-ui-particles {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.fp-saas-subscription-upgrade-sync-ui-particle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    background: var(--fp-accent-color);
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
}

.fp-saas-subscription-upgrade-sync-ui-progress-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fp-saas-subscription-upgrade-sync-ui-progress-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    font-weight: 700;
}

.fp-saas-subscription-upgrade-sync-ui-progress-val {
    color: var(--fp-accent-color);
    font-variant-numeric: tabular-nums;
}

.fp-saas-subscription-upgrade-sync-ui-progress-track {
    width: 100%;
    height: 6px;
    background: rgba(14, 165, 233, 0.1);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.fp-saas-subscription-upgrade-sync-ui-progress-fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 0%;
    background: var(--fp-accent-color);
    border-radius: 3px;
    transition: width 0.1s linear, background-color 0.3s ease;
}

.fp-saas-subscription-upgrade-sync-ui.fp-is-synced .fp-saas-subscription-upgrade-sync-ui-card {
    border-color: var(--fp-accent-color);
    box-shadow: 
        0 20px 40px rgba(14, 165, 233, 0.15),
        inset 0 0 0 1px var(--fp-accent-color);
    transform: translateY(-4px);
    animation: none;
}

.fp-saas-subscription-upgrade-sync-ui.fp-is-synced .fp-saas-subscription-upgrade-sync-ui-icon-wrap {
    background: var(--fp-accent-color);
    color: var(--fp-primary-color);
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.4);
    transform: scale(1.1);
}

.fp-saas-subscription-upgrade-sync-ui.fp-is-synced .fp-saas-subscription-upgrade-sync-ui-ring-1,
.fp-saas-subscription-upgrade-sync-ui.fp-is-synced .fp-saas-subscription-upgrade-sync-ui-ring-2 {
    border-color: var(--fp-accent-color);
    opacity: 1;
    animation-duration: 1s;
}

.fp-saas-subscription-upgrade-sync-ui.fp-is-synced .fp-saas-subscription-upgrade-sync-ui-progress-fill {
    background: var(--fp-danger-color);
}

.fp-saas-subscription-upgrade-sync-ui.fp-is-synced .fp-saas-subscription-upgrade-sync-ui-title {
    color: var(--fp-danger-color);
}

@keyframes fp-saas-subscription-upgrade-sync-ui-breathe {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes fp-saas-subscription-upgrade-sync-ui-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fp-saas-subscription-upgrade-sync-ui-float {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(20px, 20px) scale(1.1); }
}

@media (max-width: 480px) {
    .fp-saas-subscription-upgrade-sync-ui-stage { padding: 16px; border-radius: 16px; }
    .fp-saas-subscription-upgrade-sync-ui-card { width: 95%; padding: 24px 16px; }
    .fp-saas-subscription-upgrade-sync-ui-visualizer { width: 100px; height: 100px; }
}

document.querySelectorAll('.fp-saas-subscription-upgrade-sync-ui').forEach(root => {
    const pctEl = root.querySelector('#fp-saas-subscription-upgrade-sync-ui-pct');
    const barEl = root.querySelector('#fp-saas-subscription-upgrade-sync-ui-bar');
    const statusEl = root.querySelector('#fp-saas-subscription-upgrade-sync-ui-status');
    const particlesContainer = root.querySelector('#fp-saas-subscription-upgrade-sync-ui-particles');

    let progress = 0;
    let phase = 'syncing'; 
    let timer = 0;
    let lastTime = performance.now();
    let animationFrameId;

    const particles = [];
    const numParticles = 12;
    if (particlesContainer) {
        for (let i = 0; i < numParticles; i++) {
            const p = document.createElement('div');
            p.className = 'fp-saas-subscription-upgrade-sync-ui-particle';
            particlesContainer.appendChild(p);
            particles.push({
                el: p,
                angle: Math.random() * Math.PI * 2,
                distance: 0,
                speed: 2 + Math.random() * 3,
                active: false,
                opacity: 0
            });
        }
    }

    function triggerBurst() {
        particles.forEach(p => {
            p.active = true;
            p.distance = 0;
            p.opacity = 1;
            p.el.style.opacity = 1;
        });
    }

    function updateParticles(dt) {
        particles.forEach(p => {
            if (p.active) {
                p.distance += p.speed * (dt/16);
                p.opacity -= 0.02 * (dt/16);

                if (p.opacity <= 0 || p.distance > 80) {
                    p.active = false;
                    p.el.style.opacity = 0;
                } else {
                    const x = Math.cos(p.angle) * p.distance;
                    const y = Math.sin(p.angle) * p.distance;
                    p.el.style.transform = `translate(calc(-50% + ${x}px), calc(-50% + ${y}px))`;
                    p.el.style.opacity = p.opacity;
                }
            }
        });
    }

    function fp_saas_subscription_upgrade_sync_ui_loop(time) {
        if (document.visibilityState === "hidden") {
            lastTime = time;
            animationFrameId = requestAnimationFrame(fp_saas_subscription_upgrade_sync_ui_loop);
            return;
        }

        let dt = time - lastTime;
        lastTime = time;
        timer += dt;

        updateParticles(dt);

        if (phase === 'syncing') {
            progress += 0.08 * (dt/16);
            
            if (progress >= 100) {
                progress = 100;
                phase = 'bursting';
                timer = 0;
                
                root.classList.add('fp-is-synced');
                if (statusEl) statusEl.textContent = "Upgrade Successful";
                triggerBurst();
            }
        } 
        else if (phase === 'bursting') {
            if (timer > 2500) {
                phase = 'complete';
                timer = 0;
                root.classList.remove('fp-is-synced');
            }
        }
        else if (phase === 'complete') {
            if (timer > 1000) {
                phase = 'syncing';
                timer = 0;
                progress = 0;
                if (statusEl) statusEl.textContent = "Provisioning Resources";
            }
        }

        if (pctEl) pctEl.textContent = Math.floor(progress) + "%";
        if (barEl) barEl.style.width = progress + "%";

        animationFrameId = requestAnimationFrame(fp_saas_subscription_upgrade_sync_ui_loop);
    }

    animationFrameId = requestAnimationFrame(fp_saas_subscription_upgrade_sync_ui_loop);

    const observer = new MutationObserver(() => {
        if (!document.body.contains(root)) {
            cancelAnimationFrame(animationFrameId);
            observer.disconnect();
        }
    });
    observer.observe(document.body, { childList: true, subtree: true });
});