// Initialize page document.addEventListener(‘DOMContentLoaded’, function() { // Animate page load setTimeout(() => { document.querySelector(‘.blockchain-security-hub’).classList.add(‘loaded’); }, 100); // Intersection Observer for scroll animations const observerOptions = { threshold: 0.1, rootMargin: ‘0px 0px -50px 0px’ }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add(‘visible’); } }); }, observerOptions); // Observe sections document.querySelectorAll(‘.content-section, .timeline-item’).forEach(section => { observer.observe(section); }); // Smooth scrolling for navigation document.querySelectorAll(‘.nav-item’).forEach(link => { link.addEventListener(‘click’, function(e) { e.preventDefault(); const targetId = this.getAttribute(‘href’); const targetElement = document.querySelector(targetId); if (targetElement) { targetElement.scrollIntoView({ behavior: ‘smooth’, block: ‘start’ }); // Update active nav item document.querySelectorAll(‘.nav-item’).forEach(item => { item.classList.remove(‘active’); }); this.classList.add(‘active’); } }); }); // Accordion functionality document.querySelectorAll(‘.accordion-header’).forEach(header => { header.addEventListener(‘click’, function() { const content = this.nextElementSibling; const icon = this.querySelector(‘.accordion-icon’); const isActive = this.classList.contains(‘active’); // Close all other accordions document.querySelectorAll(‘.accordion-header’).forEach(otherHeader => { if (otherHeader !== this) { otherHeader.classList.remove(‘active’); otherHeader.nextElementSibling.classList.remove(‘active’); } }); // Toggle current accordion if (isActive) { this.classList.remove(‘active’); content.classList.remove(‘active’); } else { this.classList.add(‘active’); content.classList.add(‘active’); } }); }); // Update active nav item on scroll const sections = document.querySelectorAll(‘.content-section’); const navItems = document.querySelectorAll(‘.nav-item’); window.addEventListener(‘scroll’, () => { let current = ”; sections.forEach(section => { const sectionTop = section.offsetTop; const sectionHeight = section.clientHeight; if (scrollY >= (sectionTop – 200)) { current = section.getAttribute(‘id’); } }); navItems.forEach(item => { item.classList.remove(‘active’); if (item.getAttribute(‘href’) === `#${current}`) { item.classList.add(‘active’); } }); }); // Add hover effects to security cards document.querySelectorAll(‘.security-card’).forEach(card => { card.addEventListener(‘mouseenter’, function() { this.style.transform = ‘translateY(-10px) scale(1.02)’; }); card.addEventListener(‘mouseleave’, function() { this.style.transform = ‘translateY(0) scale(1)’; }); }); // Animate statistics on load function animateStats() { const stats = document.querySelectorAll(‘.stat-number’); stats.forEach((stat, index) => { setTimeout(() => { stat.style.opacity = ‘0’; stat.style.transform = ‘scale(0.5)’; setTimeout(() => { stat.style.transition = ‘all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)’; stat.style.opacity = ‘1’; stat.style.transform = ‘scale(1)’; }, 100); }, index * 200); }); } // Start stats animation after page load setTimeout(animateStats, 1000); // Add parallax effect to hero section window.addEventListener(‘scroll’, () => { const scrolled = window.pageYOffset; const rate = scrolled * -0.5; const heroSection = document.querySelector(‘.hero-section’); if (heroSection) { heroSection.style.transform = `translateY(${rate}px)`; } }); // Dynamic threat level indicators function updateThreatLevels() { const riskElements = document.querySelectorAll(‘.risk-level’); riskElements.forEach(element => { element.addEventListener(‘mouseenter’, function() { this.style.transform = ‘scale(1.1)’; this.style.boxShadow = ‘0 4px 8px rgba(0,0,0,0.2)’; }); element.addEventListener(‘mouseleave’, function() { this.style.transform = ‘scale(1)’; this.style.boxShadow = ‘none’; }); }); } updateThreatLevels(); // Add loading animation for table setTimeout(() => { const table = document.querySelector(‘.matrix-table’); if (table) { table.style.opacity = ‘0’; table.style.transform = ‘translateY(20px)’; table.style.transition = ‘all 0.6s ease’; setTimeout(() => { table.style.opacity = ‘1’; table.style.transform = ‘translateY(0)’; }, 500); } }, 2000); });