.fp-proptech-ssl-firewall-shield-ui {
    --fp-container-width: 100%;
    --fp-max-width: 500px;
    --fp-aspect-ratio: 1 / 1;

    --fp-primary-color: #ffffff;
    --fp-secondary-color: #f8fafc;
    --fp-muted-color: #1a1d21;
    --fp-soft-color: #e2e8f0;
    --fp-background-color: transparent;

    --fp-info-color: #2dd4bf;
    --fp-warning-color: #14b8a6;
    --fp-danger-color: #0f766e;
    --fp-accent-color: #14b8a6;

    --fp-holo-1: rgba(45, 212, 191, 0.4);
    --fp-holo-2: rgba(20, 184, 166, 0.3);
    --fp-holo-3: rgba(255, 255, 255, 0.9);

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

.fp-proptech-ssl-firewall-shield-ui-stage {
    width: 100%;
    aspect-ratio: var(--fp-aspect-ratio);
    background: var(--fp-primary-color);
    border-radius: 32px;
    box-shadow: 
        inset 0 0 0 1px rgba(226, 232, 240, 0.5),
        0 30px 60px -12px rgba(13, 148, 136, 0.1),
        0 15px 30px -10px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-proptech-ssl-firewall-shield-ui-bg {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(var(--fp-secondary-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--fp-secondary-color) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.8;
    mask-image: radial-gradient(circle at center, black 40%, transparent 90%);
    -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 90%);
    z-index: 1;
}

.fp-proptech-ssl-firewall-shield-ui-floor {
    position: absolute;
    bottom: -50px; left: -50px; right: -50px;
    height: 200px;
    background-image: 
        linear-gradient(rgba(20, 184, 166, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20, 184, 166, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    transform: perspective(150px) rotateX(60deg);
    opacity: 0.4;
    z-index: 2;
}

.fp-proptech-ssl-firewall-shield-ui-projector {
    position: absolute;
    bottom: 20%;
    width: 80px;
    height: 10px;
    background: linear-gradient(to right, var(--fp-soft-color), #ffffff, var(--fp-soft-color));
    border-radius: 50%;
    filter: blur(2px);
    z-index: 3;
    animation: fp-proptech-ssl-firewall-shield-ui-pulse-projector 4s infinite ease-in-out;
}

.fp-proptech-ssl-firewall-shield-ui-projector::after {
    content:'';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid var(--fp-soft-color);
    opacity: 0.5;
}

.fp-proptech-ssl-firewall-shield-ui-core {
    position: relative;
    width: 55%;
    height: 55%;
    max-width: 280px;
    max-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    animation: fp-proptech-ssl-firewall-shield-ui-breathe 5s ease-in-out infinite;
}

.fp-proptech-ssl-firewall-shield-ui-aura {
    position: absolute;
    width: 140%;
    height: 140%;
    border-radius: 50%;
    background: conic-gradient(
        from 180deg,
        var(--fp-holo-1) 0%,
        var(--fp-holo-2) 15%,
        transparent 25%,
        var(--fp-holo-2) 35%,
        var(--fp-holo-1) 50%,
        var(--fp-holo-2) 65%,
        transparent 75%,
        var(--fp-holo-2) 85%,
        var(--fp-holo-1) 100%
    );
    filter: blur(25px);
    opacity: 0.7;
    animation: fp-proptech-ssl-firewall-shield-ui-rotate 12s linear infinite;
}

.fp-proptech-ssl-firewall-shield-ui-aura::before {
    content:'';
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 0%, transparent 60%);
    mix-blend-mode: overlay;
}

.fp-proptech-ssl-firewall-shield-ui-hud-ring {
    position: absolute;
    inset: -15%;
    border: 1px dashed var(--fp-soft-color);
    border-radius: 50%;
    opacity: 0.4;
    animation: fp-proptech-ssl-firewall-shield-ui-rotate 20s linear infinite reverse;
}

.fp-proptech-ssl-firewall-shield-ui-hud-ring::after {
    content: 'DATA_FLOW :: COMPLIANT :: AES-256';
    position: absolute;
    font-size: 7px;
    color: var(--fp-accent-color);
    letter-spacing: 2px;
    font-weight: 700;
    text-transform: uppercase;
    left: 50%;
    top: -10px;
    transform: translateX(-50%);
    white-space: nowrap;
}

.fp-proptech-ssl-firewall-shield-ui-wave-wrap {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    overflow: hidden;
    z-index: 6;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 50 2 L 8 28 L 8 68 C 8 95, 50 118, 50 118 C 50 118, 92 95, 92 68 L 92 28 Z' /%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 50 2 L 8 28 L 8 68 C 8 95, 50 118, 50 118 C 50 118, 92 95, 92 68 L 92 28 Z' /%3E%3C/svg%3E");
    mask-size: contain; mask-position: center; mask-repeat: no-repeat;
    -webkit-mask-size: contain; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255,255,255,0.4) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 10px 20px rgba(255,255,255,0.5);
}

.fp-proptech-ssl-firewall-shield-ui-canvas {
    width: 100%; height: 100%; display: block;
}

.fp-proptech-ssl-firewall-shield-ui-glass {
    position: absolute; inset: 0; z-index: 8;
    pointer-events: none;
}

.fp-proptech-ssl-firewall-shield-ui-svg {
    width: 100%; height: 100%;
    filter: drop-shadow(0 6px 10px rgba(13, 148, 136, 0.15));
}

.fp-proptech-ssl-firewall-shield-ui-path-outer {
    fill: none; stroke: var(--fp-soft-color); stroke-width: 1; stroke-dasharray: 4 4;
}

.fp-proptech-ssl-firewall-shield-ui-path-mid {
    fill: none; stroke: var(--fp-accent-color); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round;
}

.fp-proptech-ssl-firewall-shield-ui-path-inner {
    fill: none; stroke: var(--fp-secondary-color); stroke-width: 1; opacity: 0.3;
}

.fp-proptech-ssl-firewall-shield-ui-path-house {
    fill: none; stroke: var(--fp-muted-color); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.fp-proptech-ssl-firewall-shield-ui-node {
    fill: var(--fp-primary-color); stroke: var(--fp-accent-color); stroke-width: 1.5;
}

.fp-proptech-ssl-firewall-shield-ui-scan {
    position: absolute;
    left: 5%; width: 90%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--fp-accent-color), transparent);
    box-shadow: 0 0 10px var(--fp-accent-color);
    border-radius: 1px;
    z-index: 7;
    animation: fp-proptech-ssl-firewall-shield-ui-scan-move 3s ease-in-out infinite;
}

.fp-proptech-ssl-firewall-shield-ui-status {
    position: absolute; bottom: 32px;
    display: flex; align-items: center; gap: 14px;
    background: #ffffff;
    padding: 12px 24px;
    border-radius: 100px;
    box-shadow: 
        0 15px 35px -10px rgba(51, 65, 85, 0.1),
        0 5px 15px rgba(51, 65, 85, 0.05),
        inset 0 0 0 1px var(--fp-soft-color);
    z-index: 10;
}

.fp-proptech-ssl-firewall-shield-ui-status-icon {
    width: 10px; height: 10px;
    background-color: var(--fp-accent-color);
    border-radius: 50%;
    position: relative;
}

.fp-proptech-ssl-firewall-shield-ui-status-icon::after {
    content: ''; position: absolute; inset: -5px; border-radius: 50%;
    border: 1px solid var(--fp-accent-color);
    animation: fp-proptech-ssl-firewall-shield-ui-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.fp-proptech-ssl-firewall-shield-ui-status-text { display: flex; flex-direction: column; gap: 1px; }

.fp-proptech-ssl-firewall-shield-ui-status-label {
    font-size: 0.6rem; font-weight: 800; color: var(--fp-muted-color);
    letter-spacing: 0.1em; text-transform: uppercase;
}

.fp-proptech-ssl-firewall-shield-ui-status-value {
    font-size: 0.9rem; font-weight: 700; color: var(--fp-accent-color);
}

@keyframes fp-proptech-ssl-firewall-shield-ui-breathe {
    0%, 100% { transform: scale(1) translateY(0); filter: drop-shadow(0 10px 20px rgba(13, 148, 136, 0.1)); }
    50% { transform: scale(1.01) translateY(-3px); filter: drop-shadow(0 15px 30px rgba(13, 148, 136, 0.2)); }
}

@keyframes fp-proptech-ssl-firewall-shield-ui-rotate {
    from { transform: rotate(0deg); } to { transform: rotate(360deg); }
}

@keyframes fp-proptech-ssl-firewall-shield-ui-ping {
    75%, 100% { transform: scale(2.5); opacity: 0; }
}

@keyframes fp-proptech-ssl-firewall-shield-ui-scan-move {
    0%, 100% { top: 5%; opacity: 0; }
    5% { opacity: 0.8; }
    50% { top: 90%; opacity: 1; }
    95% { opacity: 0.8; }
}

@keyframes fp-proptech-ssl-firewall-shield-ui-pulse-projector {
    0%, 100% { opacity: 0.6; transform: scaleX(1); }
    50% { opacity: 1; transform: scaleX(1.1); }
}

@media (max-width: 480px) {
    .fp-proptech-ssl-firewall-shield-ui-core { width: 65%; height: 65%; }
    .fp-proptech-ssl-firewall-shield-ui-status { bottom: 20px; padding: 10px 20px; }
    .fp-proptech-ssl-firewall-shield-ui-status-value { font-size: 0.8rem; }
}

document.querySelectorAll('.fp-proptech-ssl-firewall-shield-ui').forEach(root => {
    const canvas = root.querySelector('.fp-proptech-ssl-firewall-shield-ui-canvas');
    if (!canvas) return;
    
    const ctx = canvas.getContext('2d');
    const dynamicLabel = root.querySelector('.fp-proptech-ssl-firewall-shield-ui-dynamic-label');
    
    let width, height;
    let animationFrameId;
    let time = 0;
    
    let baseAmplitude = 8;
    let currentAmplitude = baseAmplitude;
    let targetAmplitude = baseAmplitude;
    let frequency = 0.03;
    let speed = 2.0;
    let spikeTimer = 0;
    
    const computedStyle = getComputedStyle(root);
    const tealAccent = computedStyle.getPropertyValue('--fp-accent-color').trim() || '#14b8a6';
    const charBlack = computedStyle.getPropertyValue('--fp-muted-color').trim() || '#1a1d21';

    function fp_proptech_ssl_firewall_shield_ui_resize() {
        const parent = canvas.parentElement;
        width = parent.clientWidth;
        height = parent.clientHeight;
        const dpr = window.devicePixelRatio || 1;
        canvas.width = width * dpr;
        canvas.height = height * dpr;
        ctx.scale(dpr, dpr);
        
        baseAmplitude = height * 0.07;
        currentAmplitude = baseAmplitude;
        targetAmplitude = baseAmplitude;
    }

    const resizeObserver = new ResizeObserver(() => fp_proptech_ssl_firewall_shield_ui_resize());
    const stage = root.querySelector('.fp-proptech-ssl-firewall-shield-ui-stage');
    if (stage) resizeObserver.observe(stage);

    function drawWave(yOffset, amp, freq, color, timeOffset, fill) {
        ctx.beginPath();
        ctx.moveTo(0, height);
        for (let x = 0; x <= width; x += 3) {
            const y = yOffset + Math.sin(x * freq + (time + timeOffset)) * amp;
            ctx.lineTo(x, y);
        }
        if(fill){
            ctx.lineTo(width, height);
            ctx.lineTo(0, height);
            ctx.fillStyle = color;
            ctx.fill();
        } else {
            ctx.lineTo(width, height*2);
            ctx.strokeStyle = color;
            ctx.stroke();
        }
    }

    let lastTime = performance.now();

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

        const dt = currentTime - lastTime;
        lastTime = currentTime;
        
        time += (speed * targetAmplitude/baseAmplitude) * (dt / 16);
        spikeTimer += dt;

        if (spikeTimer > 4000) {
            spikeTimer = 0;
            targetAmplitude = baseAmplitude * 3.0;
            
            if(dynamicLabel) {
                dynamicLabel.textContent = "INTEGRITY_CHECK :: PROCESSING";
                dynamicLabel.style.color = '#e11d48';
            }
            
            setTimeout(() => {
                targetAmplitude = baseAmplitude;
                if(dynamicLabel) {
                    dynamicLabel.textContent = "WAF_v4 :: ENCRYPTED";
                    dynamicLabel.style.color = charBlack;
                }
            }, 800);
        }

        currentAmplitude += (targetAmplitude - currentAmplitude) * 0.1;

        ctx.clearRect(0, 0, width, height);

        const midY = height * 0.55;
        const waveColor = spikeTimer < 50 && targetAmplitude > baseAmplitude * 2 ? '#e11d48' : tealAccent;
        
        ctx.lineWidth = 0.5;
        ctx.strokeStyle = `${waveColor}20`;
        for(let i=0; i<height; i+= 15) {
            ctx.beginPath(); ctx.moveTo(0, i); ctx.lineTo(width, i); ctx.stroke();
        }

        ctx.lineWidth = 1.5;
        drawWave(midY, currentAmplitude * 0.9, frequency * 0.8, `${waveColor}30`, 0, true);
        drawWave(midY + 10, currentAmplitude * 1.2, frequency, `${waveColor}60`, 2, false);
        drawWave(midY + 20, currentAmplitude * 0.7, frequency * 1.4, `${waveColor}50`, 4, true);

        const houseIcon = root.querySelector('.fp-proptech-ssl-firewall-shield-ui-path-house');
        if (houseIcon) {
            houseIcon.style.stroke = targetAmplitude > baseAmplitude * 1.5 ? waveColor : charBlack;
        }

        animationFrameId = requestAnimationFrame(fp_proptech_ssl_firewall_shield_ui_animate);
    }

    fp_proptech_ssl_firewall_shield_ui_resize();
    animationFrameId = requestAnimationFrame(fp_proptech_ssl_firewall_shield_ui_animate);

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