.fp-legaltech-cloud-storage-backup-ui-elegant {
    /* ━━━━━━━━━━━━━━━━━━
       LAYOUT & SIZING SYSTEM
       ━━━━━━━━━━━━━━━━━━ */
    --fp-container-width: 100%;
    --fp-max-width: 500px;
    --fp-aspect-ratio: 1 / 1;

    /* ━━━━━━━━━━━━━━━━━━
       COLOR SYSTEM (Vantablack Mono)
       ━━━━━━━━━━━━━━━━━━ */
    --fp-primary-color: #FCFCFC; /* Putih Salju (Snow White) */
    --fp-secondary-color: #E5E5E5; /* Light border / Grid */
    --fp-muted-color: #7A7A7A; /* Inactive text / Sub-elements */
    --fp-soft-color: #141414; /* Hitam Obsidian (Main Text/Mechanics) */
    --fp-background-color: transparent;

    --fp-info-color: #A3A3A3; /* Silver mono */
    --fp-warning-color: #5C5C5C; /* Dark gray mono */
    --fp-danger-color: #000000; /* Vantablack core */
    --fp-accent-color: #050505; /* Deepest black for accents */

    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', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--fp-soft-color);
}

.fp-legaltech-cloud-storage-backup-ui-elegant * {
    box-sizing: border-box;
}

/* ━━━━━━━━━━━━━━━━━━
   STAGE
   ━━━━━━━━━━━━━━━━━━ */
.fp-legaltech-cloud-storage-backup-ui-elegant-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: 8px; /* Elegant sharp corners */
    border: 1px solid var(--fp-secondary-color);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.02);
}

/* Minimalist Grid Pattern */
.fp-legaltech-cloud-storage-backup-ui-elegant-grid {
    position: absolute;
    inset: 0;
    background-size: 40px 40px;
    background-image: 
        linear-gradient(to right, var(--fp-secondary-color) 1px, transparent 1px),
        linear-gradient(to bottom, var(--fp-secondary-color) 1px, transparent 1px);
    opacity: 0.5;
    z-index: 0;
}

/* ━━━━━━━━━━━━━━━━━━
   LAYER 2: MECHANICAL GEARS
   ━━━━━━━━━━━━━━━━━━ */
.fp-legaltech-cloud-storage-backup-ui-elegant-mechanics {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    pointer-events: none;
}

.fp-legaltech-cloud-storage-backup-ui-elegant-gear-outer {
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 12px solid var(--fp-primary-color); /* Cutout effect */
    box-shadow: 0 0 0 4px var(--fp-secondary-color);
    animation: fp-legaltech-cloud-storage-backup-ui-elegant-spin 30s linear infinite;
}

/* The "teeth" of the gear using dashed border */
.fp-legaltech-cloud-storage-backup-ui-elegant-gear-outer::before {
    content: '';
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    border: 8px solid transparent;
    border-top-color: var(--fp-muted-color);
    border-bottom-color: var(--fp-muted-color);
    border-style: dashed;
    opacity: 0.15;
}

.fp-legaltech-cloud-storage-backup-ui-elegant-gear-inner {
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 2px solid var(--fp-muted-color);
    opacity: 0.2;
    animation: fp-legaltech-cloud-storage-backup-ui-elegant-spin-reverse 20s linear infinite;
}

.fp-legaltech-cloud-storage-backup-ui-elegant-gear-inner::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 4px solid var(--fp-soft-color);
    border-style: dotted;
    opacity: 0.3;
}

@keyframes fp-legaltech-cloud-storage-backup-ui-elegant-spin {
    100% { transform: rotate(360deg); }
}

@keyframes fp-legaltech-cloud-storage-backup-ui-elegant-spin-reverse {
    100% { transform: rotate(-360deg); }
}

/* ━━━━━━━━━━━━━━━━━━
   LAYER 1: GLASS VAULT (BREATHING)
   ━━━━━━━━━━━━━━━━━━ */
.fp-legaltech-cloud-storage-backup-ui-elegant-vault {
    position: relative;
    z-index: 2;
    width: 65%;
    max-width: 320px;
    aspect-ratio: 4/5;
    background: rgba(252, 252, 252, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(20, 20, 20, 0.08);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    /* Layer 1: Breathing */
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 1);
    animation: fp-legaltech-cloud-storage-backup-ui-elegant-breathe 6s ease-in-out infinite alternate;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes fp-legaltech-cloud-storage-backup-ui-elegant-breathe {
    0% { transform: translateY(0); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255,255,255,1); }
    100% { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255,255,255,1); }
}

/* Vault Content */
.fp-legaltech-cloud-storage-backup-ui-elegant-icon-wrap {
    width: 48px;
    height: 48px;
    border: 1px solid var(--fp-soft-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    position: relative;
    background: var(--fp-primary-color);
}

.fp-legaltech-cloud-storage-backup-ui-elegant-icon {
    width: 20px;
    height: 20px;
    fill: var(--fp-soft-color);
    transition: fill 0.3s ease, transform 0.3s ease;
}

.fp-legaltech-cloud-storage-backup-ui-elegant-header {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    color: var(--fp-soft-color);
    margin-bottom: 12px;
    text-transform: uppercase;
}

.fp-legaltech-cloud-storage-backup-ui-elegant-filename {
    font-family: "Georgia", "Times New Roman", serif;
    font-style: italic;
    font-size: 0.95rem;
    color: var(--fp-muted-color);
    margin-bottom: auto;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.fp-legaltech-cloud-storage-backup-ui-elegant-progress-wrap {
    width: 100%;
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fp-legaltech-cloud-storage-backup-ui-elegant-bar-bg {
    width: 100%;
    height: 2px;
    background-color: var(--fp-secondary-color);
    position: relative;
    overflow: hidden;
}

.fp-legaltech-cloud-storage-backup-ui-elegant-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background-color: var(--fp-soft-color);
    transition: width 0.1s linear;
}

.fp-legaltech-cloud-storage-backup-ui-elegant-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.fp-legaltech-cloud-storage-backup-ui-elegant-status-text {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--fp-muted-color);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.fp-legaltech-cloud-storage-backup-ui-elegant-percentage {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--fp-soft-color);
}

/* ━━━━━━━━━━━━━━━━━━
   LAYER 3: REACTIVE SPIKE (ENCRYPTION SYNC)
   ━━━━━━━━━━━━━━━━━━ */
.fp-legaltech-cloud-storage-backup-ui-elegant-spike .fp-legaltech-cloud-storage-backup-ui-elegant-vault {
    border-color: var(--fp-accent-color);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15), inset 0 0 0 1px var(--fp-accent-color);
    background: rgba(255, 255, 255, 0.85);
    transform: scale(1.02);
}

.fp-legaltech-cloud-storage-backup-ui-elegant-spike .fp-legaltech-cloud-storage-backup-ui-elegant-icon-wrap {
    background-color: var(--fp-accent-color);
    border-color: var(--fp-accent-color);
}

.fp-legaltech-cloud-storage-backup-ui-elegant-spike .fp-legaltech-cloud-storage-backup-ui-elegant-icon {
    fill: var(--fp-primary-color);
    transform: scale(1.1);
}

.fp-legaltech-cloud-storage-backup-ui-elegant-spike .fp-legaltech-cloud-storage-backup-ui-elegant-bar-fill {
    background-color: var(--fp-accent-color);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

.fp-legaltech-cloud-storage-backup-ui-elegant-spike .fp-legaltech-cloud-storage-backup-ui-elegant-gear-outer,
.fp-legaltech-cloud-storage-backup-ui-elegant-spike .fp-legaltech-cloud-storage-backup-ui-elegant-gear-inner {
    animation-duration: 5s; /* Mechanical speed burst */
    opacity: 0.4;
}

.fp-legaltech-cloud-storage-backup-ui-elegant-spike .fp-legaltech-cloud-storage-backup-ui-elegant-filename {
    color: var(--fp-soft-color);
    font-weight: bold;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .fp-legaltech-cloud-storage-backup-ui-elegant-vault { width: 85%; padding: 24px 20px; aspect-ratio: 1/1; }
    .fp-legaltech-cloud-storage-backup-ui-elegant-gear-outer { width: 220px; height: 220px; }
    .fp-legaltech-cloud-storage-backup-ui-elegant-gear-inner { width: 140px; height: 140px; }
    .fp-legaltech-cloud-storage-backup-ui-elegant-filename { font-size: 0.85rem; }
}

(function() {
    const instances = document.querySelectorAll('.fp-legaltech-cloud-storage-backup-ui-elegant');

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

        const stage = root.querySelector('.fp-legaltech-cloud-storage-backup-ui-elegant-stage');
        const progressFill = root.querySelector('.fp-legaltech-cloud-storage-backup-ui-elegant-bar-fill');
        const percentageText = root.querySelector('.fp-legaltech-cloud-storage-backup-ui-elegant-percentage');
        const filenameText = root.querySelector('.fp-legaltech-cloud-storage-backup-ui-elegant-val-file');
        const statusText = root.querySelector('.fp-legaltech-cloud-storage-backup-ui-elegant-status-text');

        if (!stage || !progressFill || !percentageText || !filenameText) return;

        // State Variables
        let progress = 0;
        let rafId;
        let isVisible = true;
        let lastTime = 0;
        let spikeTimer = 0;
        let isSpiking = false;

        const legalFiles = [
            "Confidential_Client_M_v3.pdf",
            "Exhibit_A_Financials_FY25.xlsx",
            "Merger_Agreement_Draft_FINAL.docx",
            "Deposition_Transcript_0924.txt",
            "Patent_Filing_Schematics.cad"
        ];
        let fileIndex = 0;

        // Visibility Observer to pause JS animations off-screen
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => isVisible = entry.isIntersecting);
        }, { threshold: 0.1 });
        observer.observe(root);

        function fp_legaltech_cloud_storage_backup_ui_elegant_loop(timestamp) {
            // DOM cleanup check
            if (!document.body.contains(root)) {
                cancelAnimationFrame(rafId);
                observer.disconnect();
                return;
            }

            if (document.visibilityState === 'hidden' || !isVisible) {
                lastTime = timestamp; // Prevent logic jump on resume
                rafId = requestAnimationFrame(fp_legaltech_cloud_storage_backup_ui_elegant_loop);
                return;
            }

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

            // Progress Update Logic
            if (!isSpiking) {
                // Normal slow progress
                progress += dt * 0.005; 
            } else {
                // Fast progress during mechanical spike
                progress += dt * 0.05;
            }

            // Handle file completion
            if (progress >= 100) {
                progress = 0;
                fileIndex = (fileIndex + 1) % legalFiles.length;
                filenameText.textContent = legalFiles[fileIndex];
                // Reset spike state on new file
                isSpiking = false;
                stage.classList.remove('fp-legaltech-cloud-storage-backup-ui-elegant-spike');
                statusText.textContent = "Uploading Vault";
            }

            // Render Progress
            progressFill.style.width = `${progress}%`;
            percentageText.textContent = `${Math.floor(progress)}%`;

            // Layer 3: Reactive Mechanical Spike Logic (Encryption chunk processing)
            spikeTimer += dt;
            if (!isSpiking && spikeTimer > 4000 && Math.random() < 0.3) {
                // Trigger Spike
                isSpiking = true;
                spikeTimer = 0;
                stage.classList.add('fp-legaltech-cloud-storage-backup-ui-elegant-spike');
                statusText.textContent = "Encrypting Hash";
            } else if (isSpiking && spikeTimer > 800) {
                // End Spike
                isSpiking = false;
                spikeTimer = 0;
                stage.classList.remove('fp-legaltech-cloud-storage-backup-ui-elegant-spike');
                statusText.textContent = "Uploading Vault";
            }

            rafId = requestAnimationFrame(fp_legaltech_cloud_storage_backup_ui_elegant_loop);
        }

        // Start Animation Loop
        rafId = requestAnimationFrame(fp_legaltech_cloud_storage_backup_ui_elegant_loop);
    });
})();