/**
* Lumerel — 3D Homepage
* main.js
*
* Handles:
* - Spline 3D scene loading & pointer-events toggle
* - Navbar scroll backdrop blur
* - Background video autoplay fallback
* - Waitlist button hooks
*/
/* ── Spline / 3D Integration ──────────────────────────────────
*
* When your Spline scene is ready:
*
* 1. Open index.html and find .hero__3d-placeholder
* 2. Replace the entire div with:
*
*
*
* 3. If the scene needs mouse/touch interaction, call:
* window.Lumerel.enableSpline()
*
* The web component is already loaded via CDN
* in the of index.html.
*
──────────────────────────────────────────────────────────── */
const splineLayer = document.getElementById('spline-layer');
/** Enable pointer events on the 3D layer for interactive Spline scenes. */
function enableSpline() {
if (splineLayer) splineLayer.style.pointerEvents = 'auto';
}
/** Disable pointer events on the 3D layer (default — keeps UI clickable). */
function disableSpline() {
if (splineLayer) splineLayer.style.pointerEvents = 'none';
}
// Auto-log when a spline-viewer scene finishes loading
if (splineLayer) {
const viewer = splineLayer.querySelector('spline-viewer');
if (viewer) {
viewer.addEventListener('load', () => {
console.log('[Lumerel] Spline scene loaded successfully.');
// Uncomment to enable 3D mouse interaction:
// enableSpline();
});
}
}
/* ── Navbar Scroll Backdrop ───────────────────────────────── */
const navbar = document.querySelector('.navbar');
function updateNavbar() {
if (!navbar) return;
if (window.scrollY > 24) {
navbar.style.background = 'rgba(0, 0, 0, 0.40)';
navbar.style.backdropFilter = 'blur(14px)';
navbar.style.webkitBackdropFilter = 'blur(14px)';
navbar.style.transition = 'background 0.3s ease, backdrop-filter 0.3s ease';
} else {
navbar.style.background = 'transparent';
navbar.style.backdropFilter = 'none';
navbar.style.webkitBackdropFilter = 'none';
}
}
window.addEventListener('scroll', updateNavbar, { passive: true });
updateNavbar(); // run immediately on load
/* ── Background Video Fallback ────────────────────────────── */
const heroVideo = document.querySelector('.hero__video');
if (heroVideo) {
heroVideo.addEventListener('error', () => {
console.warn('[Lumerel] Background video failed. Falling back to gradient.');
const wrap = document.querySelector('.hero__video-wrap');
if (wrap) wrap.style.background = 'linear-gradient(135deg, #0a0a0a 0%, #111 100%)';
});
// iOS Safari sometimes needs a touch event to trigger autoplay
document.addEventListener('touchstart', () => {
if (heroVideo.paused) heroVideo.play().catch(() => {});
}, { once: true });
}
/* ── Waitlist Button Hooks ────────────────────────────────── */
document.querySelectorAll('.btn-pill').forEach(btn => {
btn.addEventListener('click', () => {
// TODO: Replace with your waitlist modal / form / redirect
console.log('[Lumerel] Join Waitlist clicked.');
// Example: openWaitlistModal();
// Example: window.location.href = '/waitlist';
});
});
/* ── Global API ───────────────────────────────────────────── */
window.Lumerel = {
enableSpline,
disableSpline,
};