.fp-wedding-email-sent-routing-ui {
    --fp-container-width: 100%;
    --fp-max-width: 500px;
    --fp-aspect-ratio: 1 / 1;

    --fp-primary-color: #FAFAFA;
    --fp-secondary-color: #E5E5E5;
    --fp-muted-color: #A3A3A3;
    --fp-soft-color: #F5F5F5;
    --fp-background-color: transparent;

    --fp-info-color: #D4D4D4;
    --fp-warning-color: #EEEEEE;
    --fp-danger-color: #2C2C2C;
    --fp-accent-color: #B0B0B0;
    --fp-text-color: #2C2C2C;

    display: flex;
    justify-content: center;
    width: var(--fp-container-width);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.fp-wedding-email-sent-routing-ui-container {
    width: 100%;
    max-width: var(--fp-max-width);
    background-color: var(--fp-background-color);
}

.fp-wedding-email-sent-routing-ui-stage {
    aspect-ratio: var(--fp-aspect-ratio);
    background-color: var(--fp-primary-color);
    border: 1px solid var(--fp-secondary-color);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.fp-wedding-email-sent-routing-ui-glow {
    position: absolute;
    width: 70%;
    height: 70%;
    background: radial-gradient(circle, rgba(176, 176, 176, 0.12) 0%, transparent 60%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: fp-wedding-email-sent-routing-ui-breathe 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

.fp-wedding-email-sent-routing-ui-ring {
    position: absolute;
    width: 60%;
    height: 60%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px dashed var(--fp-accent-color);
    opacity: 0.3;
    animation: fp-wedding-email-sent-routing-ui-spin 20s linear infinite;
    z-index: 2;
    pointer-events: none;
}

.fp-wedding-email-sent-routing-ui-ring::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1px solid var(--fp-secondary-color);
    animation: fp-wedding-email-sent-routing-ui-spin 15s linear infinite reverse;
}

.fp-wedding-email-sent-routing-ui-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.fp-wedding-email-sent-routing-ui-envelope-wrapper {
    position: relative;
    width: 160px;
    height: 110px;
    z-index: 5;
    perspective: 800px;
}

.fp-wedding-email-sent-routing-ui-envelope-back {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, var(--fp-secondary-color), var(--fp-soft-color));
    border-radius: 4px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
}

.fp-wedding-email-sent-routing-ui-card {
    position: absolute;
    bottom: 5px;
    left: 8px;
    right: 8px;
    height: 95px;
    background: var(--fp-primary-color);
    border: 1px solid var(--fp-info-color);
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    animation: fp-wedding-email-sent-routing-ui-card-slide 4s infinite ease-in-out;
}

.fp-wedding-email-sent-routing-ui-card-line {
    width: 50%;
    height: 2px;
    background: var(--fp-secondary-color);
    border-radius: 2px;
}

.fp-wedding-email-sent-routing-ui-card-line.short { width: 30%; }

.fp-wedding-email-sent-routing-ui-envelope-front {
    position: absolute;
    inset: 0;
    border-radius: 4px;
    background: var(--fp-primary-color);
    clip-path: polygon(0 0, 50% 45%, 100% 0, 100% 100%, 0 100%);
    border: 1px solid var(--fp-secondary-color);
    z-index: 6;
}

.fp-wedding-email-sent-routing-ui-flap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(135deg, var(--fp-primary-color) 0%, var(--fp-soft-color) 100%);
    border-bottom: 1px solid var(--fp-secondary-color);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform-origin: top;
    z-index: 7;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    animation: fp-wedding-email-sent-routing-ui-flap-fold 4s infinite ease-in-out;
    backface-visibility: hidden;
}

.fp-wedding-email-sent-routing-ui-flap-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(135deg, var(--fp-info-color) 0%, var(--fp-accent-color) 100%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform-origin: top;
    z-index: 4;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    animation: fp-wedding-email-sent-routing-ui-flap-fold-inner 4s infinite ease-in-out;
}

.fp-wedding-email-sent-routing-ui-status-panel {
    position: absolute;
    bottom: 30px;
    background-color: var(--fp-primary-color);
    border: 1px solid var(--fp-secondary-color);
    padding: 10px 24px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.fp-wedding-email-sent-routing-ui-status-dot {
    width: 8px;
    height: 8px;
    background-color: var(--fp-danger-color);
    border-radius: 50%;
    animation: fp-wedding-email-sent-routing-ui-pulse 2s ease-in-out infinite;
}

.fp-wedding-email-sent-routing-ui-status-text {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: var(--fp-text-color);
    text-transform: uppercase;
}

@keyframes fp-wedding-email-sent-routing-ui-breathe {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

@keyframes fp-wedding-email-sent-routing-ui-spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes fp-wedding-email-sent-routing-ui-flap-fold {
    0%, 15% { transform: rotateX(0deg); }
    25%, 75% { transform: rotateX(179.9deg); }
    85%, 100% { transform: rotateX(0deg); }
}

@keyframes fp-wedding-email-sent-routing-ui-flap-fold-inner {
    0%, 15% { transform: rotateX(0deg); opacity: 0; }
    15.1%, 84.9% { opacity: 1; }
    25%, 75% { transform: rotateX(179.9deg); }
    85%, 100% { transform: rotateX(0deg); opacity: 0; }
}

@keyframes fp-wedding-email-sent-routing-ui-card-slide {
    0%, 20% { transform: translateY(0); }
    30%, 70% { transform: translateY(-35px); }
    80%, 100% { transform: translateY(0); }
}

@keyframes fp-wedding-email-sent-routing-ui-pulse {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(44, 44, 44, 0.3); }
    50% { opacity: 0.5; transform: scale(1.1); box-shadow: 0 0 0 6px rgba(44, 44, 44, 0); }
}

@media (max-width: 480px) {
    .fp-wedding-email-sent-routing-ui-stage { border-radius: 12px; }
    .fp-wedding-email-sent-routing-ui-envelope-wrapper { width: 130px; height: 90px; }
    .fp-wedding-email-sent-routing-ui-card { height: 75px; }
    .fp-wedding-email-sent-routing-ui-status-panel { bottom: 20px; padding: 8px 18px; }
    .fp-wedding-email-sent-routing-ui-status-text { font-size: 0.65rem; }
    .fp-wedding-email-sent-routing-ui-ring { width: 80%; height: 80%; }
}

document.querySelectorAll('.fp-wedding-email-sent-routing-ui').forEach(root => {
    const canvas = root.querySelector('.fp-wedding-email-sent-routing-ui-canvas');
    if (!canvas) return;

    const ctx = canvas.getContext('2d', { alpha: true });
    
    let animationFrameId;
    let isRunning = false;
    let width, height, cx, cy;
    
    const numNodes = 8;
    const nodes = [];
    const packets = [];
    
    const accentColor = '#B0B0B0';
    const dangerColor = '#2C2C2C';
    const mutedColor = '#A3A3A3';  
    
    let cycleTimer = 0;
    const cycleDuration = 4000;

    function fp_wedding_email_sent_routing_ui_resize() {
        if (!canvas.parentElement) return;
        const rect = canvas.parentElement.getBoundingClientRect();
        width = rect.width;
        height = rect.height;
        canvas.width = width * window.devicePixelRatio;
        canvas.height = height * window.devicePixelRatio;
        ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
        cx = width / 2;
        cy = height / 2;
        
        initNodes();
    }

    class fp_wedding_Node {
        constructor(angle) {
            this.angle = angle;
            this.radius = Math.min(width, height) * 0.35;
            this.x = cx + Math.cos(this.angle) * this.radius;
            this.y = cy + Math.sin(this.angle) * this.radius;
            this.pulse = 0;
        }

        updatePos() {
            this.radius = Math.min(width, height) * 0.35;
            this.x = cx + Math.cos(this.angle) * this.radius;
            this.y = cy + Math.sin(this.angle) * this.radius;
        }

        draw(ctx) {
            ctx.beginPath();
            ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
            ctx.fillStyle = mutedColor;
            ctx.fill();

            if (this.pulse > 0.01) {
                ctx.beginPath();
                ctx.arc(this.x, this.y, 4 + (1 - this.pulse) * 8, 0, Math.PI * 2);
                ctx.strokeStyle = dangerColor;
                ctx.lineWidth = 1.5 * this.pulse;
                ctx.globalAlpha = this.pulse;
                ctx.stroke();
                ctx.globalAlpha = 1;
                
                this.pulse -= 0.03;
            } else {
                this.pulse = 0;
            }
        }

        hit() {
            this.pulse = 1;
        }
    }

    class fp_wedding_Packet {
        constructor(targetNode) {
            this.target = targetNode;
            this.progress = 0;
            this.speed = 0.015 + Math.random() * 0.01;
            
            const offset = 100;
            this.cpX = cx + (Math.random() - 0.5) * offset;
            this.cpY = cy + (Math.random() - 0.5) * offset;
            this.active = true;
        }

        updateAndDraw(ctx) {
            this.progress += this.speed;
            if (this.progress >= 1) {
                this.active = false;
                this.target.hit();
                return;
            }

            const t = this.progress;
            const x = (1 - t) * (1 - t) * cx + 2 * (1 - t) * t * this.cpX + t * t * this.target.x;
            const y = (1 - t) * (1 - t) * cy + 2 * (1 - t) * t * this.cpY + t * t * this.target.y;

            ctx.beginPath();
            ctx.moveTo(cx, cy);
            ctx.quadraticCurveTo(this.cpX, this.cpY, x, y);
            ctx.strokeStyle = accentColor;
            ctx.lineWidth = 1;
            ctx.globalAlpha = 0.2 + (0.3 * (1 - t));
            ctx.stroke();
            ctx.globalAlpha = 1;

            ctx.beginPath();
            ctx.arc(x, y, 2, 0, Math.PI * 2);
            ctx.fillStyle = accentColor;
            ctx.fill();
        }
    }

    function initNodes() {
        nodes.length = 0;
        for (let i = 0; i < numNodes; i++) {
            nodes.push(new fp_wedding_Node((i / numNodes) * Math.PI * 2));
        }
    }

    function fp_wedding_email_sent_routing_ui_loop(timestamp) {
        if (!isRunning) return;
        
        ctx.clearRect(0, 0, width, height);

        cycleTimer = timestamp % cycleDuration;
        const cyclePhase = cycleTimer / cycleDuration;
        
        if (cyclePhase > 0.25 && cyclePhase < 0.70) {
            if (Math.random() < 0.15) {
                const target = nodes[Math.floor(Math.random() * nodes.length)];
                packets.push(new fp_wedding_Packet(target));
            }
        }

        nodes.forEach(node => {
            node.updatePos();
            node.draw(ctx);
        });

        for (let i = packets.length - 1; i >= 0; i--) {
            packets[i].updateAndDraw(ctx);
            if (!packets[i].active) {
                packets.splice(i, 1);
            }
        }

        animationFrameId = requestAnimationFrame(fp_wedding_email_sent_routing_ui_loop);
    }

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                if (!isRunning && document.visibilityState !== "hidden") {
                    isRunning = true;
                    animationFrameId = requestAnimationFrame(fp_wedding_email_sent_routing_ui_loop);
                }
            } else {
                isRunning = false;
                cancelAnimationFrame(animationFrameId);
            }
        });
    });

    function fp_wedding_email_sent_routing_ui_handleVisibility() {
        if (document.visibilityState === "hidden") {
            isRunning = false;
            cancelAnimationFrame(animationFrameId);
        } else if (!isRunning && root.getBoundingClientRect().top < window.innerHeight && root.getBoundingClientRect().bottom > 0) {
            isRunning = true;
            animationFrameId = requestAnimationFrame(fp_wedding_email_sent_routing_ui_loop);
        }
    }

    function fp_wedding_email_sent_routing_ui_checkDOM() {
        if (!document.body.contains(root)) {
            isRunning = false;
            cancelAnimationFrame(animationFrameId);
            window.removeEventListener('resize', fp_wedding_email_sent_routing_ui_resize);
            document.removeEventListener('visibilitychange', fp_wedding_email_sent_routing_ui_handleVisibility);
            observer.disconnect();
            return true;
        }
        return false;
    }

    window.addEventListener('resize', fp_wedding_email_sent_routing_ui_resize);
    document.addEventListener('visibilitychange', fp_wedding_email_sent_routing_ui_handleVisibility);
    
    fp_wedding_email_sent_routing_ui_resize();
    observer.observe(root);
    
    const cleanupInterval = setInterval(() => {
        if (fp_wedding_email_sent_routing_ui_checkDOM()) {
            clearInterval(cleanupInterval);
        }
    }, 2000);
});