script.js

// Scroll-triggered animations
const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -100px 0px'
};

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('visible');
        }
    });
}, observerOptions);

// Observe all sections
document.querySelectorAll('section').forEach(section => {
    observer.observe(section);
});

// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
});

// Add hover effect to math items
document.querySelectorAll('.math-item').forEach(item => {
    item.addEventListener('mouseenter', function() {
        this.style.boxShadow = '0 8px 32px rgba(255, 235, 59, 0.15)';
    });
    item.addEventListener('mouseleave', function() {
        this.style.boxShadow = 'none';
    });
});

// Gate section pulse effect
const gateBlock = document.querySelector('.gate-block');
if (gateBlock) {
    const pulseAnimation = () => {
        gateBlock.style.boxShadow = '0 0 40px rgba(255, 235, 59, 0.3)';
        setTimeout(() => {
            gateBlock.style.boxShadow = '0 0 20px rgba(255, 235, 59, 0.1)';
        }, 1000);
    };

    // Pulse when gate becomes visible
    const gateObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                pulseAnimation();
                // Repeat pulse every 5 seconds while visible
                const pulseInterval = setInterval(() => {
                    if (entry.isIntersecting) {
                        pulseAnimation();
                    } else {
                        clearInterval(pulseInterval);
                    }
                }, 5000);
            }
        });
    }, { threshold: 0.5 });

    gateObserver.observe(gateBlock);
}

// Add entrance animations to architecture layers with stagger
document.querySelectorAll('.arch-layer').forEach((layer, index) => {
    layer.style.opacity = '0';
    layer.style.transform = 'translateY(30px)';
    layer.style.transition = 'opacity 0.8s ease, transform 0.8s ease';

    const layerObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                setTimeout(() => {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }, index * 200);
            }
        });
    }, { threshold: 0.3 });

    layerObserver.observe(layer);
});

// Highlight current day countdown
const updateDayHighlight = () => {
    const dayElements = document.querySelectorAll('.gate-day, .timeline-badge');
    dayElements.forEach(el => {
        const text = el.textContent.trim();
        if (text.includes('10')) {
            el.style.animation = 'pulse 2s ease-in-out infinite';
        }
    });
};

updateDayHighlight();

// Add print styles dynamically
const printStyles = `
    @media print {
        body {
            background: white;
            color: black;
        }
        .grain-overlay {
            display: none;
        }
        section {
            opacity: 1;
            transform: none;
            page-break-inside: avoid;
        }
        .masthead {
            min-height: auto;
            page-break-after: always;
        }
        .gate-block {
            page-break-before: always;
        }
    }
`;

const styleSheet = document.createElement('style');
styleSheet.textContent = printStyles;
document.head.appendChild(styleSheet);

// Add keyboard navigation
document.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
        const sections = Array.from(document.querySelectorAll('section'));
        const currentSection = sections.find(section => {
            const rect = section.getBoundingClientRect();
            return rect.top >= 0 && rect.top < window.innerHeight / 2;
        });

        if (currentSection) {
            const currentIndex = sections.indexOf(currentSection);
            let targetSection;

            if (e.key === 'ArrowDown' && currentIndex < sections.length - 1) {
                targetSection = sections[currentIndex + 1];
            } else if (e.key === 'ArrowUp' && currentIndex > 0) {
                targetSection = sections[currentIndex - 1];
            }

            if (targetSection) {
                targetSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }
        }
    }
});

console.log('🚀 Stellar Migration Handover - Loaded');
console.log('📊 Decision Status: DIRECTIONAL YES');
console.log('⏱️ Timeline: 10 Days');
console.log('🎯 Critical Dependency: NIM-Sharing Stablecoin Facilitation');