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

    /* Semantic Color System (Pearl Minimalist Monochrome) */
    --fp-primary-color: #FFFFFF; /* Putih Mutiara */
    --fp-secondary-color: #F0F0F0; /* Soft structure */
    --fp-muted-color: #4A4A4A; /* Abu Sangat Tua */
    --fp-soft-color: #FAFAFA; /* Soft pearl background */
    --fp-background-color: transparent;

    --fp-info-color: #E2E2E2; /* Silver Mutiara */
    --fp-warning-color: #E2E2E2;
    --fp-danger-color: #E2E2E2;
    --fp-accent-color: #E2E2E2;

    /* Strict alpha values for shadows & layers defined here */
    --fp-shadow-light: rgba(74, 74, 74, 0.05);
    --fp-shadow-medium: rgba(74, 74, 74, 0.12);
    --fp-transparent: transparent;

    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: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
}

.fp-wedding-planning-email-routing-animation * {
    box-sizing: border-box;
}

.fp-wedding-planning-email-routing-animation-stage {
    width: 100%;
    aspect-ratio: var(--fp-aspect-ratio);
    background-color: var(--fp-soft-color);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--fp-secondary-color);
    /* Layer 1: Subtle Base Breathing */
    animation: fp-wedding-planning-email-routing-animation-breathe 6s ease-in-out infinite;
}

@keyframes fp-wedding-planning-email-routing-animation-breathe {
    0%, 100% { box-shadow: inset 0 0 40px var(--fp-shadow-light); }
    50% { box-shadow: inset 0 0 80px var(--fp-shadow-medium); }
}

/* Layer 2: Rotational CSS Elements (Combined with JS) */
.fp-wedding-planning-email-routing-animation-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid var(--fp-info-color);
}

.fp-wedding-planning-email-routing-animation-ring-outer {
    width: 75%;
    height: 75%;
    border-style: dashed;
    animation: fp-wedding-planning-email-routing-animation-spin 20s linear infinite;
    opacity: 0.6;
}

.fp-wedding-planning-email-routing-animation-ring-inner {
    width: 55%;
    height: 55%;
    border-style: solid;
    border-color: var(--fp-secondary-color);
    animation: fp-wedding-planning-email-routing-animation-spin-rev 15s linear infinite;
}

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

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

/* Canvas for JS Orbital Particle */
.fp-wedding-planning-email-routing-animation-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* Central Document Structure */
.fp-wedding-planning-email-routing-animation-doc-container {
    position: relative;
    width: 150px;
    height: 220px;
    z-index: 3;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fp-wedding-planning-email-routing-animation-doc-shadow {
    position: absolute;
    inset: 0;
    background: var(--fp-primary-color);
    box-shadow: 0 15px 35px var(--fp-shadow-medium);
    border-radius: 2px;
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
    transition: clip-path 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fp-wedding-planning-email-routing-animation-doc-paper {
    position: absolute;
    inset: 0;
    background: var(--fp-primary-color);
    border: 1px solid var(--fp-secondary-color);
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 10px;
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
    transition: clip-path 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.5s ease;
}

/* The Fold / Peel Element */
.fp-wedding-planning-email-routing-animation-doc-flap {
    position: absolute;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
    background: linear-gradient(225deg, var(--fp-transparent) 50%, var(--fp-secondary-color) 50%);
    filter: drop-shadow(-2px 2px 3px var(--fp-shadow-light));
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform-origin: bottom left;
    border-bottom-left-radius: 4px;
}

/* Document Inner UI */
.fp-wedding-planning-email-routing-animation-doc-title {
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    color: var(--fp-muted-color);
    margin-bottom: 20px;
    text-align: center;
}

.fp-wedding-planning-email-routing-animation-doc-seal {
    width: 30px;
    height: 30px;
    border: 1px solid var(--fp-accent-color);
    border-radius: 50%;
    margin-bottom: 20px;
    position: relative;
}

.fp-wedding-planning-email-routing-animation-doc-seal::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 20px; height: 20px;
    border: 1px solid var(--fp-secondary-color);
    border-radius: 50%;
}

.fp-wedding-planning-email-routing-animation-doc-line {
    height: 1px;
    background: var(--fp-secondary-color);
    margin-bottom: 8px;
}

/* Layer 3: Reactive Spike (Triggered when JS orbital passes corner) */
.fp-wedding-planning-email-routing-animation-doc-container.fp-wedding-planning-email-routing-animation-spike {
    transform: scale(1.02) translateY(-2px);
}

.fp-wedding-planning-email-routing-animation-doc-container.fp-wedding-planning-email-routing-animation-spike .fp-wedding-planning-email-routing-animation-doc-shadow,
.fp-wedding-planning-email-routing-animation-doc-container.fp-wedding-planning-email-routing-animation-spike .fp-wedding-planning-email-routing-animation-doc-paper {
    clip-path: polygon(0 0, calc(100% - 46px) 0, 100% 46px, 100% 100%, 0 100%);
    border-color: var(--fp-info-color);
}

.fp-wedding-planning-email-routing-animation-doc-container.fp-wedding-planning-email-routing-animation-spike .fp-wedding-planning-email-routing-animation-doc-flap {
    width: 46px;
    height: 46px;
    background: linear-gradient(225deg, var(--fp-transparent) 50%, var(--fp-info-color) 50%);
    filter: drop-shadow(-4px 4px 6px var(--fp-shadow-medium));
}

.fp-wedding-planning-email-routing-animation-status {
    position: absolute;
    bottom: 20px;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.25em;
    color: var(--fp-muted-color);
    text-transform: uppercase;
    z-index: 4;
    opacity: 0.7;
}

/* Responsiveness */
@media (max-width: 480px) {
    .fp-wedding-planning-email-routing-animation-doc-container {
        width: 120px;
        height: 180px;
    }
    .fp-wedding-planning-email-routing-animation-doc-title {
        font-size: 0.55rem;
        margin-bottom: 15px;
    }
    .fp-wedding-planning-email-routing-animation-doc-seal {
        width: 24px;
        height: 24px;
        margin-bottom: 15px;
    }
}

(function() {
    const instances = document.querySelectorAll('.fp-wedding-planning-email-routing-animation');

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

        const canvas = root.querySelector('.fp-wedding-planning-email-routing-animation-canvas');
        const docContainer = root.querySelector('.fp-wedding-planning-email-routing-animation-doc-container');
        
        if (!canvas || !docContainer) return;

        const ctx = canvas.getContext('2d');
        
        let rafId;
        let width, height;
        let angle = Math.PI; // Start at bottom
        let isVisible = true;
        let hasTriggeredPeel = false;

        // Resize Observer for Canvas
        function resize() {
            width = canvas.offsetWidth;
            height = canvas.offsetHeight;
            
            // Handle high DPI displays for crisp rendering
            const dpr = window.devicePixelRatio || 1;
            canvas.width = width * dpr;
            canvas.height = height * dpr;
            ctx.scale(dpr, dpr);
        }

        window.addEventListener('resize', resize);
        resize();

        // Visibility State
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => isVisible = entry.isIntersecting);
        }, { threshold: 0.1 });
        observer.observe(root);

        // Fetch CSS variable colors for JS synchronization
        const styles = getComputedStyle(root);
        const mutedColor = styles.getPropertyValue('--fp-muted-color').trim() || '#4A4A4A';
        const accentColor = styles.getPropertyValue('--fp-accent-color').trim() || '#E2E2E2';

        // JS Animation Loop Engine (Layer 2 & Layer 3 trigger)
        function render() {
            if (!document.body.contains(root)) {
                window.removeEventListener('resize', resize);
                observer.disconnect();
                cancelAnimationFrame(rafId);
                return;
            }

            if (document.visibilityState === 'hidden' || !isVisible) {
                rafId = requestAnimationFrame(render);
                return;
            }

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

            const cx = width / 2;
            const cy = height / 2;
            
            // Responsive orbit radius
            const isMobile = width <= 480;
            const radius = isMobile ? (width * 0.75 / 2) : (width * 0.75 / 2);

            // Update orbital angle
            angle -= 0.025; // Counter-clockwise

            // Normalized angle between 0 and 2PI
            let normAngle = ((angle % (Math.PI * 2)) + (Math.PI * 2)) % (Math.PI * 2);

            // Draw orbital tracker dot
            const x = cx + Math.cos(angle) * radius;
            const y = cy + Math.sin(angle) * radius;

            // Glowing tail
            ctx.beginPath();
            ctx.arc(x, y, 4, 0, Math.PI * 2);
            ctx.fillStyle = mutedColor;
            ctx.fill();

            ctx.beginPath();
            ctx.arc(x, y, 10, 0, Math.PI * 2);
            ctx.fillStyle = accentColor;
            ctx.globalAlpha = 0.4;
            ctx.fill();
            ctx.globalAlpha = 1.0;

            // Layer 3: Reactive Spike Logic
            // Trigger when the orbital dot passes the top-right corner (~ 7/4 PI)
            const targetAngle = Math.PI * 1.75;
            
            if (normAngle < targetAngle + 0.1 && normAngle > targetAngle - 0.2) {
                if (!hasTriggeredPeel) {
                    hasTriggeredPeel = true;
                    
                    // Execute Page Peel Spike
                    docContainer.classList.add('fp-wedding-planning-email-routing-animation-spike');
                    
                    // Revert peel after passing
                    setTimeout(() => {
                        if (docContainer) {
                            docContainer.classList.remove('fp-wedding-planning-email-routing-animation-spike');
                        }
                    }, 600);
                }
            } else {
                // Reset trigger once far enough away
                if (normAngle < Math.PI * 1.5 || normAngle > Math.PI * 1.9) {
                    hasTriggeredPeel = false;
                }
            }

            rafId = requestAnimationFrame(render);
        }

        rafId = requestAnimationFrame(render);
    });
})();