Deploy from Lumerel

main.js

@@ -0,0 +1,120 @@
+/**
+ * Lumerel — 3D Homepage
+ * main.js
+ *
+ * Handles:
+ *  - Spline 3D scene loading & pointer-events toggle
+ *  - Navbar scroll behaviour
+ *  - Video fallback
+ *  - Utility helpers for future Spline integration
+ */
+
+/* ── Spline Integration Helper ───────────────────────────────
+ *
+ *  When you're ready to add a Spline scene:
+ *
+ *  1. Import the runtime:
+ *     import { Application } from '@splinetool/runtime';
+ *
+ *  2. Or use the <spline-viewer> web component already loaded
+ *     via the CDN script in index.html.
+ *
+ *  3. Replace the .hero__3d-placeholder div in index.html with:
+ *     <spline-viewer
+ *       url="https://prod.spline.design/YOUR_SCENE_ID/scene.splinecode"
+ *       events-target="global"
+ *     ></spline-viewer>
+ *
+ *  4. Call enableSplinePointerEvents() below to allow mouse
+ *     interaction with the 3D scene.
+ */
+
+const splineLayer = document.getElementById('spline-layer');
+
+/**
+ * Enable pointer events on the 3D layer so Spline scenes
+ * can receive mouse/touch input.
+ * Call this once your Spline scene is loaded.
+ */
+function enableSplinePointerEvents() {
+  if (splineLayer) {
+    splineLayer.style.pointerEvents = 'auto';
+  }
+}
+
+/**
+ * Disable pointer events on the 3D layer (default state).
+ * Keeps UI elements fully clickable.
+ */
+function disableSplinePointerEvents() {
+  if (splineLayer) {
+    splineLayer.style.pointerEvents = 'none';
+  }
+}
+
+// Listen for the spline-viewer ready event (web component)
+if (splineLayer) {
+  const viewer = splineLayer.querySelector('spline-viewer');
+  if (viewer) {
+    viewer.addEventListener('load', () => {
+      console.log('[Lumerel] Spline scene loaded.');
+      // Uncomment to enable 3D interactivity:
+      // enableSplinePointerEvents();
+    });
+  }
+}
+
+/* ── Navbar Scroll Effect ─────────────────────────────────── */
+const navbar = document.querySelector('.navbar');
+
+function handleNavbarScroll() {
+  if (!navbar) return;
+  if (window.scrollY > 20) {
+    navbar.style.backdropFilter = 'blur(12px)';
+    navbar.style.background = 'rgba(0,0,0,0.35)';
+    navbar.style.transition = 'background 0.3s ease, backdrop-filter 0.3s ease';
+  } else {
+    navbar.style.backdropFilter = 'none';
+    navbar.style.background = 'transparent';
+  }
+}
+
+window.addEventListener('scroll', handleNavbarScroll, { passive: true });
+handleNavbarScroll(); // run on load
+
+/* ── Video Fallback ───────────────────────────────────────── */
+const heroVideo = document.querySelector('.hero__video');
+
+if (heroVideo) {
+  heroVideo.addEventListener('error', () => {
+    console.warn('[Lumerel] Background video failed to load. Falling back to solid background.');
+    const videoWrap = document.querySelector('.hero__video-wrap');
+    if (videoWrap) {
+      videoWrap.style.background = 'linear-gradient(135deg, #0a0a0a 0%, #111 100%)';
+    }
+  });
+
+  // Ensure autoplay works after user interaction on iOS
+  document.addEventListener('touchstart', () => {
+    if (heroVideo.paused) {
+      heroVideo.play().catch(() => {});
+    }
+  }, { once: true });
+}
+
+/* ── Waitlist Button Handlers ─────────────────────────────── */
+const waitlistBtns = document.querySelectorAll('.btn-pill');
+
+waitlistBtns.forEach(btn => {
+  btn.addEventListener('click', () => {
+    // Replace with your actual waitlist modal / form logic
+    console.log('[Lumerel] Join Waitlist clicked.');
+    // Example: openWaitlistModal();
+  });
+});
+
+/* ── Expose helpers globally for console/debugging ─────────── */
+window.Lumerel = {
+  enableSplinePointerEvents,
+  disableSplinePointerEvents,
+};