<!DOCTYPE html>
<html lang="en" class="h-full bg-black">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CineLabs | Structural Intelligence</title>
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap" rel="stylesheet">
<style>
body { -webkit-user-select: none; user-select: none; cursor: crosshair; overflow: hidden; background: #000; }
.huge-font { font-family: 'Archivo Black', sans-serif; font-size: 26vw; line-height: 0.8; letter-spacing: -0.05em; }
::-webkit-scrollbar { display: none; }
.glass { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); }
</style>
</head>
<body x-data="{ mouseX: 0, mouseY: 0, showForm: false }"
@mousemove="mouseX = $event.clientX; mouseY = $event.clientY"
class="h-screen w-screen flex flex-col justify-between text-white p-12">
<main class="flex-grow flex items-center justify-center">
<h1 :style="`transform: rotateX(${(window.innerHeight/2 - mouseY)/60}deg) rotateY(${(mouseX - window.innerWidth/2)/60}deg)`"
class="huge-font uppercase text-center transition-transform duration-75 ease-out select-none">
Cine<br>Labs
</h1>
</main>
<footer class="w-full flex flex-col items-center z-50">
<div x-show="showForm" x-transition.duration.500ms class="w-full max-w-xl glass rounded-3xl p-2 mb-10 flex items-center">
<form action="https://formspree.io/f/xeelzvvy" method="POST" class="flex w-full">
<input type="email" name="email" required placeholder="PROFESSIONAL EMAIL"
class="flex-grow bg-transparent px-8 py-5 font-bold text-xl placeholder-zinc-800 focus:outline-none uppercase tracking-widest">
<button type="submit" class="bg-white text-black font-black px-10 py-5 rounded-2xl hover:invert transition-all active:scale-95 uppercase text-lg">
JOIN →
</button>
</form>
</div>
<button @click="showForm = !showForm" class="group flex flex-col items-center space-y-4">
<span class="text-[10px] font-black tracking-[0.6em] uppercase text-zinc-600 group-hover:text-white transition-all"
x-text="showForm ? 'CLOSE' : 'JOIN PRIVATE WAITLIST'"></span>
<div class="w-[1px] h-16 bg-gradient-to-b from-white to-transparent opacity-50"></div>
</button>
</footer>
<div class="fixed top-12 left-12 text-[10px] font-black tracking-[0.5em] opacity-30 uppercase">Structural Intelligence // v0.1</div>
<div class="fixed top-12 right-12 text-[10px] font-black tracking-[0.5em] opacity-30 uppercase">100% Offline Workflow</div>
</body>
</html>