.fp-wedding-planning-email-routing-animation-ui {
    /* Layout System */
    --fp-container-width: 100%;
    --fp-max-width: 500px;
    --fp-aspect-ratio: 1 / 1;

    /* Color System - Pearl Minimalist */
    --fp-primary-color: #F9F8F6;    
    --fp-secondary-color: #E5E4E2;  
    --fp-muted-color: #2C2C2C;      
    --fp-soft-color: #F0EEEB;       
    --fp-background-color: transparent;

    --fp-info-color: #D1D0CE;       
    --fp-warning-color: #A8A8A8;    
    --fp-danger-color: #1A1A1A;     
    --fp-accent-color: #C0C0C0;     

    width: var(--fp-container-width);
    max-width: var(--fp-max-width);
    margin: 0 auto;
    background-color: var(--fp-background-color);
    position: relative;
    font-family: "Didot", "Playfair Display", serif;
}

.fp-wedding-planning-email-routing-animation-ui-stage {
    width: 100%;
    aspect-ratio: var(--fp-aspect-ratio);
    background: var(--fp-primary-color);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--fp-secondary-color);
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.05);
    perspective: 1200px;
}

.fp-wedding-planning-email-routing-animation-ui-envelope {
    width: 280px;
    height: 180px;
    background: var(--fp-primary-color);
    border: 1px solid var(--fp-secondary-color);
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fp-wedding-planning-email-routing-animation-ui-breathe 6s ease-in-out infinite;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}

.fp-wedding-planning-email-routing-animation-ui-peel {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    background: linear-gradient(225deg, transparent 50%, rgba(255,255,255,0.8) 50%, var(--fp-accent-color) 100%);
    box-shadow: -5px 5px 15px rgba(0,0,0,0.05);
    animation: fp-wedding-planning-email-routing-animation-ui-fold 4s ease-in-out infinite;
    z-index: 20;
}

.fp-wedding-planning-email-routing-animation-ui-invite-card {
    width: 240px;
    height: 140px;
    background: white;
    border: 1px solid var(--fp-soft-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    box-shadow: inset 0 0 40px rgba(0,0,0,0.01);
    position: relative;
}

.fp-wedding-planning-email-routing-animation-ui-monogram {
    font-size: 24px;
    color: var(--fp-muted-color);
    border: 1px solid var(--fp-accent-color);
    padding: 5px 12px;
    margin-bottom: 10px;
    letter-spacing: 4px;
}

.fp-wedding-planning-email-routing-animation-ui-text {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--fp-warning-color);
}

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

.fp-wedding-planning-email-routing-animation-ui-status {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--fp-muted-color);
    opacity: 0.6;
}

@keyframes fp-wedding-planning-email-routing-animation-ui-breathe {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-10px) scale(1.02); }
}

@keyframes fp-wedding-planning-email-routing-animation-ui-fold {
    0%, 100% { width: 0; height: 0; opacity: 0; }
    30%, 70% { width: 80px; height: 80px; opacity: 1; }
}

@media (max-width: 480px) {
    .fp-wedding-planning-email-routing-animation-ui-envelope {
        width: 220px;
        height: 140px;
    }
    .fp-wedding-planning-email-routing-animation-ui-invite-card {
        width: 190px;
        height: 110px;
    }
}

(function() {
    const components = document.querySelectorAll('.fp-wedding-planning-email-routing-animation-ui');
    
    components.forEach(root => {
        const canvas = root.querySelector('.fp-wedding-planning-email-routing-animation-ui-canvas');
        const ctx = canvas.getContext('2d');
        let animationFrame;
        let width, height;

        const particles = [];
        const particleCount = 20;

        function fp_resize_() {
            width = canvas.width = root.querySelector('.fp-wedding-planning-email-routing-animation-ui-stage').offsetWidth;
            height = canvas.height = root.querySelector('.fp-wedding-planning-email-routing-animation-ui-stage').offsetHeight;
        }

        class fp_Particle_ {
            constructor() {
                this.reset();
            }
            reset() {
                this.x = width / 2;
                this.y = height / 2;
                this.radius = Math.random() * 1.5 + 0.5;
                const angle = Math.random() * Math.PI * 2;
                const speed = Math.random() * 1.5 + 0.5;
                this.vx = Math.cos(angle) * speed;
                this.vy = Math.sin(angle) * speed;
                this.alpha = 1;
                this.decay = Math.random() * 0.01 + 0.003;
            }
            update() {
                this.x += this.vx;
                this.y += this.vy;
                this.alpha -= this.decay;
                if (this.alpha <= 0) this.reset();
            }
            draw() {
                ctx.save();
                ctx.globalAlpha = this.alpha;
                ctx.fillStyle = '#C0C0C0';
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fill();
                ctx.restore();
            }
        }

        function fp_init_() {
            fp_resize_();
            for (let i = 0; i < particleCount; i++) {
                particles.push(new fp_Particle_());
            }
        }

        function fp_loop_() {
            if (document.visibilityState === "hidden") {
                animationFrame = requestAnimationFrame(fp_loop_);
                return;
            }

            ctx.clearRect(0, 0, width, height);
            particles.forEach(p => {
                p.update();
                p.draw();
            });

            animationFrame = requestAnimationFrame(fp_loop_);
        }

        fp_init_();
        fp_loop_();

        window.addEventListener('resize', fp_resize_);

        const observer = new MutationObserver(() => {
            if (!document.body.contains(root)) {
                cancelAnimationFrame(animationFrame);
                window.removeEventListener('resize', fp_resize_);
                observer.disconnect();
            }
        });
        observer.observe(document.body, { childList: true, subtree: true });
    });
})();