.fp-creative-agency-image-upscaling-ui {
    /* Layout & Sizing System */
    --fp-container-width: 100%;
    --fp-max-width: 500px;
    --fp-aspect-ratio: 1 / 1;

    /* Color System - Violet Tech AI */
    --fp-primary-color: #f5f5f7;   /* Abu Sangat Terang */
    --fp-secondary-color: #e5e7eb; /* Neutral Border */
    --fp-muted-color: #111111;     /* Teks Hitam */
    --fp-soft-color: #f3f0ff;      /* Soft Violet Wash */
    --fp-background-color: transparent;

    --fp-info-color: #8b5cf6;      /* Violet Info */
    --fp-warning-color: #a78bfa;   /* Light Violet */
    --fp-danger-color: #7c3aed;    /* Deep Violet */
    --fp-accent-color: #6d28d9;    /* Primary Accent Violet */

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

.fp-creative-agency-image-upscaling-ui-stage {
    aspect-ratio: var(--fp-aspect-ratio);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--fp-primary-color);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--fp-secondary-color);
}

/* Layer 1: Velvet Fabric Background (Subtle Breathing) */
.fp-creative-agency-image-upscaling-ui-velvet {
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at 20% 30%, var(--fp-soft-color) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, var(--fp-soft-color) 0%, transparent 50%),
                radial-gradient(circle at 50% 50%, #ffffff 0%, transparent 70%);
    filter: blur(60px);
    opacity: 0.7;
    animation: fp-creative-agency-image-upscaling-ui-breathe 10s ease-in-out infinite;
    z-index: 1;
}

/* Layer 2: Matrix Canvas */
.fp-creative-agency-image-upscaling-ui-matrix {
    position: relative;
    z-index: 10;
    width: 85%;
    height: 85%;
    background: var(--fp-primary-color);
    border: 1px solid var(--fp-muted-color);
    box-shadow: 0 30px 60px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    border-radius: 2px;
}

.fp-creative-agency-image-upscaling-ui-viewport {
    flex: 1;
    position: relative;
    background: #0a0a0a;
    overflow: hidden;
    margin: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0,0,0,0.1);
}

.fp-creative-agency-image-upscaling-ui-asset {
    width: 105%;
    height: 105%;
    object-fit: cover;
    filter: blur(15px);
    will-change: filter;
}

/* Scanning Line (Linear/Rotational Motion) */
.fp-creative-agency-image-upscaling-ui-scanner {
    position: absolute;
    top: 0;
    left: -100%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.4), transparent);
    z-index: 3;
    pointer-events: none;
    mix-blend-mode: screen;
}

/* Layer 3: Reactive Grid Spike */
.fp-creative-agency-image-upscaling-ui-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    z-index: 4;
    pointer-events: none;
}

.fp-creative-agency-image-upscaling-ui-node {
    border: 0.5px solid rgba(139, 92, 246, 0.08);
    box-sizing: border-box;
    transition: background 0.4s ease;
}

.fp-creative-agency-image-upscaling-ui-node.fp-active {
    background: var(--fp-accent-color);
    box-shadow: 0 0 12px var(--fp-accent-color);
    opacity: 0.6;
}

.fp-creative-agency-image-upscaling-ui-footer {
    height: 54px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--fp-secondary-color);
    background: #fff;
}

.fp-creative-agency-image-upscaling-ui-status {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: var(--fp-muted-color);
    text-transform: uppercase;
}

.fp-creative-agency-image-upscaling-ui-value {
    font-family: ui-monospace, SFMono-Regular, "Roboto Mono", monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--fp-accent-color);
}

/* Keyframes */
@keyframes fp-creative-agency-image-upscaling-ui-breathe {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.7; }
    50% { transform: scale(1.15) rotate(2deg); opacity: 0.9; }
}

@media (max-width: 400px) {
    .fp-creative-agency-image-upscaling-ui-matrix {
        width: 92%;
        height: 92%;
    }
    .fp-creative-agency-image-upscaling-ui-status {
        font-size: 9px;
    }
}

(function() {
    const upscaleComponents = document.querySelectorAll('.fp-creative-agency-image-upscaling-ui');

    upscaleComponents.forEach(root => {
        const asset = root.querySelector('.fp-creative-agency-image-upscaling-ui-asset');
        const scanner = root.querySelector('.fp-creative-agency-image-upscaling-ui-scanner');
        const overlay = root.querySelector('.fp-creative-agency-image-upscaling-ui-overlay');
        const label = root.querySelector('#fp-upscale-percent');

        // Initialize Grid Nodes (10x10)
        for(let i = 0; i < 100; i++) {
            const node = document.createElement('div');
            node.className = 'fp-creative-agency-image-upscaling-ui-node';
            overlay.appendChild(node);
        }
        const nodes = root.querySelectorAll('.fp-creative-agency-image-upscaling-ui-node');

        let progress = 0;
        let scanPos = -100;
        let lastTime = performance.now();
        let animationFrameId;

        function fp_upscale_loop(currentTime) {
            if (document.visibilityState === 'hidden') {
                animationFrameId = requestAnimationFrame(fp_upscale_loop);
                return;
            }

            const deltaTime = currentTime - lastTime;
            lastTime = currentTime;

            // 1. Progress Increment (0-100 cycle)
            progress += 0.15 * (deltaTime / 16.67);
            if (progress > 100) progress = 0;

            // 2. Scanner Motion (Layer 2)
            scanPos += 1.8 * (deltaTime / 16.67);
            if (scanPos > 200) scanPos = -100;
            scanner.style.left = scanPos + '%';

            // 3. Reactive Spike: Neural Grid Activation (Layer 3)
            nodes.forEach(node => {
                // Random flicker based on scanning position or raw probability
                if (Math.random() > 0.996) {
                    node.classList.add('fp-active');
                    setTimeout(() => node.classList.remove('fp-active'), 600);
                }
            });

            // 4. Blurring/Focusing Logic (Visual Concept)
            // AI "Focus" increases as progress moves towards 100
            const currentBlur = 15 - (progress * 0.15);
            asset.style.filter = `blur(${Math.max(0, currentBlur)}px)`;
            
            // 5. Text Update
            if (label) {
                label.textContent = progress.toFixed(1) + '%';
            }

            if (!document.body.contains(root)) {
                cancelAnimationFrame(animationFrameId);
                return;
            }

            animationFrameId = requestAnimationFrame(fp_upscale_loop);
        }

        animationFrameId = requestAnimationFrame(fp_upscale_loop);

        // Cleanup Observer
        const observer = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                mutation.removedNodes.forEach((node) => {
                    if (node === root || node.contains(root)) {
                        cancelAnimationFrame(animationFrameId);
                        observer.disconnect();
                    }
                });
            });
        });

        observer.observe(document.body, { childList: true, subtree: true });
    });
})();