.fp-fashion-boutique-cart-stock-sync-ui {
    /* ━━━━━━━━━━━━━━━━━━
       LAYOUT & SIZING SYSTEM
       ━━━━━━━━━━━━━━━━━━ */
    --fp-container-width: 100%;
    --fp-max-width: 500px;
    --fp-aspect-ratio: 1 / 1;

    /* ━━━━━━━━━━━━━━━━━━
       COLOR SYSTEM (Plum Editorial)
       ━━━━━━━━━━━━━━━━━━ */
    --fp-primary-color: #FFFFFF; /* Putih (White) */
    --fp-secondary-color: #F4EFF3; /* Subtle Plum Tint for shapes/borders */
    --fp-muted-color: #9C8E9B; /* Muted Plum Grey */
    --fp-soft-color: #362232; /* Ungu Plum Tua (Dark Plum Purple) */
    --fp-background-color: transparent;

    --fp-info-color: #DDA0DD; /* Soft Plum */
    --fp-warning-color: #C71585; /* Medium Plum */
    --fp-danger-color: #800080; /* Deep Purple */
    --fp-accent-color: #A32D6D; /* Plum Cerah (Bright Plum Accent) */

    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);
    
    /* High-Fashion Typography Stacks */
    --fp-font-serif: "Didot", "Bodoni MT", "Playfair Display", "Times New Roman", serif;
    --fp-font-sans: "Inter", "Helvetica Neue", -apple-system, sans-serif;
}

.fp-fashion-boutique-cart-stock-sync-ui * {
    box-sizing: border-box;
}

/* ━━━━━━━━━━━━━━━━━━
   STAGE
   ━━━━━━━━━━━━━━━━━━ */
.fp-fashion-boutique-cart-stock-sync-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 var(--fp-secondary-color);
    /* Minimalist high-fashion framing */
    padding: 20px;
}

/* ━━━━━━━━━━━━━━━━━━
   PARALLAX LAYERS
   ━━━━━━━━━━━━━━━━━━ */
.fp-fashion-boutique-cart-stock-sync-ui-parallax {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    will-change: transform;
}

/* Background Text (Deep Parallax) */
.fp-fashion-boutique-cart-stock-sync-ui-l1 {
    z-index: 1;
}

.fp-fashion-boutique-cart-stock-sync-ui-bg-text {
    font-family: var(--fp-font-serif);
    font-size: 8rem;
    color: var(--fp-secondary-color);
    font-weight: 400;
    letter-spacing: -0.05em;
    line-height: 0.8;
    text-align: center;
    opacity: 0.6;
    transform: rotate(-15deg) scale(1.5);
}

/* Rotational Decorative Ring (Mid Parallax) */
.fp-fashion-boutique-cart-stock-sync-ui-l2 {
    z-index: 2;
}

.fp-fashion-boutique-cart-stock-sync-ui-ring {
    width: 85%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 1px dashed var(--fp-muted-color);
    opacity: 0.3;
    /* Layer 2: Rotational Motion */
    animation: fp-fashion-boutique-cart-stock-sync-ui-spin 30s linear infinite;
}

.fp-fashion-boutique-cart-stock-sync-ui-ring::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    width: 10px;
    height: 10px;
    background-color: var(--fp-muted-color);
    border-radius: 50%;
    transform: translateX(-50%);
}

@keyframes fp-fashion-boutique-cart-stock-sync-ui-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Main Foreground UI (Forward Parallax) */
.fp-fashion-boutique-cart-stock-sync-ui-l3 {
    z-index: 3;
}

/* ━━━━━━━━━━━━━━━━━━
   EDITORIAL TICKET (LAYER 1)
   ━━━━━━━━━━━━━━━━━━ */
.fp-fashion-boutique-cart-stock-sync-ui-ticket {
    width: 75%;
    max-width: 320px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    border: 1px solid var(--fp-soft-color);
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    /* Layer 1: Subtle Base Breathing */
    box-shadow: 10px 10px 30px rgba(54, 34, 50, 0.05);
    animation: fp-fashion-boutique-cart-stock-sync-ui-breathe 5s ease-in-out infinite alternate;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes fp-fashion-boutique-cart-stock-sync-ui-breathe {
    0% { box-shadow: 10px 10px 30px rgba(54, 34, 50, 0.05); }
    100% { box-shadow: 15px 15px 40px rgba(54, 34, 50, 0.1); }
}

/* Ticket Header */
.fp-fashion-boutique-cart-stock-sync-ui-ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--fp-secondary-color);
    padding-bottom: 12px;
    margin-bottom: 24px;
}

.fp-fashion-boutique-cart-stock-sync-ui-ticket-id {
    font-family: var(--fp-font-sans);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--fp-muted-color);
    letter-spacing: 0.2em;
}

.fp-fashion-boutique-cart-stock-sync-ui-pulse-dot {
    width: 6px;
    height: 6px;
    background-color: var(--fp-muted-color);
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

/* Item Info */
.fp-fashion-boutique-cart-stock-sync-ui-item-info {
    text-align: center;
    margin-bottom: 32px;
}

.fp-fashion-boutique-cart-stock-sync-ui-item-name {
    font-family: var(--fp-font-serif);
    font-size: 1.8rem;
    color: var(--fp-soft-color);
    line-height: 1.1;
    margin-bottom: 12px;
    font-style: italic;
}

.fp-fashion-boutique-cart-stock-sync-ui-item-sku {
    font-family: var(--fp-font-sans);
    font-size: 0.7rem;
    color: var(--fp-muted-color);
    letter-spacing: 0.1em;
}

/* Sync Indicator */
.fp-fashion-boutique-cart-stock-sync-ui-sync-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fp-fashion-boutique-cart-stock-sync-ui-sync-bar {
    width: 100%;
    height: 1px;
    background-color: var(--fp-secondary-color);
    position: relative;
    overflow: hidden;
}

.fp-fashion-boutique-cart-stock-sync-ui-sync-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background-color: var(--fp-soft-color);
    transition: width 0.1s linear, background-color 0.4s ease;
}

.fp-fashion-boutique-cart-stock-sync-ui-sync-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fp-fashion-boutique-cart-stock-sync-ui-sync-status {
    font-family: var(--fp-font-sans);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--fp-soft-color);
    letter-spacing: 0.15em;
    transition: color 0.4s ease;
}

.fp-fashion-boutique-cart-stock-sync-ui-sync-qty {
    font-family: var(--fp-font-serif);
    font-size: 1.2rem;
    color: var(--fp-muted-color);
    transition: color 0.4s ease;
}

/* ━━━━━━━━━━━━━━━━━━
   LAYER 3: REACTIVE SPIKE (SECURED)
   ━━━━━━━━━━━━━━━━━━ */
.fp-fashion-boutique-cart-stock-sync-ui-spike .fp-fashion-boutique-cart-stock-sync-ui-ticket {
    border-color: var(--fp-accent-color);
    box-shadow: 15px 15px 40px rgba(163, 45, 109, 0.15);
    transform: scale(1.02);
}

.fp-fashion-boutique-cart-stock-sync-ui-spike .fp-fashion-boutique-cart-stock-sync-ui-pulse-dot {
    background-color: var(--fp-accent-color);
    box-shadow: 0 0 8px var(--fp-accent-color);
}

.fp-fashion-boutique-cart-stock-sync-ui-spike .fp-fashion-boutique-cart-stock-sync-ui-sync-fill {
    background-color: var(--fp-accent-color);
}

.fp-fashion-boutique-cart-stock-sync-ui-spike .fp-fashion-boutique-cart-stock-sync-ui-sync-status {
    color: var(--fp-accent-color);
}

.fp-fashion-boutique-cart-stock-sync-ui-spike .fp-fashion-boutique-cart-stock-sync-ui-sync-qty {
    color: var(--fp-accent-color);
    font-weight: bold;
}

/* Responsive */
@media (max-width: 480px) {
    .fp-fashion-boutique-cart-stock-sync-ui-ticket { width: 90%; padding: 24px 16px; }
    .fp-fashion-boutique-cart-stock-sync-ui-item-name { font-size: 1.5rem; }
    .fp-fashion-boutique-cart-stock-sync-ui-bg-text { font-size: 5rem; }
}

(function() {
    const instances = document.querySelectorAll('.fp-fashion-boutique-cart-stock-sync-ui');

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

        const stage = root.querySelector('.fp-fashion-boutique-cart-stock-sync-ui-stage');
        const l1 = root.querySelector('.fp-fashion-boutique-cart-stock-sync-ui-l1');
        const l2 = root.querySelector('.fp-fashion-boutique-cart-stock-sync-ui-l2');
        const l3 = root.querySelector('.fp-fashion-boutique-cart-stock-sync-ui-l3');
        const syncFill = root.querySelector('.fp-fashion-boutique-cart-stock-sync-ui-sync-fill');
        const syncStatus = root.querySelector('.fp-fashion-boutique-cart-stock-sync-ui-sync-status');
        const syncQty = root.querySelector('.fp-fashion-boutique-cart-stock-sync-ui-sync-qty');

        if (!stage || !l1 || !l2 || !l3 || !syncFill) return;

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

        // Parallax Variables
        let mouseX = 0, mouseY = 0;
        let targetX = 0, targetY = 0;
        let rect = stage.getBoundingClientRect();

        // Sync State Variables
        let syncProgress = 0;
        let isSpike = false;
        let spikeTimer = 0;

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

        // Resize Observer for accurate mouse tracking
        window.addEventListener('resize', () => {
            rect = stage.getBoundingClientRect();
        });

        // Mouse Move Listener
        stage.addEventListener('mousemove', (e) => {
            rect = stage.getBoundingClientRect();
            // Normalize coordinates from -1 to 1
            targetX = ((e.clientX - rect.left) / rect.width - 0.5) * 2;
            targetY = ((e.clientY - rect.top) / rect.height - 0.5) * 2;
        });
        
        stage.addEventListener('mouseleave', () => {
            // Return to center slowly when mouse leaves
            targetX = 0;
            targetY = 0;
        });

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

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

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

            // --- 1. Parallax Smoothing & Drift ---
            // Add organic drift so it moves even without mouse
            const driftX = Math.sin(timestamp * 0.0005) * 0.2;
            const driftY = Math.cos(timestamp * 0.0007) * 0.2;

            const finalTargetX = targetX + driftX;
            const finalTargetY = targetY + driftY;

            // Ease towards target
            mouseX += (finalTargetX - mouseX) * 0.05;
            mouseY += (finalTargetY - mouseY) * 0.05;

            // Apply transforms with different depth multipliers
            l1.style.transform = `translate(${mouseX * -15}px, ${mouseY * -15}px)`; // Deep bg moves opposite
            l2.style.transform = `translate(${mouseX * -5}px, ${mouseY * -5}px)`;   // Mid ring
            l3.style.transform = `translate(${mouseX * 10}px, ${mouseY * 10}px)`;   // Foreground ticket moves with mouse

            // --- 2. Sync State Logic (Layer 3 Spike) ---
            if (!isSpike) {
                syncProgress += dt * 0.03; // Adjust speed of sync
                if (syncProgress >= 100) {
                    syncProgress = 100;
                    isSpike = true;
                    spikeTimer = 0;
                    
                    // Apply Spike Styles
                    stage.classList.add('fp-fashion-boutique-cart-stock-sync-ui-spike');
                    syncStatus.textContent = "ITEM RESERVED";
                    syncQty.textContent = "01";
                }
            } else {
                spikeTimer += dt;
                if (spikeTimer > 3000) { // Hold spike state for 3s
                    isSpike = false;
                    syncProgress = 0;
                    
                    // Remove Spike Styles
                    stage.classList.remove('fp-fashion-boutique-cart-stock-sync-ui-spike');
                    syncStatus.textContent = "VERIFYING STOCK";
                    syncQty.textContent = "--";
                }
            }

            syncFill.style.width = `${syncProgress}%`;

            rafId = requestAnimationFrame(fp_fashion_boutique_cart_stock_sync_ui_loop);
        }

        // Start Engine
        rafId = requestAnimationFrame(fp_fashion_boutique_cart_stock_sync_ui_loop);
    });
})();