<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>STARK EDITION | German Engineering Excellence</title>
    
    
    <script src="https://cdn.tailwindcss.com"></script>
    
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
    
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'german-gold': '#C5A059',
                        'german-red': '#8B2635',
                        'charcoal': '#0a0a0a',
                        'graphite': '#1a1a1a',
                        'pearl': '#f5f5f5'
                    },
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                        serif: ['Playfair Display', 'serif'],
                    },
                    backgroundImage: {
                        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
                    }
                }
            }
        }
    </script>
    
    
    <link rel="stylesheet" href="style.css">
</head>
<body class="antialiased selection:bg-german-gold selection:text-black">

<nav class="fixed w-full z-50 top-0 transition-all duration-500" id="navbar">
        <div class="max-w-7xl mx-auto px-6 py-6">
            <div class="flex justify-between items-center">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 border border-german-gold flex items-center justify-center">
                        <span class="text-german-gold font-serif font-bold text-xl">S</span>
                    </div>
                    <span class="font-serif text-xl tracking-widest font-medium text-white">STARK</span>
                </div>
                
                <div class="hidden md:flex items-center gap-8">
                    <a href="#engineering" class="text-sm uppercase tracking-widest hover:text-german-gold transition-colors">Engineering</a>
                    <a href="#performance" class="text-sm uppercase tracking-widest hover:text-german-gold transition-colors">Performance</a>
                    <a href="#design" class="text-sm uppercase tracking-widest hover:text-german-gold transition-colors">Design</a>
                </div>

<button class="magnetic-btn px-6 py-3 border border-german-gold text-german-gold text-sm uppercase tracking-widest hover:bg-german-gold hover:text-black transition-all duration-300">
                    Reserve Now
                </button>
            </div>
        </div>
    </nav>

<section class="relative min-h-screen flex items-center justify-center overflow-hidden">
        
        <div class="absolute inset-0 bg-gradient-to-b from-graphite to-charcoal"></div>
        <div class="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,_rgba(197,160,89,0.1),transparent_50%)]"></div>
        
        
        <div class="absolute inset-0 opacity-10" style="background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 100px 100px;"></div>

<div class="relative z-10 max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-12 items-center">
            <div class="space-y-8">
                <div class="overflow-hidden">
                    <p class="text-german-gold text-sm uppercase tracking-[0.3em] mb-4 reveal-text">Made in Germany</p>
                </div>
                
                <h1 class="font-serif text-6xl md:text-8xl leading-none font-medium">
                    <span class="block overflow-hidden"><span class="char-reveal">THE</span></span>
                    <span class="block overflow-hidden text-gradient italic"><span class="char-reveal">STARK</span></span>
                    <span class="block overflow-hidden"><span class="char-reveal">EDITION</span></span>
                </h1>

<p class="text-gray-400 text-lg max-w-md leading-relaxed reveal-text delay-500">
                    Precision engineering meets urban mobility. Experience the pinnacle of German craftsmanship with aerospace-grade materials and intelligent propulsion.
                </p>

<div class="flex gap-4 reveal-text delay-700">
                    <button class="group relative px-8 py-4 bg-german-gold text-black font-medium tracking-wider overflow-hidden">
                        <span class="relative z-10 group-hover:text-white transition-colors">CONFIGURE YOURS</span>
                        <div class="absolute inset-0 bg-white transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300"></div>
                    </button>
                    <button class="px-8 py-4 border border-white/20 hover:border-german-gold transition-colors text-sm tracking-widest">
                        WATCH FILM
                    </button>
                </div>

<div class="pt-8 flex gap-12 reveal-text delay-1000">
                    <div>
                        <p class="text-3xl font-serif text-german-gold">85</p>
                        <p class="text-xs text-gray-500 uppercase tracking-widest mt-1">Km Range</p>
                    </div>
                    <div>
                        <p class="text-3xl font-serif text-german-gold">65</p>
                        <p class="text-xs text-gray-500 uppercase tracking-widest mt-1">Km/h Top Speed</p>
                    </div>
                    <div>
                        <p class="text-3xl font-serif text-german-gold">2.1</p>
                        <p class="text-xs text-gray-500 uppercase tracking-widest mt-1">Sec 0-30</p>
                    </div>
                </div>
            </div>

<div class="relative h-[600px] flex items-center justify-center">
                
                <div class="absolute w-[500px] h-[500px] border border-white/5 rounded-full animate-[spin_20s_linear_infinite]"></div>
                <div class="absolute w-[400px] h-[400px] border border-german-gold/20 rounded-full animate-[spin_15s_linear_infinite_reverse]"></div>
                
                
                <div class="scooter-float relative z-10 w-full max-w-lg">
                    <div class="aspect-[4/3] bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl shadow-2xl border border-white/10 relative overflow-hidden group cursor-pointer">
                        <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1558981403-c5f9899a28bc?auto=format&fit=crop&q=80&w=1000')] bg-cover bg-center opacity-80 group-hover:scale-105 transition-transform duration-700"></div>
                        <div class="absolute inset-0 bg-gradient-to-t from-charcoal via-transparent to-transparent"></div>
                        
                        <div class="absolute bottom-6 left-6 right-6">
                            <div class="glass-panel p-4 rounded-lg">
                                <p class="text-xs text-german-gold uppercase tracking-widest mb-1">Limited Edition</p>
                                <p class="text-white font-serif text-xl">Carbon Black</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

<section id="engineering" class="py-32 relative bg-charcoal">
        <div class="max-w-7xl mx-auto px-6">
            <div class="grid md:grid-cols-12 gap-12">
                <div class="md:col-span-4 sticky top-32 h-fit">
                    <p class="text-german-gold text-sm uppercase tracking-[0.3em] mb-4">Precision Engineering</p>
                    <h2 class="font-serif text-4xl md:text-5xl leading-tight mb-6">
                        Forged in <span class="italic text-gray-500">Solingen</span>
                    </h2>
                    <p class="text-gray-400 leading-relaxed mb-8">
                        Every component is milled from aerospace-grade aluminum and carbon fiber. The monocoque chassis provides uncompromising rigidity while maintaining a total weight of just 14.8kg.
                    </p>
                    <div class="space-y-4">
                        <div class="flex justify-between items-center py-3 border-b border-white/10">
                            <span class="text-sm uppercase tracking-widest text-gray-500">Frame Material</span>
                            <span class="text-white">Carbon Fiber 3K</span>
                        </div>
                        <div class="flex justify-between items-center py-3 border-b border-white/10">
                            <span class="text-sm uppercase tracking-widest text-gray-500">Weight</span>
                            <span class="text-white">14.8 kg</span>
                        </div>
                        <div class="flex justify-between items-center py-3 border-b border-white/10">
                            <span class="text-sm uppercase tracking-widest text-gray-500">Max Load</span>
                            <span class="text-white">120 kg</span>
                        </div>
                    </div>
                </div>

<div class="md:col-span-8 space-y-8">
                    <div class="relative h-[500px] rounded-2xl overflow-hidden group">
                        <img src="https://images.unsplash.com/photo-1558980664-769d59546b3f?auto=format&fit=crop&q=80&w=1000" alt="Precision Engineering" class="w-full h-full object-cover opacity-60 group-hover:scale-105 transition-transform duration-700">
                        <div class="absolute inset-0 bg-gradient-to-r from-charcoal/80 to-transparent"></div>
                        <div class="absolute bottom-8 left-8 max-w-md">
                            <h3 class="font-serif text-2xl mb-2">Monocoque Chassis</h3>
                            <p class="text-gray-300 text-sm leading-relaxed">Single-piece construction eliminates weak points. Each frame undergoes 47 individual quality checks.</p>
                        </div>
                    </div>

<div class="grid grid-cols-2 gap-6">
                        <div class="glass-panel p-8 rounded-2xl hover:bg-white/5 transition-colors">
                            <div class="w-12 h-12 rounded-full bg-german-gold/10 flex items-center justify-center mb-4">
                                <svg class="w-6 h-6 text-german-gold" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                            </div>
                            <h4 class="font-serif text-xl mb-2">Dual Motor</h4>
                            <p class="text-gray-400 text-sm">Two independent 500W brushless motors provide intelligent torque vectoring.</p>
                        </div>
                        <div class="glass-panel p-8 rounded-2xl hover:bg-white/5 transition-colors">
                            <div class="w-12 h-12 rounded-full bg-german-gold/10 flex items-center justify-center mb-4">
                                <svg class="w-6 h-6 text-german-gold" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
                            </div>
                            <h4 class="font-serif text-xl mb-2">Fingerprint Lock</h4>
                            <p class="text-gray-400 text-sm">Biometric security integrated into the stem. Stores up to 5 fingerprints.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="performance" class="py-32 bg-graphite relative overflow-hidden">
        <div class="absolute inset-0 bg-[radial-gradient(circle_at_0%_0%,_rgba(197,160,89,0.1),transparent_50%)]"></div>
        
        <div class="max-w-7xl mx-auto px-6 relative z-10">
            <div class="text-center mb-20">
                <p class="text-german-gold text-sm uppercase tracking-[0.3em] mb-4">Performance Metrics</p>
                <h2 class="font-serif text-5xl md:text-6xl">Uncompromising <span class="italic text-gray-500">Power</span></h2>
            </div>

<div class="grid md:grid-cols-3 gap-8">
                <div class="glass-panel p-10 rounded-2xl text-center group hover:border-german-gold/50 transition-all duration-500">
                    <div class="relative w-48 h-48 mx-auto mb-6">
                        <svg class="w-full h-full transform -rotate-90" viewBox="0 0 100 100">
                            <circle cx="50" cy="50" r="45" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2"></circle>
                            <circle cx="50" cy="50" r="45" fill="none" stroke="#C5A059" stroke-width="2" stroke-dasharray="283" stroke-dashoffset="283" class="progress-ring" data-percent="85"></circle>
                        </svg>
                        <div class="absolute inset-0 flex items-center justify-center">
                            <span class="text-4xl font-serif counter" data-target="85">0</span>
                            <span class="text-german-gold text-xl">%</span>
                        </div>
                    </div>
                    <h3 class="font-serif text-2xl mb-2">Energy Efficiency</h3>
                    <p class="text-gray-400 text-sm">Regenerative braking recaptures up to 85% of kinetic energy.</p>
                </div>

<div class="glass-panel p-10 rounded-2xl text-center group hover:border-german-gold/50 transition-all duration-500">
                    <div class="relative w-48 h-48 mx-auto mb-6">
                        <svg class="w-full h-full transform -rotate-90" viewBox="0 0 100 100">
                            <circle cx="50" cy="50" r="45" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2"></circle>
                            <circle cx="50" cy="50" r="45" fill="none" stroke="#C5A059" stroke-width="2" stroke-dasharray="283" stroke-dashoffset="283" class="progress-ring" data-percent="100"></circle>
                        </svg>
                        <div class="absolute inset-0 flex items-center justify-center">
                            <span class="text-4xl font-serif counter" data-target="1000">0</span>
                            <span class="text-german-gold text-sm ml-1">W</span>
                        </div>
                    </div>
                    <h3 class="font-serif text-2xl mb-2">Peak Output</h3>
                    <p class="text-gray-400 text-sm">Dual 500W motors deliver 1000W peak power for steep inclines.</p>
                </div>

<div class="glass-panel p-10 rounded-2xl text-center group hover:border-german-gold/50 transition-all duration-500">
                    <div class="relative w-48 h-48 mx-auto mb-6">
                        <svg class="w-full h-full transform -rotate-90" viewBox="0 0 100 100">
                            <circle cx="50" cy="50" r="45" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2"></circle>
                            <circle cx="50" cy="50" r="45" fill="none" stroke="#C5A059" stroke-width="2" stroke-dasharray="283" stroke-dashoffset="283" class="progress-ring" data-percent="4"></circle>
                        </svg>
                        <div class="absolute inset-0 flex items-center justify-center">
                            <span class="text-4xl font-serif counter" data-target="4">0</span>
                            <span class="text-german-gold text-xl">h</span>
                        </div>
                    </div>
                    <h3 class="font-serif text-2xl mb-2">Charge Time</h3>
                    <p class="text-gray-400 text-sm">Fast-charge capable. 0-80% in just 3 hours.</p>
                </div>
            </div>
        </div>
    </section>

<section id="design" class="py-32 relative">
        <div class="max-w-7xl mx-auto px-6">
            <div class="grid md:grid-cols-2 gap-16 items-center">
                <div class="space-y-8">
                    <div class="space-y-6">
                        <p class="text-german-gold text-sm uppercase tracking-[0.3em]">Form Follows Function</p>
                        <h2 class="font-serif text-5xl leading-tight">Bauhaus <span class="italic text-gray-500">Inspired</span></h2>
                    </div>
                    
                    <div class="space-y-6 text-gray-300 leading-relaxed">
                        <p>Every curve serves a purpose. The aerodynamic silhouette reduces drag by 18% compared to conventional designs, while the integrated LED lighting system provides 360-degree visibility.</p>
                        <p>The deck features German-made grip tape with micro-abrasion technology, ensuring stability in wet conditions.</p>
                    </div>

<div class="grid grid-cols-2 gap-6 pt-6">
                        <div class="border-l-2 border-german-gold pl-4">
                            <p class="text-2xl font-serif mb-1">IP67</p>
                            <p class="text-xs text-gray-500 uppercase tracking-widest">Water Resistance</p>
                        </div>
                        <div class="border-l-2 border-german-gold pl-4">
                            <p class="text-2xl font-serif mb-1">LED</p>
                            <p class="text-xs text-gray-500 uppercase tracking-widest">Ambient Lighting</p>
                        </div>
                    </div>
                </div>

<div class="relative">
                    <div class="aspect-square rounded-full bg-gradient-to-br from-gray-800 to-black border border-white/10 p-8 relative overflow-hidden">
                        <div class="absolute inset-0 bg-[conic-gradient(from_0deg,transparent_0deg,rgba(197,160,89,0.1)_60deg,transparent_120deg)] animate-[spin_10s_linear_infinite]"></div>
                        <div class="w-full h-full rounded-full bg-charcoal flex items-center justify-center relative z-10">
                            <div class="text-center">
                                <div class="w-24 h-24 mx-auto mb-4 rounded-full bg-german-gold/10 flex items-center justify-center">
                                    <svg class="w-10 h-10 text-german-gold" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path></svg>
                                </div>
                                <p class="font-serif text-2xl mb-2">Smart Connect</p>
                                <p class="text-sm text-gray-400">iOS & Android Compatible</p>
                            </div>
                        </div>
                    </div>
                    
                    
                    <div class="absolute -top-4 -right-4 glass-panel px-4 py-3 rounded-lg animate-bounce" style="animation-duration: 3s;">
                        <p class="text-xs text-german-gold uppercase tracking-widest">App Control</p>
                    </div>
                    <div class="absolute -bottom-4 -left-4 glass-panel px-4 py-3 rounded-lg animate-bounce" style="animation-duration: 4s;">
                        <p class="text-xs text-german-gold uppercase tracking-widest">GPS Tracking</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="py-32 relative overflow-hidden">
        <div class="absolute inset-0 bg-german-gold"></div>
        <div class="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,_rgba(0,0,0,0.2),transparent_70%)]"></div>
        
        <div class="max-w-4xl mx-auto px-6 relative z-10 text-center">
            <h2 class="font-serif text-5xl md:text-7xl text-black mb-6 leading-tight">Reserve Your <br><span class="italic">Stark Edition</span></h2>
            <p class="text-black/80 text-lg mb-10 max-w-2xl mx-auto">Limited to 500 units worldwide. Each scooter is individually numbered and includes a certificate of authenticity.</p>
            
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <button class="px-10 py-5 bg-black text-white font-medium tracking-widest hover:bg-gray-900 transition-colors">
                    PRE-ORDER €2,499
                </button>
                <button class="px-10 py-5 border-2 border-black text-black font-medium tracking-widest hover:bg-black hover:text-white transition-colors">
                    SCHEDULE TEST RIDE
                </button>
            </div>
            
            <p class="mt-8 text-black/60 text-sm">Free shipping within EU. 5-year warranty included.</p>
        </div>
    </section>

<footer class="bg-charcoal border-t border-white/10 py-20">
        <div class="max-w-7xl mx-auto px-6">
            <div class="grid md:grid-cols-4 gap-12 mb-12">
                <div class="col-span-2">
                    <div class="flex items-center gap-3 mb-6">
                        <div class="w-8 h-8 border border-german-gold flex items-center justify-center">
                            <span class="text-german-gold font-serif font-bold">S</span>
                        </div>
                        <span class="font-serif text-lg tracking-widest">STARK MOBILITY</span>
                    </div>
                    <p class="text-gray-500 text-sm leading-relaxed max-w-sm">
                        Engineering the future of urban transportation from our headquarters in Munich, Germany. Precision, performance, perfection.
                    </p>
                </div>
                
                <div>
                    <h4 class="text-white font-medium mb-4 uppercase tracking-widest text-xs">Product</h4>
                    <ul class="space-y-2 text-gray-500 text-sm">
                        <li><a href="#" class="hover:text-german-gold transition-colors">Specifications</a></li>
                        <li><a href="#" class="hover:text-german-gold transition-colors">Accessories</a></li>
                        <li><a href="#" class="hover:text-german-gold transition-colors">Compare Models</a></li>
                        <li><a href="#" class="hover:text-german-gold transition-colors">Manuals</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-white font-medium mb-4 uppercase tracking-widest text-xs">Company</h4>
                    <ul class="space-y-2 text-gray-500 text-sm">
                        <li><a href="#" class="hover:text-german-gold transition-colors">About Us</a></li>
                        <li><a href="#" class="hover:text-german-gold transition-colors">Careers</a></li>
                        <li><a href="#" class="hover:text-german-gold transition-colors">Press</a></li>
                        <li><a href="#" class="hover:text-german-gold transition-colors">Contact</a></li>
                    </ul>
                </div>
            </div>
            
            <div class="pt-8 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-4">
                <p class="text-gray-600 text-xs">© 2024 Stark Mobility GmbH. All rights reserved.</p>
                <div class="flex gap-6">
                    <a href="#" class="text-gray-600 hover:text-german-gold transition-colors text-xs uppercase tracking-widest">Privacy</a>
                    <a href="#" class="text-gray-600 hover:text-german-gold transition-colors text-xs uppercase tracking-widest">Terms</a>
                    <a href="#" class="text-gray-600 hover:text-german-gold transition-colors text-xs uppercase tracking-widest">Imprint</a>
                </div>
            </div>
        </div>
    </footer>

body {
    background-color: #0a0a0a;
    color: #f5f5f5;
    overflow-x: hidden;
}

.text-gradient {
    background: linear-gradient(135deg, #fff 0%, #C5A059 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.glass-panel {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.magnetic-btn {
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.scooter-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(1deg); }
}

.spec-line {
    width: 0;
    transition: width 1.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.spec-line.active {
    width: 100%;
}

.reveal-text {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.char {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%);
}

.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.cursor-glow {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(197, 160, 89, 0.15) 0%, rgba(0,0,0,0) 70%);
    position: fixed;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s;
}

.hidden-init {
    opacity: 0;
    transform: translateY(30px);
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Selection styling */
::selection {
    background: #C5A059;
    color: #000;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0a0a0a;
}

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #C5A059;
}

// Register GSAP plugins
gsap.registerPlugin(ScrollTrigger);

// Custom cursor
const cursorGlow = document.getElementById('cursorGlow');
if (cursorGlow) {
    document.addEventListener('mousemove', (e) => {
        cursorGlow.style.left = e.clientX + 'px';
        cursorGlow.style.top = e.clientY + 'px';
    });
}

// Navbar scroll effect
const navbar = document.getElementById('navbar');
if (navbar) {
    window.addEventListener('scroll', () => {
        if (window.scrollY > 50) {
            navbar.classList.add('bg-charcoal/90', 'backdrop-blur-md', 'border-b', 'border-white/10');
        } else {
            navbar.classList.remove('bg-charcoal/90', 'backdrop-blur-md', 'border-b', 'border-white/10');
        }
    });
}

// Hero text reveal animation
document.addEventListener('DOMContentLoaded', () => {
    gsap.to('.char-reveal', {
        y: 0,
        opacity: 1,
        duration: 1.2,
        stagger: 0.1,
        ease: "power4.out",
        delay: 0.2
    });

// Scroll triggered animations for glass panels
    gsap.utils.toArray('.glass-panel').forEach((panel, i) => {
        gsap.from(panel, {
            scrollTrigger: {
                trigger: panel,
                start: "top 85%",
                toggleActions: "play none none reverse"
            },
            y: 50,
            opacity: 0,
            duration: 0.8,
            delay: i * 0.1,
            ease: "power3.out"
        });
    });

// Counter animation
    const counters = document.querySelectorAll('.counter');
    counters.forEach(counter => {
        const target = parseInt(counter.getAttribute('data-target'));
        
        ScrollTrigger.create({
            trigger: counter,
            start: "top 85%",
            onEnter: () => {
                gsap.to(counter, {
                    innerHTML: target,
                    duration: 2,
                    snap: { innerHTML: 1 },
                    ease: "power2.out"
                });
            }
        });
    });

// Progress rings
    const rings = document.querySelectorAll('.progress-ring');
    rings.forEach(ring => {
        const percent = parseInt(ring.getAttribute('data-percent'));
        const circumference = 2 * Math.PI * 45;
        const offset = circumference - (percent / 100) * circumference;
        
        ScrollTrigger.create({
            trigger: ring,
            start: "top 85%",
            onEnter: () => {
                gsap.to(ring, {
                    strokeDashoffset: offset,
                    duration: 2,
                    ease: "power3.out"
                });
            }
        });
    });

// Magnetic button effect
    const magneticBtns = document.querySelectorAll('.magnetic-btn');
    magneticBtns.forEach(btn => {
        btn.addEventListener('mousemove', (e) => {
            const rect = btn.getBoundingClientRect();
            const x = e.clientX - rect.left - rect.width / 2;
            const y = e.clientY - rect.top - rect.height / 2;
            
            btn.style.transform = `translate(${x * 0.2}px, ${y * 0.2}px)`;
        });
        
        btn.addEventListener('mouseleave', () => {
            btn.style.transform = 'translate(0, 0)';
        });
    });

// Parallax effect for hero image
    gsap.to(".scooter-float", {
        scrollTrigger: {
            trigger: "body",
            start: "top top",
            end: "bottom top",
            scrub: 1
        },
        y: 100,
        rotation: 2
    });
});

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground