first commit

js/main.js

@@ -0,0 +1,101 @@
+// Handle video playback error
+const iframe = document.getElementById('ytplayer');
+iframe.onerror = () => {
+    iframe.style.display = 'none';
+    document.querySelector('.hero-bg img').style.display = 'block';
+};
+
+// Ensure page loads at the top
+window.addEventListener('load', () => {
+    window.scrollTo(0, 0);
+});
+
+// Scroll animations for sections
+const sections = document.querySelectorAll('.section-bg');
+const observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry, index) => {
+        if (entry.isIntersecting) {
+            entry.target.style.transform = 'translateY(0)';
+            entry.target.style.opacity = '1';
+            entry.target.style.transitionDelay = `${index * 0.1}s`;
+        }
+    });
+}, { threshold: 0.1 });
+
+sections.forEach(section => {
+    section.style.transform = 'translateY(30px)';
+    section.style.opacity = '0';
+    section.style.transition = 'transform 0.7s ease-out, opacity 0.7s ease-out';
+    observer.observe(section);
+});
+
+// Dynamic particle spawning
+function createParticle() {
+    const particle = document.createElement('div');
+    particle.classList.add('particle');
+    if (Math.random() > 0.6) particle.classList.add('large');
+    particle.style.left = `${Math.random() * 100}%`;
+    particle.style.top = `${Math.random() * 100}%`;
+    particle.style.animationDelay = `${Math.random() * 10}s`;
+    particle.style.animationDuration = `${10 + Math.random() * 8}s`;
+    document.body.appendChild(particle);
+    setTimeout(() => particle.remove(), 18000);
+}
+
+setInterval(createParticle, 500);
+
+// Throttle function to limit scroll event frequency
+function throttle(fn, wait) {
+    let lastTime = 0;
+    return function (...args) {
+        const now = Date.now();
+        if (now - lastTime >= wait) {
+            fn.apply(this, args);
+            lastTime = now;
+        }
+    };
+}
+
+// Parallax effect for fallback image only
+const hero = document.querySelector('.hero-bg');
+const heroImg = hero.querySelector('img');
+window.addEventListener(
+    'scroll',
+    throttle(() => {
+        const scrollPosition = window.pageYOffset;
+        // Apply parallax only to fallback image if iframe is hidden
+        if (heroImg.style.display === 'block') {
+            heroImg.style.transform = `translate(-50%, calc(-50% + ${scrollPosition * 0.3}px)) scale(1.2)`;
+        }
+    }, 16) // ~60fps
+);
+
+// Tilt effect for feature cards
+const tiltCards = document.querySelectorAll('.tilt-card');
+tiltCards.forEach(card => {
+    card.addEventListener('mousemove', (e) => {
+        const rect = card.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        const centerX = rect.width / 2;
+        const centerY = rect.height / 2;
+        const tiltX = (y - centerY) / 12;
+        const tiltY = (centerX - x) / 12;
+        card.style.transform = `perspective(1200px) rotateX(${tiltX}deg) rotateY(${tiltY}deg)`;
+    });
+    card.addEventListener('mouseleave', () => {
+        card.style.transform = 'perspective(1200px) rotateX(0) rotateY(0)';
+    });
+});
+
+// Cursor glow effect for buttons
+const buttons = document.querySelectorAll('.btn-minecraft');
+buttons.forEach(button => {
+    button.addEventListener('mousemove', (e) => {
+        const rect = button.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        button.style.setProperty('--x', `${x}px`);
+        button.style.setProperty('--y', `${y}px`);
+    });
+});