// Enhanced Animation sequence controller with advanced audio
        class IntroAnimation {
            constructor() {
                this.introElement = document.getElementById('introAnimation');
                this.mainContent = document.getElementById('mainContent');
                this.animationComplete = false;
                
                // Audio context for advanced sound synthesis
                this.audioContext = null;
                this.masterVolume = null;
                
                this.init();
            }

            init() {
                // Initialize audio system
                this.initAudioSystem();
                
                // Create enhanced visual effects
                this.createParticleSystem();
                this.createDigitalRain();
                
                // Start the animation sequence
                this.startAnimationSequence();
                
                // Auto-hide intro after 8 seconds
                setTimeout(() => {
                    if (!this.animationComplete) {
                        this.completeIntro();
                    }
                }, 8000);
            }

            initAudioSystem() {
                try {
                    this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
                    this.masterVolume = this.audioContext.createGain();
                    this.masterVolume.connect(this.audioContext.destination);
                    this.masterVolume.gain.value = 0.3; // Master volume at 30%
                } catch (e) {
                    console.log('Audio context initialization failed:', e);
                }
            }

            startAnimationSequence() {
                // Add particle burst at 2 seconds
                setTimeout(() => {
                    this.triggerParticleBurst();
                }, 2000);

                // Add howling class and screen shake at 3 seconds
                setTimeout(() => {
                    const mascot = document.querySelector('.doberman-mascot');
                    if (mascot) mascot.classList.add('howling');
                    
                    // Screen shake effect
                    this.introElement.classList.add('shaking');
                    setTimeout(() => {
                        this.introElement.classList.remove('shaking');
                    }, 500);
                }, 3000);

                // Play epic howl sound at 3.5 seconds
                setTimeout(() => {
                    this.playEpicHowl();
                }, 3500);

                // Play dramatic wave crash at 4 seconds
                setTimeout(() => {
                    this.playEpicWaveCrash();
                }, 4000);

                // Add impact sound at 4.2 seconds
                setTimeout(() => {
                    this.playImpactSound();
                }, 4200);

                // Mark animation as complete after 7 seconds
                setTimeout(() => {
                    this.animationComplete = true;
                    this.completeIntro();
                }, 7000);
            }

            createParticleSystem() {
                const particleSystem = document.getElementById('particleSystem');
                if (!particleSystem) return;

                // Create initial particles
                for (let i = 0; i < 15; i++) {
                    setTimeout(() => {
                        this.createParticle(particleSystem);
                    }, i * 100);
                }
            }

            createParticle(container) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                
                const x = Math.random() * 100;
                const y = Math.random() * 100;
                const delay = Math.random() * 1000;
                
                particle.style.left = `${x}%`;
                particle.style.top = `${y}%`;
                particle.style.animationDelay = `${delay}ms`;
                
                container.appendChild(particle);
                
                // Remove particle after animation
                setTimeout(() => {
                    if (container.contains(particle)) {
                        container.removeChild(particle);
                    }
                }, 2000 + delay);
            }

            triggerParticleBurst() {
                const particleSystem = document.getElementById('particleSystem');
                if (!particleSystem) return;

                // Create burst of particles
                for (let i = 0; i < 25; i++) {
                    setTimeout(() => {
                        this.createParticle(particleSystem);
                    }, i * 50);
                }
            }

            createDigitalRain() {
                const digitalRain = document.getElementById('digitalRain');
                if (!digitalRain) return;

                const characters = '01セスター';
                
                for (let i = 0; i < 20; i++) {
                    const drop = document.createElement('div');
                    drop.className = 'rain-drop';
                    drop.textContent = characters[Math.floor(Math.random() * characters.length)];
                    drop.style.left = `${Math.random() * 100}%`;
                    drop.style.animationDelay = `${Math.random() * 3}s`;
                    drop.style.animationDuration = `${2 + Math.random() * 2}s`;
                    
                    digitalRain.appendChild(drop);
                }
            }

            playEpicHowl() {
                if (!this.audioContext) {
                    console.log('Audio context not available');
                    return;
                }

                try {
                    // Create complex howl sound using multiple oscillators
                    const duration = 2.5;
                    const startTime = this.audioContext.currentTime;
                    
                    // Main howl oscillator (low frequency)
                    const howlOsc = this.audioContext.createOscillator();
                    const howlGain = this.audioContext.createGain();
                    const howlFilter = this.audioContext.createBiquadFilter();
                    
                    howlOsc.connect(howlFilter);
                    howlFilter.connect(howlGain);
                    howlGain.connect(this.masterVolume);
                    
                    howlOsc.type = 'sawtooth';
                    howlOsc.frequency.setValueAtTime(200, startTime);
                    howlOsc.frequency.exponentialRampToValueAtTime(100, startTime + duration);
                    
                    howlFilter.type = 'lowpass';
                    howlFilter.frequency.setValueAtTime(800, startTime);
                    howlFilter.frequency.exponentialRampToValueAtTime(300, startTime + duration);
                    
                    howlGain.gain.setValueAtTime(0, startTime);
                    howlGain.gain.linearRampToValueAtTime(0.4, startTime + 0.1);
                    howlGain.gain.exponentialRampToValueAtTime(0.01, startTime + duration);
                    
                    // Harmonic oscillator (higher frequency)
                    const harmonicOsc = this.audioContext.createOscillator();
                    const harmonicGain = this.audioContext.createGain();
                    
                    harmonicOsc.connect(harmonicGain);
                    harmonicGain.connect(this.masterVolume);
                    
                    harmonicOsc.type = 'sine';
                    harmonicOsc.frequency.setValueAtTime(400, startTime);
                    harmonicOsc.frequency.exponentialRampToValueAtTime(200, startTime + duration);
                    
                    harmonicGain.gain.setValueAtTime(0, startTime);
                    harmonicGain.gain.linearRampToValueAtTime(0.2, startTime + 0.2);
                    harmonicGain.gain.exponentialRampToValueAtTime(0.01, startTime + duration);
                    
                    // Start and stop oscillators
                    howlOsc.start(startTime);
                    howlOsc.stop(startTime + duration);
                    harmonicOsc.start(startTime);
                    harmonicOsc.stop(startTime + duration);
                    
                    console.log('🐺 Epic howl sound playing!');
                    
                } catch (e) {
                    console.log('Howl sound generation failed:', e);
                }
            }

            playEpicWaveCrash() {
                if (!this.audioContext) return;

                try {
                    // Create dramatic wave crash using noise and filters
                    const duration = 3;
                    const startTime = this.audioContext.currentTime;
                    
                    // White noise for crash
                    const bufferSize = this.audioContext.sampleRate * duration;
                    const buffer = this.audioContext.createBuffer(1, bufferSize, this.audioContext.sampleRate);
                    const output = buffer.getChannelData(0);
                    
                    // Generate white noise
                    for (let i = 0; i < bufferSize; i++) {
                        output[i] = Math.random() * 2 - 1;
                    }
                    
                    const noise = this.audioContext.createBufferSource();
                    const noiseGain = this.audioContext.createGain();
                    const noiseFilter = this.audioContext.createBiquadFilter();
                    
                    noise.buffer = buffer;
                    noise.connect(noiseFilter);
                    noiseFilter.connect(noiseGain);
                    noiseGain.connect(this.masterVolume);
                    
                    noiseFilter.type = 'highpass';
                    noiseFilter.frequency.setValueAtTime(1000, startTime);
                    noiseFilter.frequency.exponentialRampToValueAtTime(100, startTime + duration);
                    
                    noiseGain.gain.setValueAtTime(0.6, startTime);
                    noiseGain.gain.exponentialRampToValueAtTime(0.01, startTime + duration);
                    
                    // Low rumble
                    const rumbleOsc = this.audioContext.createOscillator();
                    const rumbleGain = this.audioContext.createGain();
                    
                    rumbleOsc.connect(rumbleGain);
                    rumbleGain.connect(this.masterVolume);
                    
                    rumbleOsc.type = 'sine';
                    rumbleOsc.frequency.setValueAtTime(50, startTime);
                    
                    rumbleGain.gain.setValueAtTime(0.3, startTime);
                    rumbleGain.gain.exponentialRampToValueAtTime(0.01, startTime + duration);
                    
                    // Start sounds
                    noise.start(startTime);
                    rumbleOsc.start(startTime);
                    rumbleOsc.stop(startTime + duration);
                    
                    console.log('🌊 Epic wave crash sound playing!');
                    
                } catch (e) {
                    console.log('Wave crash sound generation failed:', e);
                }
            }

            playImpactSound() {
                if (!this.audioContext) return;

                try {
                    // Quick impact sound
                    const duration = 0.3;
                    const startTime = this.audioContext.currentTime;
                    
                    const impactOsc = this.audioContext.createOscillator();
                    const impactGain = this.audioContext.createGain();
                    
                    impactOsc.connect(impactGain);
                    impactGain.connect(this.masterVolume);
                    
                    impactOsc.type = 'triangle';
                    impactOsc.frequency.setValueAtTime(80, startTime);
                    impactOsc.frequency.exponentialRampToValueAtTime(20, startTime + duration);
                    
                    impactGain.gain.setValueAtTime(0.5, startTime);
                    impactGain.gain.exponentialRampToValueAtTime(0.01, startTime + duration);
                    
                    impactOsc.start(startTime);
                    impactOsc.stop(startTime + duration);
                    
                    console.log('💥 Impact sound playing!');
                    
                } catch (e) {
                    console.log('Impact sound generation failed:', e);
                }
            }

            completeIntro() {
                this.introElement.classList.add('hidden');
                this.mainContent.classList.add('visible');
                
                // Clean up audio context
                if (this.audioContext) {
                    setTimeout(() => {
                        this.audioContext.close();
                    }, 1000);
                }
                
                // Remove intro element after transition
                setTimeout(() => {
                    this.introElement.style.display = 'none';
                }, 1000);

                // Initialize main website functionality
                this.initMainWebsite();
            }

            initMainWebsite() {
                // Initialize the main website scripts
                console.log('🚀 SE-STAR Platform Loaded');
                
                // Add any additional initialization here
                this.initScanner();
                this.initMainParticles();
            }

            initScanner() {
                const scanButton = document.querySelector('.btn-scan');
                const scannerInput = document.querySelector('.scanner-input');
                
                if (scanButton && scannerInput) {
                    scanButton.addEventListener('click', () => {
                        const address = scannerInput.value.trim();
                        if (address) {
                            this.performScan(address);
                        }
                    });
                }
            }

            performScan(address) {
                console.log('🔍 Scanning address:', address);
                // Add your scanning logic here
            }

            initMainParticles() {
                // Add floating particles animation for main site
                this.createMainParticles();
            }

            createMainParticles() {
                const particleContainer = document.querySelector('.floating-particles');
                if (!particleContainer) return;
                
                for (let i = 0; i < 30; i++) {
                    const particle = document.createElement('div');
                    particle.style.cssText = `
                        position: absolute;
                        width: 2px;
                        height: 2px;
                        background: #00ffff;
                        border-radius: 50%;
                        top: ${Math.random() * 100}%;
                        left: ${Math.random() * 100}%;
                        animation: float ${5 + Math.random() * 10}s ease-in-out infinite;
                        opacity: ${0.3 + Math.random() * 0.7};
                        box-shadow: 0 0 6px #00ffff;
                    `;
                    particleContainer.appendChild(particle);
                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SE-STAR - Crypto's First Wave of Truth</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        /* Animation Styles */
        .intro-animation {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #0a0f1c 0%, #050a15 100%);
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .intro-animation.hidden {
            opacity: 0;
            pointer-events: none;
            transition: opacity 1s ease-out;
        }

        /* Doberman Mascot Image - Updated for your custom image */
        .doberman-mascot(alt="doberman-business.png") {
            position: relative;
            transform: translateX(-100vw);
            animation: dobermanEnter 3s ease-out forwards;
            filter: drop-shadow(0 0 30px rgba(0, 255, 255, 0.4));
        }

        .doberman-image {
            width: 400px;
            height: auto;
            max-height: 500px;
            object-fit: contain;
            border-radius: 15px;
            animation: dobermanBreathe 4s ease-in-out infinite;
            /* Enhanced glow effect for your image */
            filter: brightness(1.1) contrast(1.1);
        }

        @keyframes dobermanEnter {
            0% {
                transform: translateX(-100vw) scale(0.6);
                opacity: 0;
                filter: drop-shadow(0 0 30px rgba(0, 255, 255, 0)) blur(8px) brightness(0.5);
            }
            30% {
                transform: translateX(-50px) scale(0.8);
                opacity: 0.7;
                filter: drop-shadow(0 0 30px rgba(0, 255, 255, 0.2)) blur(4px) brightness(0.8);
            }
            60% {
                transform: translateX(0) scale(1);
                opacity: 1;
                filter: drop-shadow(0 0 40px rgba(0, 255, 255, 0.4)) blur(0px) brightness(1.1);
            }
            80% {
                transform: translateX(0) scale(1.03);
                filter: drop-shadow(0 0 50px rgba(0, 255, 255, 0.6)) blur(0px) brightness(1.2);
            }
            100% {
                transform: translateX(0) scale(1);
                opacity: 1;
                filter: drop-shadow(0 0 40px rgba(0, 255, 255, 0.4)) blur(0px) brightness(1.1);
            }
        }

        @keyframes dobermanBreathe {
            0%, 100% { 
                transform: scale(1);
                filter: brightness(1.1) contrast(1.1);
            }
            50% { 
                transform: scale(1.015);
                filter: brightness(1.15) contrast(1.15);
            }
        }

        /* Enhanced eyes effect for your specific image */
        .doberman-eyes-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            opacity: 0;
            animation: eyesGlowActivate 1.5s ease-in-out 2.5s forwards;
        }

        @keyframes eyesGlowActivate {
            0% { opacity: 0; }
            100% { opacity: 1; }
        }

        .eye-glow {
            position: absolute;
            width: 15px;
            height: 15px;
            background: radial-gradient(circle, #00ffff 0%, rgba(0, 255, 255, 0.9) 30%, rgba(0, 255, 255, 0.4) 60%, transparent 80%);
            border-radius: 50%;
            box-shadow: 
                0 0 25px rgba(0, 255, 255, 0.8),
                0 0 40px rgba(0, 255, 255, 0.4),
                inset 0 0 10px rgba(255, 255, 255, 0.3);
            animation: eyePulse 3s ease-in-out infinite;
        }

        /* Adjusted positions for your Doberman image */
        .eye-glow.left {
            top: 32%;
            left: 42%;
        }

        .eye-glow.right {
            top: 32%;
            right: 42%;
        }

        @keyframes eyePulse {
            0%, 100% { 
                box-shadow: 
                    0 0 25px rgba(0, 255, 255, 0.8),
                    0 0 40px rgba(0, 255, 255, 0.4),
                    inset 0 0 10px rgba(255, 255, 255, 0.3);
                transform: scale(1);
            }
            50% { 
                box-shadow: 
                    0 0 35px rgba(0, 255, 255, 1),
                    0 0 60px rgba(0, 255, 255, 0.6),
                    0 0 80px rgba(0, 255, 255, 0.3),
                    inset 0 0 15px rgba(255, 255, 255, 0.5);
                transform: scale(1.2);
            }
        }

        /* Enhanced cyber scanning effect */
        .doberman-mascot::before {
            content: 'doberman-business.png';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(
                90deg,
                transparent 0%,
                transparent 30%,
                rgba(0, 255, 255, 0.15) 45%,
                rgba(0, 255, 255, 0.25) 50%,
                rgba(0, 255, 255, 0.15) 55%,
                transparent 70%,
                transparent 100%
            );
            border-radius: 15px;
            animation: cyberScan 4s ease-in-out infinite;
            pointer-events: none;
            z-index: 1;
        }

        @keyframes cyberScan {
            0%, 100% { 
                transform: translateX(-120%); 
                opacity: 0; 
            }
            25% { 
                opacity: 1; 
            }
            75% { 
                opacity: 1; 
            }
            50% { 
                transform: translateX(120%); 
                opacity: 1; 
            }
        }

        /* Enhanced Visual Effects */
        
        /* Particle system for magical entrance */
        .particle-system {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
        }

        .particle {
            position: absolute;
            width: 3px;
            height: 3px;
            background: #00ffff;
            border-radius: 50%;
            opacity: 0;
            animation: particleFloat 2s ease-out forwards;
        }

        @keyframes particleFloat {
            0% {
                opacity: 0;
                transform: scale(0) translateY(0);
            }
            50% {
                opacity: 1;
                transform: scale(1) translateY(-50px);
            }
            100% {
                opacity: 0;
                transform: scale(0.5) translateY(-100px);
            }
        }

        /* Energy field around mascot */
        .energy-field {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 120%;
            height: 120%;
            transform: translate(-50%, -50%);
            border: 2px solid transparent;
            border-radius: 20px;
            background: linear-gradient(45deg, 
                rgba(0, 255, 255, 0.1), 
                rgba(0, 255, 255, 0.05), 
                rgba(0, 255, 255, 0.15), 
                rgba(0, 255, 255, 0.05)
            );
            opacity: 0;
            animation: energyFieldActivate 2s ease-in-out 2s forwards, energyPulse 4s ease-in-out 4s infinite;
        }

        @keyframes energyFieldActivate {
            0% { 
                opacity: 0; 
                transform: translate(-50%, -50%) scale(0.5); 
            }
            100% { 
                opacity: 1; 
                transform: translate(-50%, -50%) scale(1); 
            }
        }

        @keyframes energyPulse {
            0%, 100% { 
                box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
            }
            50% { 
                box-shadow: 0 0 40px rgba(0, 255, 255, 0.4);
            }
        }

        /* Holographic overlay effect */
        .hologram-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                180deg,
                transparent 0%,
                rgba(0, 255, 255, 0.03) 25%,
                transparent 26%,
                rgba(0, 255, 255, 0.03) 27%,
                transparent 28%,
                rgba(0, 255, 255, 0.03) 50%,
                transparent 51%,
                rgba(0, 255, 255, 0.03) 75%,
                transparent 76%,
                rgba(0, 255, 255, 0.03) 77%,
                transparent 100%
            );
            animation: hologramFlicker 0.1s ease-in-out infinite;
            pointer-events: none;
            opacity: 0.3;
        }

        @keyframes hologramFlicker {
            0%, 98%, 100% { opacity: 0.3; }
            99% { opacity: 0.1; }
        }

        /* Enhanced howl visual effects */
        .howl-explosion {
            position: absolute;
            top: 20%;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 100px;
            opacity: 0;
            animation: howlExplosion 2s ease-out 3.5s forwards;
        }

        @keyframes howlExplosion {
            0% { 
                opacity: 0; 
                transform: translateX(-50%) scale(0); 
            }
            25% { 
                opacity: 1; 
                transform: translateX(-50%) scale(0.5); 
            }
            50% { 
                opacity: 0.8; 
                transform: translateX(-50%) scale(1); 
            }
            100% { 
                opacity: 0; 
                transform: translateX(-50%) scale(2); 
            }
        }

        .howl-ring {
            position: absolute;
            width: 100%;
            height: 100%;
            border: 3px solid rgba(0, 255, 255, 0.6);
            border-radius: 50%;
            animation: howlRingExpand 2s ease-out infinite;
        }

        .howl-ring:nth-child(1) { animation-delay: 0s; }
        .howl-ring:nth-child(2) { animation-delay: 0.3s; }
        .howl-ring:nth-child(3) { animation-delay: 0.6s; }

        @keyframes howlRingExpand {
            0% {
                transform: scale(0);
                opacity: 1;
                border-width: 6px;
            }
            50% {
                opacity: 0.8;
                border-width: 3px;
            }
            100% {
                transform: scale(3);
                opacity: 0;
                border-width: 1px;
            }
        }

        /* Screen shake effect during howl */
        .intro-animation.shaking {
            animation: screenShake 0.5s ease-in-out;
        }

        @keyframes screenShake {
            0%, 100% { transform: translateX(0); }
            10% { transform: translateX(-2px); }
            20% { transform: translateX(2px); }
            30% { transform: translateX(-2px); }
            40% { transform: translateX(2px); }
            50% { transform: translateX(-1px); }
            60% { transform: translateX(1px); }
            70% { transform: translateX(-1px); }
            80% { transform: translateX(1px); }
            90% { transform: translateX(-1px); }
        }

        /* Matrix-style digital rain effect */
        .digital-rain {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            opacity: 0.1;
        }

        .rain-drop {
            position: absolute;
            color: #00ffff;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            animation: rainFall 3s linear infinite;
        }

        @keyframes rainFall {
            0% {
                top: -20px;
                opacity: 1;
            }
            100% {
                top: 100vh;
                opacity: 0;
            }
        }
        .doberman-mascot::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 80%;
            height: 3px;
            background: linear-gradient(90deg, 
                transparent, 
                rgba(0, 255, 255, 0.6) 20%, 
                rgba(0, 255, 255, 0.8) 50%, 
                rgba(0, 255, 255, 0.6) 80%, 
                transparent
            );
            transform: translate(-50%, -50%);
            border-radius: 2px;
            animation: chainGlow 3s ease-in-out infinite;
            pointer-events: none;
            z-index: 1;
        }

        @keyframes chainGlow {
            0%, 100% { 
                opacity: 0.3;
                box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
            }
            50% { 
                opacity: 0.8;
                box-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
            }
        }

        /* Howl Animation */
        .howl-indicator {
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
            animation: howlShow 1s ease-in-out 3.5s forwards;
        }

        @keyframes howlShow {
            0% { opacity: 0; transform: translateX(-50%) scale(0.5); }
            50% { opacity: 1; transform: translateX(-50%) scale(1.2); }
            100% { opacity: 0; transform: translateX(-50%) scale(1); }
        }

        .howl-wave {
            width: 40px;
            height: 40px;
            border: 3px solid #00ffff;
            border-radius: 50%;
            position: absolute;
            animation: howlRipple 1s ease-out infinite;
        }

        @keyframes howlRipple {
            0% {
                transform: scale(0);
                opacity: 1;
            }
            100% {
                transform: scale(4);
                opacity: 0;
            }
        }

        /* Wave Crash Animation */
        .wave-container {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 200px;
            overflow: hidden;
            opacity: 0;
            animation: waveAppear 2s ease-in-out 4s forwards;
        }

        @keyframes waveAppear {
            0% { opacity: 0; transform: translateY(100%); }
            100% { opacity: 1; transform: translateY(0); }
        }

        .wave {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 200%;
            height: 100px;
            background: linear-gradient(135deg, rgba(0, 255, 255, 0.3), rgba(0, 212, 255, 0.5));
            border-radius: 100% 100% 0 0;
            animation: waveCrash 3s ease-in-out infinite;
        }

        @keyframes waveCrash {
            0%, 100% {
                transform: translateX(-50%) translateY(0) scale(1);
            }
            50% {
                transform: translateX(-50%) translateY(-20px) scale(1.1);
            }
        }

        .wave:nth-child(2) {
            animation-delay: -1s;
            opacity: 0.7;
            height: 80px;
        }

        .wave:nth-child(3) {
            animation-delay: -2s;
            opacity: 0.4;
            height: 60px;
        }

        /* Slogan Animation */
        .slogan-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            margin-top: 200px;
            opacity: 0;
            animation: sloganFadeIn 3s ease-out 5s forwards;
        }

        @keyframes sloganFadeIn {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) translateY(30px);
            }
            100% {
                opacity: 1;
                transform: translate(-50%, -50%) translateY(0);
            }
        }

        .slogan-text {
            font-family: 'Orbitron', monospace;
            font-size: 2rem;
            color: #00ffff;
            text-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
            line-height: 1.4;
            margin-bottom: 20px;
            animation: textGlow 3s ease-in-out infinite;
        }

        @keyframes textGlow {
            0%, 100% {
                text-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
            }
            50% {
                text-shadow: 0 0 40px rgba(0, 255, 255, 0.8), 0 0 60px rgba(0, 255, 255, 0.4);
            }
        }

        .slogan-subtitle {
            font-family: 'Rajdhani', sans-serif;
            font-size: 1.2rem;
            color: #8892b0;
            font-weight: 300;
            letter-spacing: 2px;
        }

        /* Skip button */
        .skip-intro {
            position: absolute;
            top: 30px;
            right: 30px;
            background: rgba(0, 255, 255, 0.1);
            border: 1px solid rgba(0, 255, 255, 0.3);
            color: #00ffff;
            padding: 10px 20px;
            border-radius: 20px;
            cursor: pointer;
            font-family: 'Rajdhani', sans-serif;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .skip-intro:hover {
            background: rgba(0, 255, 255, 0.2);
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
        }

        /* Main content hidden during intro */
        .main-content {
            opacity: 0;
            transition: opacity 1s ease-in;
        }

        .main-content.visible {
            opacity: 1;
        }

        /* Sound wave effect */
        .sound-waves {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            opacity: 0;
            animation: soundWaveShow 2s ease-in-out 4.5s forwards;
        }

        @keyframes soundWaveShow {
            0% { opacity: 0; }
            50% { opacity: 1; }
            100% { opacity: 0; }
        }

        .sound-wave {
            width: 300px;
            height: 300px;
            border: 2px solid rgba(0, 255, 255, 0.3);
            border-radius: 50%;
            position: absolute;
            animation: soundRipple 2s ease-out infinite;
        }

        .sound-wave:nth-child(1) { animation-delay: 0s; }
        .sound-wave:nth-child(2) { animation-delay: 0.3s; }
        .sound-wave:nth-child(3) { animation-delay: 0.6s; }

        @keyframes soundRipple {
            0% {
                transform: scale(0);
                opacity: 1;
            }
            100% {
                transform: scale(2);
                opacity: 0;
            }
        }

        /* Responsive design - Updated for new image */
        @media (max-width: 768px) {
            .doberman-image {
                width: 280px;
                max-height: 350px;
            }

            .slogan-text {
                font-size: 1.4rem;
                padding: 0 20px;
            }

            .slogan-subtitle {
                font-size: 1rem;
                padding: 0 20px;
            }

            /* Adjust eye positions for mobile */
            .eye-glow.left {
                top: 32%;
                left: 40%;
                width: 12px;
                height: 12px;
            }

            .eye-glow.right {
                top: 32%;
                right: 40%;
                width: 12px;
                height: 12px;
            }
        }

        @media (max-width: 480px) {
            .doberman-image {
                width: 240px;
                max-height: 300px;
            }

            .eye-glow.left, .eye-glow.right {
                width: 10px;
                height: 10px;
            }
        }

        /* Additional image loading states */
        .doberman-image {
            opacity: 0;
            animation: dobermanEnter 3s ease-out forwards, imageReveal 0.5s ease-out 0.5s forwards;
            transition: all 0.3s ease;
        }

        @keyframes imageReveal {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* Howl animation specifically for the image */
        .doberman-mascot.howling .doberman-image {
            animation: dobermanBreathe 4s ease-in-out infinite, howlAnimation 1.5s ease-out 3.5s;
        }

        @keyframes howlAnimation {
            0% { 
                transform: scale(1) rotateZ(0deg); 
                filter: brightness(1.1) contrast(1.1);
            }
            25% { 
                transform: scale(1.03) rotateZ(-1deg); 
                filter: brightness(1.15) contrast(1.15) saturate(1.1);
            }
            50% { 
                transform: scale(1.06) rotateZ(0deg); 
                filter: brightness(1.2) contrast(1.2) saturate(1.2);
            }
            75% { 
                transform: scale(1.03) rotateZ(1deg); 
                filter: brightness(1.15) contrast(1.15) saturate(1.1);
            }
            100% { 
                transform: scale(1) rotateZ(0deg); 
                filter: brightness(1.1) contrast(1.1);
            }
        }

        /* Image loading fallback styling */
        .doberman-image[alt*="Placeholder"] {
            border: 2px dashed rgba(0, 255, 255, 0.3);
            background-color: rgba(0, 255, 255, 0.05);
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(0, 255, 255, 0.7);
            font-family: 'Orbitron', monospace;
            font-size: 14px;
            text-align: center;
            padding: 20px;
        }
    </style>
</head>
<body>
    <!-- Intro Animation -->
    <div class="intro-animation" id="introAnimation">
        <!-- Skip Button -->
        <button class="skip-intro" onclick="skipIntro()">Skip Intro</button>

        <!-- Doberman Mascot with Real Image -->
        <div class="doberman-mascot">
            <!-- Your SE-STAR Doberman Guardian Image -->
            <img src="public/images/doberman-business.png"
                 alt="SE-STAR Guardian" 
                 class="doberman-image"
                 style="background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDQwMCA1MDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSI0MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjMGEwZjFjIi8+Cjx0ZXh0IHg9IjIwMCIgeT0iMjUwIiBmb250LWZhbWlseT0iT3JiaXRyb24iIGZvbnQtc2l6ZT0iMjQiIGZpbGw9IiMwMGZmZmYiIHRleHQtYW5jaG9yPSJtaWRkbGUiPgpTRS1TVEFSIEd1YXJkaWFuCjwvdGV4dD4KPHA+UGxhY2UgeW91ciBEb2Jlcm1hbiBpbWFnZSBhdDo8L3A+CjxwPnB1YmxpYy9pbWFnZXMvZG9iZXJtYW4tbWFzY290LnBuZzwvcD4KPC9zdmc+'); background-size: contain; background-repeat: no-repeat; background-position: center;"
                 onload="this.style.backgroundImage='none'"
                 onerror="this.style.backgroundImage='url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDQwMCA1MDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSI0MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjMGEwZjFjIi8+Cjx0ZXh0IHg9IjIwMCIgeT0iMjUwIiBmb250LWZhbWlseT0iT3JiaXRyb24iIGZvbnQtc2l6ZT0iMjQiIGZpbGw9IiMwMGZmZmYiIHRleHQtYW5jaG9yPSJtaWRkbGUiPgpTRS1TVEFSIEd1YXJkaWFuCjwvdGV4dD4KPC9zdmc+)'; this.alt='SE-STAR Guardian Placeholder'">
            
            <!-- Alternative: Direct path to your image -->
            <!-- <img src="public/images/doberman-business.png" alt="SE-STAR Guardian" class="doberman-image"> -->
            
            <!-- Glowing Eyes Overlay -->
            <div class="doberman-eyes-overlay">
                <div class="eye-glow left"></div>
                <div class="eye-glow right"></div>
            </div>

            <!-- Howl Indicator -->
            <div class="howl-indicator">
                <div class="howl-wave"></div>
            </div>
        </div>

        <!-- Sound Waves -->
        <div class="sound-waves">
            <div class="sound-wave"></div>
            <div class="sound-wave"></div>
            <div class="sound-wave"></div>
        </div>

        <!-- Wave Crash -->
        <div class="wave-container">
            <div class="wave"></div>
            <div class="wave"></div>
            <div class="wave"></div>
        </div>

        <!-- Slogan -->
        <div class="slogan-container">
            <div class="slogan-text">
                Welcome to SE-STAR
            </div>
            <div class="slogan-subtitle">
                Crypto's first wave of truth for serial tokens and contracts to protect your assets
            </div>
        </div>
    </div>

    <!-- Main Website Content -->
    <div class="main-content" id="mainContent">
        <!-- Animated Background -->
        <div class="cyber-bg">
            <div class="cyber-grid"></div>
            <div class="floating-particles"></div>
        </div>

        <!-- Navigation -->
        <nav class="navbar">
            <div class="nav-container">
                <div class="nav-logo">
                    <div class="logo-shield">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <span class="logo-text">SE-STAR</span>
                </div>
                <ul class="nav-menu">
                    <li><a href="#home" class="nav-link">Home</a></li>
                    <li><a href="#scanner" class="nav-link">Scanner</a></li>
                    <li><a href="#trustwall" class="nav-link">TrustWall</a></li>
                    <li><a href="#about" class="nav-link">About</a></li>
                    <li><a href="#presale" class="nav-link presale-btn">Presale</a></li>
                </ul>
            </div>
        </nav>

        <!-- Hero Section -->
        <section id="home" class="hero">
            <div class="hero-content">
                <div class="hero-logo">
                    <div class="main-shield">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                </div>
                <h1 class="hero-title">SE-STAR</h1>
                <p class="hero-subtitle">Blockchain Security & Fraud Prevention Protocol</p>
                <div class="hero-buttons">
                    <button class="btn btn-primary">Launch Scanner</button>
                    <button class="btn btn-secondary">Learn More</button>
                </div>
            </div>
        </section>

        <!-- Dashboard Section -->
        <section id="scanner" class="dashboard">
            <div class="container">
                <h2 class="section-title">Security Dashboard</h2>
                
                <!-- Address Scanner -->
                <div class="dashboard-grid">
                    <div class="card scanner-card">
                        <h3 class="card-title">ADDRESS SCANNER</h3>
                        <div class="input-group">
                            <input type="text" placeholder="0x4a1... 5f60" class="scanner-input">
                            <button class="btn btn-scan">SCAN</button>
                        </div>
                        <div class="risk-indicators">
                            <div class="risk-dot safe"></div>
                            <div class="risk-dot warning"></div>
                            <div class="risk-dot danger"></div>
                            <div class="risk-dot critical"></div>
                        </div>
                    </div>

                    <!-- AI Scan Results -->
                    <div class="card results-card">
                        <h3 class="card-title">AI SCAN RESULTS</h3>
                        <div class="scan-result">
                            <p>AI scan minutes: complete.</p>
                            <p>Moderate risk activity detected.</p>
                            <div class="result-details">
                                <span class="detail-label">Aescrow Overview:</span>
                                <span class="detail-value">3 custody vaults active</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- Audio for Sound Effects -->
    <audio id="howlSound" preload="auto">
        <source src="public/audio/dog-howl.mp3" type="audio/mpeg">
        <source src="public/audio/dog-howl.ogg" type="audio/ogg">
    </audio>

    <audio id="waveSound" preload="auto">
        <source src="public/audio/wave-crash.mp3" type="audio/mpeg">
        <source src="public/audio/wave-crash.ogg" type="audio/ogg">
    </audio>

    <script>
        // Animation sequence controller
        class IntroAnimation {
            constructor() {
                this.introElement = document.getElementById('introAnimation');
                this.mainContent = document.getElementById('mainContent');
                this.howlSound = document.getElementById('howlSound');
                this.waveSound = document.getElementById('waveSound');
                this.animationComplete = false;
                
                this.init();
            }

            init() {
                // Start the animation sequence
                this.startAnimationSequence();
                
                // Auto-hide intro after 8 seconds
                setTimeout(() => {
                    if (!this.animationComplete) {
                        this.completeIntro();
                    }
                }, 8000);
            }

            startAnimationSequence() {
                // Add howling class for special animation
                setTimeout(() => {
                    const mascot = document.querySelector('.doberman-mascot');
                    if (mascot) mascot.classList.add('howling');
                }, 3000);

                // Play howl sound at 3.5 seconds (when doberman howls)
                setTimeout(() => {
                    this.playHowlSound();
                }, 3500);

                // Play wave crash sound at 4 seconds
                setTimeout(() => {
                    this.playWaveSound();
                }, 4000);

                // Mark animation as complete after 7 seconds
                setTimeout(() => {
                    this.animationComplete = true;
                    this.completeIntro();
                }, 7000);
            }

            playHowlSound() {
                try {
                    this.howlSound.volume = 0.3;
                    this.howlSound.play().catch(e => {
                        console.log('Howl sound failed to play:', e);
                        // Fallback: create synthetic howl effect
                        this.createSyntheticHowl();
                    });
                } catch (e) {
                    this.createSyntheticHowl();
                }
            }

            playWaveSound() {
                try {
                    this.waveSound.volume = 0.4;
                    this.waveSound.play().catch(e => {
                        console.log('Wave sound failed to play:', e);
                        // Fallback: create synthetic wave effect
                        this.createSyntheticWave();
                    });
                } catch (e) {
                    this.createSyntheticWave();
                }
            }

            createSyntheticHowl() {
                // Create audio context for synthetic howl
                try {
                    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
                    const oscillator = audioContext.createOscillator();
                    const gainNode = audioContext.createGain();
                    
                    oscillator.connect(gainNode);
                    gainNode.connect(audioContext.destination);
                    
                    oscillator.frequency.setValueAtTime(300, audioContext.currentTime);
                    oscillator.frequency.exponentialRampToValueAtTime(150, audioContext.currentTime + 1.5);
                    
                    gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
                    gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 1.5);
                    
                    oscillator.start();
                    oscillator.stop(audioContext.currentTime + 1.5);
                } catch (e) {
                    console.log('Synthetic howl creation failed:', e);
                }
            }

            createSyntheticWave() {
                // Create audio context for synthetic wave crash
                try {
                    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
                    const oscillator = audioContext.createOscillator();
                    const gainNode = audioContext.createGain();
                    
                    oscillator.connect(gainNode);
                    gainNode.connect(audioContext.destination);
                    
                    oscillator.frequency.setValueAtTime(100, audioContext.currentTime);
                    oscillator.frequency.exponentialRampToValueAtTime(50, audioContext.currentTime + 2);
                    
                    gainNode.gain.setValueAtTime(0.2, audioContext.currentTime);
                    gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 2);
                    
                    oscillator.start();
                    oscillator.stop(audioContext.currentTime + 2);
                } catch (e) {
                    console.log('Synthetic wave creation failed:', e);
                }
            }

            completeIntro() {
                this.introElement.classList.add('hidden');
                this.mainContent.classList.add('visible');
                
                // Remove intro element after transition
                setTimeout(() => {
                    this.introElement.style.display = 'none';
                }, 1000);

                // Initialize main website functionality
                this.initMainWebsite();
            }

            initMainWebsite() {
                // Initialize the main website scripts
                console.log('SE-STAR Platform Loaded');
                
                // Add any additional initialization here
                this.initScanner();
                this.initParticles();
            }

            initScanner() {
                const scanButton = document.querySelector('.btn-scan');
                const scannerInput = document.querySelector('.scanner-input');
                
                if (scanButton && scannerInput) {
                    scanButton.addEventListener('click', () => {
                        const address = scannerInput.value.trim();
                        if (address) {
                            this.performScan(address);
                        }
                    });
                }
            }

            performScan(address) {
                console.log('Scanning address:', address);
                // Add your scanning logic here
            }

            initParticles() {
                // Add floating particles animation
                this.createParticles();
            }

            createParticles() {
                const particleContainer = document.querySelector('.floating-particles');
                if (!particleContainer) return;
                
                for (let i = 0; i < 20; i++) {
                    const particle = document.createElement('div');
                    particle.style.cssText = `
                        position: absolute;
                        width: 2px;
                        height: 2px;
                        background: #00ffff;
                        border-radius: 50%;
                        top: ${Math.random() * 100}%;
                        left: ${Math.random() * 100}%;
                        animation: float ${5 + Math.random() * 10}s ease-in-out infinite;
                        opacity: ${0.3 + Math.random() * 0.7};
                        box-shadow: 0 0 6px #00ffff;
                    `;
                    particleContainer.appendChild(particle);
                    particleContainer.appendChild(particle);
                }
            }
        }

        // Skip intro function
        function skipIntro() {
            if (window.introAnimation) {
                window.introAnimation.completeIntro();
            }
        }

        // Enhanced audio preloader with user interaction detection
        function initAudioSystem() {
            // Create audio unlock button for mobile devices
            const audioUnlockButton = document.createElement('button');
            audioUnlockButton.textContent = '🔊 Enable Audio';
            audioUnlockButton.style.cssText = `
                position: absolute;
                top: 100px;
                right: 30px;
                background: rgba(0, 255, 255, 0.1);
                border: 1px solid rgba(0, 255, 255, 0.3);
                color: #00ffff;
                padding: 8px 16px;
                border-radius: 15px;
                cursor: pointer;
                font-family: 'Rajdhani', sans-serif;
                font-size: 14px;
                font-weight: 500;
                transition: all 0.3s ease;
                z-index: 10001;
            `;

            audioUnlockButton.addEventListener('mouseover', () => {
                audioUnlockButton.style.background = 'rgba(0, 255, 255, 0.2)';
                audioUnlockButton.style.boxShadow = '0 0 15px rgba(0, 255, 255, 0.3)';
            });

            audioUnlockButton.addEventListener('mouseout', () => {
                audioUnlockButton.style.background = 'rgba(0, 255, 255, 0.1)';
                audioUnlockButton.style.boxShadow = 'none';
            });

            audioUnlockButton.addEventListener('click', () => {
                // User interaction enables audio context
                if (window.introAnimation && window.introAnimation.audioContext) {
                    window.introAnimation.audioContext.resume();
                    audioUnlockButton.textContent = '🔊 Audio Ready';
                    audioUnlockButton.style.opacity = '0.7';
                    audioUnlockButton.style.pointerEvents = 'none';
                }
            });

            const introElement = document.getElementById('introAnimation');
            if (introElement) {
                introElement.appendChild(audioUnlockButton);
            }

            // Auto-hide audio button after 5 seconds
            setTimeout(() => {
                if (audioUnlockButton.parentNode) {
                    audioUnlockButton.style.opacity = '0';
                    setTimeout(() => {
                        if (audioUnlockButton.parentNode) {
                            audioUnlockButton.parentNode.removeChild(audioUnlockButton);
                        }
                    }, 1000);
                }
            }, 5000);
        }

        // Advanced particle effects for special moments
        function createExplosionEffect(x, y) {
            const explosion = document.createElement('div');
            explosion.style.cssText = `
                position: absolute;
                left: ${x}px;
                top: ${y}px;
                width: 4px;
                height: 4px;
                pointer-events: none;
                z-index: 9999;
            `;

            for (let i = 0; i < 12; i++) {
                const spark = document.createElement('div');
                spark.style.cssText = `
                    position: absolute;
                    width: 3px;
                    height: 3px;
                    background: #00ffff;
                    border-radius: 50%;
                    animation: sparkFly 1s ease-out forwards;
                    transform-origin: center;
                `;

                const angle = (i / 12) * Math.PI * 2;
                const distance = 50 + Math.random() * 50;
                const endX = Math.cos(angle) * distance;
                const endY = Math.sin(angle) * distance;

                spark.style.setProperty('--end-x', `${endX}px`);
                spark.style.setProperty('--end-y', `${endY}px`);

                explosion.appendChild(spark);
            }

            document.body.appendChild(explosion);

            // Clean up after animation
            setTimeout(() => {
                if (document.body.contains(explosion)) {
                    document.body.removeChild(explosion);
                }
            }, 1000);
        }

        // Add CSS for spark animation
        const sparkStyle = document.createElement('style');
        sparkStyle.textContent = `
            @keyframes sparkFly {
                0% {
                    transform: translate(0, 0) scale(1);
                    opacity: 1;
                }
                100% {
                    transform: translate(var(--end-x), var(--end-y)) scale(0);
                    opacity: 0;
                }
            }
        `;
        document.head.appendChild(sparkStyle);

        // Initialize animation when page loads
        document.addEventListener('DOMContentLoaded', function() {
            window.introAnimation = new IntroAnimation();
            initAudioSystem();

            // Add click explosion effects throughout the page
            document.addEventListener('click', function(e) {
                if (Math.random() < 0.3) { // 30% chance of explosion on click
                    createExplosionEffect(e.clientX, e.clientY);
                }
            });

            // Keyboard shortcuts
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape') {
                    skipIntro();
                }
                if (e.key === ' ') {
                    e.preventDefault();
                    if (window.introAnimation && !window.introAnimation.animationComplete) {
                        skipIntro();
                    }
                }
            });
        });

        // Performance optimization
        function optimizePerformance() {
            // Reduce particles on slower devices
            const isSlowDevice = navigator.hardwareConcurrency < 4 || 
                                 /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
            
            if (isSlowDevice) {
                const style = document.createElement('style');
                style.textContent = `
                    .particle-system .particle:nth-child(n+8) { display: none; }
                    .digital-rain .rain-drop:nth-child(n+10) { display: none; }
                    .floating-particles div:nth-child(n+15) { display: none; }
                `;
                document.head.appendChild(style);
            }
        }

        // Call performance optimization
        optimizePerformance();

        // Enhanced accessibility
        function initAccessibility() {
            // Add ARIA labels
            const introElement = document.getElementById('introAnimation');
            if (introElement) {
                introElement.setAttribute('aria-label', 'SE-STAR Introduction Animation');
                introElement.setAttribute('role', 'presentation');
            }

            // Respect prefers-reduced-motion
            if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
                const reduceMotionStyle = document.createElement('style');
                reduceMotionStyle.textContent = `
                    *, *::before, *::after {
                        animation-duration: 0.01ms !important;
                        animation-iteration-count: 1 !important;
                        transition-duration: 0.01ms !important;
                    }
                `;
                document.head.appendChild(reduceMotionStyle);
                
                // Auto-skip intro for reduced motion users
                setTimeout(() => {
                    skipIntro();
                }, 1000);
            }
        }

        // Initialize accessibility features
        document.addEventListener('DOMContentLoaded', initAccessibility);

        // Console easter egg
        console.log(`
         SE-STAR Guardian Active 
        
        ╔══════════════════════════════════════╗
        ║  Welcome to SE-STAR Security System  ║
        ║                                      ║
        ║  🔒 Blockchain Security Protocol     ║
        ║  🛡️  Serial Token Protection        ║
        ║  🤖 AI-Powered Threat Detection     ║
        ║  ⚡ Real-time Risk Assessment       ║
        ║                                      ║
        ║  Guardian Status: ACTIVE             ║
        ║  Protection Level: MAXIMUM           ║
        ╚══════════════════════════════════════╝
        
        Tips:
        • Press ESC or SPACE to skip intro
        • Click anywhere for particle effects
        • Enable audio for full experience
        
        Built with ❤️ for crypto security
        `);

        // Anti-tamper protection (basic)
        (function() {
            let devtools = false;
            setInterval(() => {
                if (window.outerHeight - window.innerHeight > 200) {
                    if (!devtools) {
                        devtools = true;
                        console.log('🔍 Developer detected! Welcome to SE-STAR security inspection.');
                        console.log('💡 Tip: Check out our smart contracts for the real magic!');
                    }
                }
            }, 1000);
        })();
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SE-STAR - The Serial Killer of Web3 Scammers</title>
    <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Rajdhani', sans-serif;
            background: linear-gradient(135deg, #000000 0%, #1a1a2e 50%, #16213e 100%);
            color: #00ff88;
            overflow: hidden;
            height: 100vh;
        }

        /* Loading Screen with Vault */
        .loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
                linear-gradient(135deg, #000000 0%, #1a1a2e 50%, #16213e 100%);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 10000;
        }

        /* Matrix Rain */
        .matrix-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 1;
        }

        .matrix-column {
            position: absolute;
            top: -100%;
            color: #00ff88;
            font-family: 'Courier New', monospace;
            font-size: 16px;
            animation: matrixFall linear infinite;
            opacity: 0.4;
            white-space: pre-line;
        }

        @keyframes matrixFall {
            from { top: -100%; }
            to { top: 100vh; }
        }

        /* VAULT CONTAINER */
        .vault-container {
            position: relative;
            z-index: 5;
            width: 600px;
            height: 400px;
            margin: 0 auto;
            perspective: 1000px;
        }

        /* VAULT BACKGROUND */
        .vault-background {
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
            border: 5px solid #444;
            border-radius: 20px;
            box-shadow: 
                inset 0 0 50px rgba(0, 255, 136, 0.2),
                0 0 100px rgba(0, 255, 136, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* VAULT DOORS */
        .vault-door {
            position: absolute;
            width: 50%;
            height: 100%;
            background: linear-gradient(145deg, #333, #111);
            border: 3px solid #00ff88;
            border-radius: 15px;
            box-shadow: 
                inset 0 0 30px rgba(0, 255, 136, 0.3),
                0 0 50px rgba(0, 255, 136, 0.4);
            transition: transform 3s ease-in-out;
            z-index: 10;
        }

        .vault-door-left {
            left: 0;
            transform-origin: left center;
            border-right: none;
            border-radius: 15px 0 0 15px;
        }

        .vault-door-right {
            right: 0;
            transform-origin: right center;
            border-left: none;
            border-radius: 0 15px 15px 0;
        }

        /* VAULT OPENING ANIMATION */
        .vault-container.opening .vault-door-left {
            transform: rotateY(-120deg);
        }

        .vault-container.opening .vault-door-right {
            transform: rotateY(120deg);
        }

        /* VAULT HANDLE/WHEEL */
        .vault-wheel {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80px;
            height: 80px;
            border: 6px solid #00ff88;
            border-radius: 50%;
            background: radial-gradient(circle, #222, #111);
            box-shadow: 
                0 0 30px #00ff88,
                inset 0 0 20px rgba(0, 255, 136, 0.3);
            z-index: 15;
            animation: wheelSpin 2s ease-in-out 6s forwards;
        }

        @keyframes wheelSpin {
            from { transform: translate(-50%, -50%) rotate(0deg); }
            to { transform: translate(-50%, -50%) rotate(720deg); }
        }

        .vault-wheel::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            border: 2px solid #00ff88;
            border-radius: 50%;
            background: #000;
        }

        .vault-wheel::after {
            content: "SE";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-family: 'Orbitron', monospace;
            font-weight: bold;
            color: #00ff88;
            font-size: 16px;
        }

        /* DOBERMAN SECURITY KEY */
        .doberman-key-container {
            position: absolute;
            bottom: -200px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 20;
            animation: dobermanRise 3s ease-out 4s forwards;
        }

        @keyframes dobermanRise {
            from { 
                bottom: -200px;
                opacity: 0;
                transform: translateX(-50%) scale(0.8);
            }
            to { 
                bottom: 50px;
                opacity: 1;
                transform: translateX(-50%) scale(1);
            }
        }

        .doberman-key {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            border: 4px solid #ffd700;
            box-shadow: 
                0 0 40px rgba(255, 215, 0, 0.8),
                0 0 80px rgba(255, 215, 0, 0.4);
            object-fit: cover;
            animation: keyFloat 3s ease-in-out infinite;
            cursor: pointer;
            transition: all 0.5s ease;
            background-image: url('https://claude.ai/api/d8e61488-04fa-4d5a-9886-48906f10195a/files/8b3ac197-583b-4a03-a5ef-a686f255c6ab/preview');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        @keyframes keyFloat {
            0%, 100% { 
                transform: translateY(0px);
                box-shadow: 
                    0 0 40px rgba(255, 215, 0, 0.8),
                    0 0 80px rgba(255, 215, 0, 0.4);
            }
            50% { 
                transform: translateY(-15px);
                box-shadow: 
                    0 15px 50px rgba(255, 215, 0, 0.9),
                    0 15px 100px rgba(255, 215, 0, 0.5);
            }
        }

        .doberman-key:hover {
            transform: scale(1.1);
            box-shadow: 
                0 0 60px rgba(255, 215, 0, 1),
                0 0 120px rgba(255, 215, 0, 0.6);
        }

        /* KEY BADGE */
        .doberman-key-container::before {
            content: "SE-STAR Security Key: Click to Unlock";
            position: absolute;
            bottom: -40px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(45deg, #ffd700, #ffaa00);
            color: #000;
            padding: 8px 20px;
            border-radius: 25px;
            font-size: 14px;
            font-weight: bold;
            font-family: 'Orbitron', monospace;
            animation: keyBadgeGlow 2s ease-in-out infinite alternate;
            box-shadow: 0 0 20px #ffd700;
            white-space: nowrap;
        }

        @keyframes keyBadgeGlow {
            from { 
                box-shadow: 0 0 20px #ffd700;
                transform: translateX(-50%) scale(1);
            }
            to { 
                box-shadow: 0 0 30px #ffd700, 0 0 50px #ffaa00;
                transform: translateX(-50%) scale(1.05);
            }
        }

        /* CLICK TO UNLOCK PROMPT */
        .unlock-prompt {
            position: absolute;
            bottom: -80px;
            left: 50%;
            transform: translateX(-50%);
            color: #ffd700;
            font-size: 1.1em;
            font-weight: bold;
            text-shadow: 0 0 10px #ffd700;
            animation: promptPulse 2s ease-in-out infinite;
            opacity: 0;
            animation-delay: 7s;
            animation-fill-mode: forwards;
        }

        @keyframes promptPulse {
            0% { opacity: 0; transform: translateX(-50%) translateY(10px); }
            50% { opacity: 1; transform: translateX(-50%) translateY(0px); }
            100% { opacity: 0.8; transform: translateX(-50%) translateY(0px); }
        }

        /* VAULT UNLOCKING ANIMATION */
        .vault-container.unlocking .vault-wheel {
            animation: wheelUnlock 3s ease-in-out forwards;
        }

        @keyframes wheelUnlock {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            50% { transform: translate(-50%, -50%) rotate(360deg) scale(1.2); }
            100% { 
                transform: translate(-50%, -50%) rotate(720deg) scale(1);
                box-shadow: 0 0 50px #00ff88, inset 0 0 30px rgba(0, 255, 136, 0.5);
            }
        }

        /* SE-STAR LOGO ABOVE VAULT */
        .logo-container {
            position: absolute;
            top: -150px;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            z-index: 15;
        }

        .main-logo {
            font-family: 'Orbitron', monospace;
            font-size: 3.5em;
            font-weight: 900;
            color: #00ff88;
            text-shadow: 0 0 20px #00ff88, 0 0 40px #00ff88;
            margin-bottom: 10px;
            animation: logoGlow 2s ease-in-out infinite alternate;
        }

        @keyframes logoGlow {
            from { 
                text-shadow: 0 0 20px #00ff88, 0 0 40px #00ff88;
            }
            to { 
                text-shadow: 0 0 30px #00ff88, 0 0 60px #00ff88, 0 0 80px #00ff88;
            }
        }

        .tagline {
            font-size: 1.2em;
            color: #ff0044;
            text-shadow: 0 0 15px #ff0044;
            margin: 5px 0;
            animation: pulse 2s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.8; }
        }

        /* LOADING PROGRESS BELOW VAULT */
        .loading-container {
            position: absolute;
            bottom: -120px;
            left: 50%;
            transform: translateX(-50%);
            width: 500px;
            text-align: center;
            z-index: 15;
        }

        .loading-text {
            font-size: 1.2em;
            margin-bottom: 15px;
            color: #00ff88;
            font-weight: 600;
            min-height: 30px;
        }

        .loading-bar {
            width: 100%;
            height: 20px;
            background: rgba(0, 255, 136, 0.2);
            border: 2px solid #00ff88;
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 10px;
        }

        .loading-progress {
            height: 100%;
            background: linear-gradient(90deg, #00ff88, #00cc66, #00ff88);
            background-size: 200% 100%;
            border-radius: 10px;
            width: 0%;
            animation: shimmer 2s linear infinite;
            transition: width 0.3s ease;
        }

        @keyframes shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }

        .loading-percentage {
            font-size: 1.1em;
            color: #00ff88;
            font-weight: bold;
        }

        /* Skip Button */
        .skip-intro {
            position: absolute;
            top: 20px;
            right: 20px;
            padding: 10px 20px;
            background: rgba(0, 255, 136, 0.8);
            border: none;
            border-radius: 20px;
            color: #000;
            font-weight: bold;
            cursor: pointer;
            z-index: 15;
            transition: all 0.3s ease;
        }

        .skip-intro:hover {
            background: rgba(0, 255, 136, 1);
            transform: scale(1.05);
        }

        /* Mobile Responsive */
        @media (max-width: 768px) {
            .vault-container { 
                width: 90vw; 
                max-width: 400px; 
                height: 300px; 
            }
            .doberman-key { 
                width: 120px; 
                height: 120px; 
            }
            .main-logo { font-size: 2.5em; }
            .loading-container { width: 90vw; }
        }
    </style>
</head>
<body>
    <!-- Loading Screen with Vault -->
    <div class="loading-screen" id="loadingScreen">
        <!-- Skip Intro Button -->
        <button class="skip-intro" onclick="redirectToMain()">Skip Intro ⏭️</button>
        
        <!-- Matrix Rain Background -->
        <div class="matrix-bg" id="matrixBg"></div>

        <!-- Vault Container -->
        <div class="vault-container" id="vaultContainer">
            <!-- SE-STAR Logo Above Vault -->
            <div class="logo-container">
                <div class="main-logo">SE-STAR</div>
                <div class="tagline">First-Ever Serial-Traceable Token System</div>
                <div class="tagline">The Serial Killer of Web3 Scammers</div>
            </div>

            <!-- Vault Background -->
            <div class="vault-background"></div>

            <!-- Vault Doors -->
            <div class="vault-door vault-door-left" id="leftDoor"></div>
            <div class="vault-door vault-door-right" id="rightDoor"></div>

            <!-- Vault Wheel/Handle -->
            <div class="vault-wheel" id="vaultWheel"></div>

            <!-- Loading Progress Below Vault -->
            <div class="loading-container">
                <div class="loading-text" id="loadingText">Initializing SE-STAR Vault Protocol...</div>
                <div class="loading-bar">
                    <div class="loading-progress" id="loadingProgress"></div>
                </div>
                <div class="loading-percentage" id="loadingPercentage">0%</div>
            </div>
        </div>

        <!-- DOBERMAN AS SECURITY KEY -->
        <div class="doberman-key-container" id="dobermanKey">
            <div class="doberman-key" id="securityKey"></div>
            <div class="unlock-prompt" id="unlockPrompt">Click to Unlock Vault</div>
        </div>
    </div>

    <script>
        class SEStarVault {
            constructor() {
                this.progress = 0;
                this.loadingTexts = [
                    "Initializing SE-STAR Vault Protocol...",
                    "Loading Guardian Systems...",
                    "Activating Doberman Security...",
                    "Establishing Vault Connections...",
                    "Deploying Anti-Scam Defenses...",
                    "Finalizing Vault Security...",
                    "Vault Ready - Guardian Activated!"
                ];
                this.currentTextIndex = 0;
                
                this.init();
            }

            init() {
                this.createMatrixRain();
                this.startLoading();
                this.setupVaultSequence();
            }

            createMatrixRain() {
                const matrixBg = document.getElementById('matrixBg');
                const chars = '0123456789ABCDEF';
                
                for (let i = 0; i < 20; i++) {
                    const column = document.createElement('div');
                    column.className = 'matrix-column';
                    column.style.left = Math.random() * 100 + '%';
                    column.style.animationDuration = (Math.random() * 3 + 2) + 's';
                    column.style.animationDelay = Math.random() * 2 + 's';
                    
                    let text = '';
                    for (let j = 0; j < 15; j++) {
                        text += chars[Math.floor(Math.random() * chars.length)] + '\n';
                    }
                    column.textContent = text;
                    
                    matrixBg.appendChild(column);
                }
            }

            startLoading() {
                const progressBar = document.getElementById('loadingProgress');
                const percentage = document.getElementById('loadingPercentage');
                const text = document.getElementById('loadingText');

                const updateProgress = () => {
                    if (this.progress < 100) {
                        this.progress += Math.random() * 3 + 1;
                        this.progress = Math.min(100, this.progress);
                        
                        progressBar.style.width = this.progress + '%';
                        percentage.textContent = Math.floor(this.progress) + '%';

                        // Update text
                        const textIndex = Math.floor(this.progress / 15);
                        if (textIndex !== this.currentTextIndex && textIndex < this.loadingTexts.length) {
                            this.currentTextIndex = textIndex;
                            text.textContent = this.loadingTexts[this.currentTextIndex];
                        }

                        setTimeout(updateProgress, 200);
                    } else {
                        // Loading complete - start vault sequence
                        this.openVault();
                    }
                };

                updateProgress();
            }

            setupVaultSequence() {
                // The vault will open automatically when loading completes
            }

            openVault() {
                const vaultContainer = document.getElementById('vaultContainer');
                const securityKey = document.getElementById('securityKey');

                // Setup key click handler
                securityKey.addEventListener('click', () => {
                    console.log('Security key clicked - unlocking vault!');
                    
                    // Add unlocking animation to vault
                    vaultContainer.classList.add('unlocking');
                    
                    // Hide the key
                    document.getElementById('dobermanKey').style.opacity = '0';
                    document.getElementById('dobermanKey').style.transform = 'translateX(-50%) translateY(50px)';
                    
                    // Start vault opening sequence after wheel spins (3 seconds)
                    setTimeout(() => {
                        vaultContainer.classList.add('opening');
                        
                        // After vault opens, redirect to main website (3 more seconds)
                        setTimeout(() => {
                            redirectToMain();
                        }, 3000);
                    }, 3000);
                });
            }
        }

        // Function to redirect to main website
        function redirectToMain() {
            console.log('Redirecting to main website...');
            
            // Smooth fade transition
            document.body.style.transition = 'opacity 1s ease-out';
            document.body.style.opacity = '0';
            
            setTimeout(() => {
                window.location.href = 'main/index.html';
            }, 1000);
        }

        // Check if user has seen intro before
        function checkIntroSeen() {
            if (sessionStorage.getItem('sestarIntroSeen')) {
                redirectToMain();
            } else {
                // First time visitor - show intro
                sessionStorage.setItem('sestarIntroSeen', 'true');
            }
        }

        // Start when page loads
        document.addEventListener('DOMContentLoaded', () => {
            // Uncomment the line below if you want to skip intro for return visitors
            // checkIntroSeen();
            
            new SEStarVault();
        });
    </script>
</body>
</html>