.fp-travel-hospitality-route-tracker-ui {
    /* ━━━━━━━━━━━━━━━━━━
       LAYOUT & SIZING SYSTEM
       ━━━━━━━━━━━━━━━━━━ */
    --fp-container-width: 100%;
    --fp-max-width: 500px;
    --fp-aspect-ratio: 1 / 1;

    /* ━━━━━━━━━━━━━━━━━━
       COLOR SYSTEM (Sky Claymorphism)
       ━━━━━━━━━━━━━━━━━━ */
    --fp-primary-color: #FFFFFF; /* Putih Bersih (Pure White Stage) */
    --fp-secondary-color: #F0F6FC; /* Soft Sky Clay Base */
    --fp-muted-color: #94A3B8; /* Slate 400 Muted */
    --fp-soft-color: #0F172A; /* Hitam (Black Text) */
    --fp-background-color: transparent;

    --fp-info-color: #E0F2FE; /* Sky 100 */
    --fp-warning-color: #7DD3FC; /* Sky 300 */
    --fp-danger-color: #0284C7; /* Sky 600 */
    --fp-accent-color: #0EA5E9; /* Biru Langit Ceria (Sky 500 Accent) */

    /* Semantic Clay Shadows (No HEX/RGB in CSS body) */
    --fp-shadow-light: #FFFFFF;
    --fp-shadow-dark: #D4E1F0;
    --fp-shadow-accent: #BAE6FD;

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

.fp-travel-hospitality-route-tracker-ui * {
    box-sizing: border-box;
}

/* ━━━━━━━━━━━━━━━━━━
   STAGE
   ━━━━━━━━━━━━━━━━━━ */
.fp-travel-hospitality-route-tracker-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;
    /* Inner stage shadow for depth */
    box-shadow: inset 0 0 40px var(--fp-shadow-dark);
}

/* ━━━━━━━━━━━━━━━━━━
   LAYER 2: ROTATIONAL SUNBURST
   ━━━━━━━━━━━━━━━━━━ */
.fp-travel-hospitality-route-tracker-ui-radial {
    position: absolute;
    width: 150%;
    aspect-ratio: 1 / 1;
    background: repeating-conic-gradient(
        var(--fp-info-color) 0deg 15deg,
        var(--fp-primary-color) 15deg 30deg
    );
    top: 50%;
    left: 50%;
    opacity: 0.4;
    /* Layer 2: Continuous Rotation */
    animation: fp-travel-hospitality-route-tracker-ui-spin 40s linear infinite;
    z-index: 0;
    pointer-events: none;
    transform-origin: center center;
    transform: translate(-50%, -50%);
}

@keyframes fp-travel-hospitality-route-tracker-ui-spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ━━━━━━━━━━━━━━━━━━
   LAYER 1: CLAYMORPHIC CARD (BREATHING)
   ━━━━━━━━━━━━━━━━━━ */
.fp-travel-hospitality-route-tracker-ui-card {
    position: relative;
    z-index: 2;
    width: 80%;
    height: 80%;
    background-color: var(--fp-secondary-color);
    border-radius: 36px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    /* Claymorphism Dual Shadows */
    box-shadow: 
        16px 16px 32px var(--fp-shadow-dark), 
        -16px -16px 32px var(--fp-shadow-light),
        inset 6px 6px 12px var(--fp-shadow-light),
        inset -6px -6px 12px var(--fp-shadow-dark);
    /* Layer 1: Base Breathing */
    animation: fp-travel-hospitality-route-tracker-ui-breathe 5s ease-in-out infinite alternate;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

@keyframes fp-travel-hospitality-route-tracker-ui-breathe {
    0% { transform: translateY(0); }
    100% { transform: translateY(-6px); }
}

/* Header */
.fp-travel-hospitality-route-tracker-ui-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.fp-travel-hospitality-route-tracker-ui-title {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--fp-soft-color);
}

.fp-travel-hospitality-route-tracker-ui-badge {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: 12px;
    background-color: var(--fp-secondary-color);
    color: var(--fp-accent-color);
    box-shadow: 
        4px 4px 8px var(--fp-shadow-dark), 
        -4px -4px 8px var(--fp-shadow-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}

/* Map Area */
.fp-travel-hospitality-route-tracker-ui-map {
    flex-grow: 1;
    position: relative;
    background-color: var(--fp-info-color);
    border-radius: 20px;
    box-shadow: 
        inset 8px 8px 16px var(--fp-shadow-dark),
        inset -8px -8px 16px var(--fp-shadow-light);
    overflow: hidden;
    margin-bottom: 20px;
}

.fp-travel-hospitality-route-tracker-ui-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.fp-travel-hospitality-route-tracker-ui-path-bg {
    fill: none;
    stroke: var(--fp-shadow-light);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fp-travel-hospitality-route-tracker-ui-path-trace {
    fill: none;
    stroke: var(--fp-accent-color);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke-dashoffset 0.1s linear;
}

/* Nodes */
.fp-travel-hospitality-route-tracker-ui-node {
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: var(--fp-secondary-color);
    border: 3px solid var(--fp-primary-color);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    box-shadow: 2px 2px 4px var(--fp-shadow-dark);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fp-travel-hospitality-route-tracker-ui-node.fp-active {
    background-color: var(--fp-accent-color);
    border-color: var(--fp-info-color);
    transform: translate(-50%, -50%) scale(1.4);
    box-shadow: 0 0 12px var(--fp-shadow-accent);
}

/* Shuttle Bus */
.fp-travel-hospitality-route-tracker-ui-shuttle {
    position: absolute;
    width: 28px;
    height: 14px;
    background-color: var(--fp-accent-color);
    border: 2px solid var(--fp-primary-color);
    border-radius: 12px;
    z-index: 3;
    box-shadow: 4px 4px 8px var(--fp-shadow-dark);
    transition: left 0.1s linear, top 0.1s linear, transform 0.1s linear;
}

/* Shuttle Window */
.fp-travel-hospitality-route-tracker-ui-shuttle::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 4px;
    bottom: 2px;
    width: 8px;
    background-color: var(--fp-info-color);
    border-radius: 2px;
}

/* Footer Stats */
.fp-travel-hospitality-route-tracker-ui-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fp-travel-hospitality-route-tracker-ui-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fp-travel-hospitality-route-tracker-ui-stat-lbl {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--fp-muted-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fp-travel-hospitality-route-tracker-ui-stat-val {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--fp-soft-color);
    line-height: 1;
    font-family: ui-monospace, "Cascadia Code", monospace;
}

/* ━━━━━━━━━━━━━━━━━━
   LAYER 3: REACTIVE SPIKE (NODE REACHED)
   ━━━━━━━━━━━━━━━━━━ */
.fp-travel-hospitality-route-tracker-ui-stage.fp-spike .fp-travel-hospitality-route-tracker-ui-card {
    box-shadow: 
        16px 16px 32px var(--fp-shadow-accent), 
        -16px -16px 32px var(--fp-shadow-light),
        inset 6px 6px 12px var(--fp-shadow-light),
        inset -6px -6px 12px var(--fp-shadow-accent);
}

.fp-travel-hospitality-route-tracker-ui-stage.fp-spike .fp-travel-hospitality-route-tracker-ui-badge {
    background-color: var(--fp-accent-color);
    color: var(--fp-primary-color);
    box-shadow: 
        4px 4px 8px var(--fp-shadow-accent), 
        -4px -4px 8px var(--fp-shadow-light);
}

.fp-travel-hospitality-route-tracker-ui-stage.fp-spike .fp-travel-hospitality-route-tracker-ui-stat-val {
    color: var(--fp-accent-color);
}

/* Responsive */
@media (max-width: 400px) {
    .fp-travel-hospitality-route-tracker-ui-card { width: 90%; height: 90%; padding: 16px; }
    .fp-travel-hospitality-route-tracker-ui-stat-val { font-size: 1.1rem; }
}

(function() {
    const instances = document.querySelectorAll('.fp-travel-hospitality-route-tracker-ui');

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

        const stage = root.querySelector('.fp-travel-hospitality-route-tracker-ui-stage');
        const tracePath = root.querySelector('#fp-travel-hospitality-route-tracker-ui-trace');
        const shuttle = root.querySelector('#fp-travel-hospitality-route-tracker-ui-shuttle');
        const etaEl = root.querySelector('#fp-travel-hospitality-route-tracker-ui-eta');
        const distEl = root.querySelector('#fp-travel-hospitality-route-tracker-ui-dist');
        const statusBadge = root.querySelector('#fp-travel-hospitality-route-tracker-ui-status');
        
        const nodes = [
            root.querySelector('#fp-travel-hospitality-route-tracker-ui-n1'),
            root.querySelector('#fp-travel-hospitality-route-tracker-ui-n2'),
            root.querySelector('#fp-travel-hospitality-route-tracker-ui-n3'),
            root.querySelector('#fp-travel-hospitality-route-tracker-ui-n4')
        ];

        if (!stage || !tracePath || !shuttle || nodes.includes(null)) return;

        const pathLength = tracePath.getTotalLength();
        tracePath.style.strokeDasharray = pathLength;
        tracePath.style.strokeDashoffset = pathLength;

        let rafId;
        let isVisible = true;
        let lastTime = 0;
        
        // Animation State Machine
        let progress = 0; // 0 to 100
        let state = 'MOVING'; // MOVING -> HOLD (Spike) -> MOVING
        let stateTimer = 0;
        let activeNodeIndex = 0;

        // Rough percentage thresholds for nodes based on path geometry
        // M 15 85 L 45 60 L 35 25 L 85 15
        const nodeThresholds = [0, 31, 60, 100]; 
        const maxTime = 12; // 12 mins starting
        const maxDist = 4.2; // 4.2 km starting

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

        function triggerSpike(nodeIdx) {
            state = 'HOLD';
            stateTimer = 0;
            
            nodes.forEach(n => n.classList.remove('fp-active'));
            for(let i=0; i<=nodeIdx; i++) {
                nodes[i].classList.add('fp-active');
            }
            
            stage.classList.add('fp-spike');
            
            if(nodeIdx === 3) {
                statusBadge.textContent = "ARRIVED";
                etaEl.textContent = "0 MIN";
                distEl.textContent = "0.0 KM";
            } else {
                statusBadge.textContent = `STOP ${nodeIdx + 1}`;
            }
        }

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

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

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

            if (state === 'MOVING') {
                // Advance progress (~10s to complete track)
                progress += (100 / 10000) * dt;

                // Check Node Thresholds
                if (activeNodeIndex < nodeThresholds.length - 1 && progress >= nodeThresholds[activeNodeIndex + 1]) {
                    progress = nodeThresholds[activeNodeIndex + 1];
                    activeNodeIndex++;
                    triggerSpike(activeNodeIndex);
                } else if (progress >= 100) {
                    progress = 100;
                    triggerSpike(3);
                }

                // Update UI Stats
                const pctRemaining = 1 - (progress / 100);
                etaEl.textContent = `${Math.ceil(maxTime * pctRemaining)} MIN`;
                distEl.textContent = `${(maxDist * pctRemaining).toFixed(1)} KM`;
                statusBadge.textContent = "EN ROUTE";

            } else if (state === 'HOLD') {
                stateTimer += dt;
                if (stateTimer > 1500) { // Hold spike for 1.5s
                    stage.classList.remove('fp-spike');
                    
                    if (progress >= 100) {
                        // Reset loop
                        if (stateTimer > 3000) { // Extra wait at end
                            progress = 0;
                            activeNodeIndex = 0;
                            nodes.forEach(n => n.classList.remove('fp-active'));
                            nodes[0].classList.add('fp-active');
                            state = 'MOVING';
                        }
                    } else {
                        state = 'MOVING';
                    }
                }
            }

            // Update SVG Path & Shuttle Transform
            const currentLen = (progress / 100) * pathLength;
            tracePath.style.strokeDashoffset = pathLength - currentLen;

            const pt = tracePath.getPointAtLength(currentLen);
            shuttle.style.left = `${pt.x}%`;
            shuttle.style.top = `${pt.y}%`;

            // Calculate Shuttle Rotation
            if (currentLen > 1) {
                const ptPrev = tracePath.getPointAtLength(currentLen - 1);
                const dx = pt.x - ptPrev.x;
                const dy = pt.y - ptPrev.y;
                const angle = Math.atan2(dy, dx) * 180 / Math.PI;
                shuttle.style.transform = `translate(-50%, -50%) rotate(${angle}deg)`;
            } else {
                shuttle.style.transform = `translate(-50%, -50%) rotate(0deg)`;
            }

            rafId = requestAnimationFrame(fp_travel_hospitality_route_tracker_ui_loop);
        }

        // Init Start State
        nodes[0].classList.add('fp-active');
        const startPt = tracePath.getPointAtLength(0);
        shuttle.style.left = `${startPt.x}%`;
        shuttle.style.top = `${startPt.y}%`;
        
        // Kickstart loop
        rafId = requestAnimationFrame(fp_travel_hospitality_route_tracker_ui_loop);
    });
})();