/*
Theme Name: Ghost Echelon
Theme URI: https://www.ghostechelon.com
Author: Tyler Hickman
Version: 1.0
Text Domain: ghostechelon
*/ :root {
            --cyber-black: #000000;
            --cyber-cyan: #00FFFF;
            --cyber-blue: #0080FF;
            --cyber-green: #00FF00;
            --cyber-grey: #808080;
            --cyber-white: #FFFFFF;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Courier Prime', monospace;
            background: var(--cyber-black);
            color: var(--cyber-white);
            overflow-x: hidden;
            cursor: crosshair;
        }
        
        .military-hud {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1000;
            background: transparent;
        }
        
        .hud-element {
            position: absolute;
            color: var(--cyber-cyan);
            font-size: 12px;
            text-shadow: 0 0 10px var(--cyber-cyan);
        }
        
        .hud-top-left {
            top: 20px;
            left: 20px;
        }
        
        .hud-top-right {
            top: 20px;
            right: 20px;
            text-align: right;
        }
        
        .hud-bottom-left {
            bottom: 20px;
            left: 20px;
        }
        
        .hud-bottom-right {
            bottom: 20px;
            right: 20px;
            text-align: right;
        }
        
        .grid-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
            background-size: 50px 50px;
            pointer-events: none;
            z-index: 1;
            opacity: 0.3;
        }
        
        .topographical-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url("https://ghostechelon.com/wp-content/uploads/2025/10/WEBSITE-BACKGROUND-copy.jpg") center/cover;
            opacity: 0.4;
            z-index: 0;
        }
        
        .glitch-text {
            position: relative;
            display: inline-block;
            transition: all 0.3s ease;
        }
        
        .glitch-text.glitching {
            animation: glitch 0.5s ease-in-out;
        }
        
        @keyframes glitch {
            0%, 100% { transform: translate(0); }
            20% { transform: translate(-2px, 2px); }
            40% { transform: translate(-2px, -2px); }
            60% { transform: translate(2px, 2px); }
            80% { transform: translate(2px, -2px); }
        }
        
        .hexagon {
            width: 100px;
            height: 100px;
            background: rgba(0, 255, 255, 0.1);
            border: 2px solid var(--cyber-cyan);
            position: relative;
            clip-path: polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%);
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .hexagon:hover {
            background: rgba(0, 255, 255, 0.3);
            box-shadow: 0 0 30px var(--cyber-cyan);
            transform: scale(1.1);
        }
        
        .hexagon.active {
            background: rgba(0, 255, 255, 0.5);
            box-shadow: 0 0 50px var(--cyber-cyan);
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0%, 100% { box-shadow: 0 0 50px var(--cyber-cyan); }
            50% { box-shadow: 0 0 80px var(--cyber-cyan); }
        }
        
        .terminal-container {
            background: rgba(0, 0, 0, 0.8);
            border: 2px solid var(--cyber-cyan);
            border-radius: 10px;
            padding: 20px;
            margin: 20px;
            position: relative;
            overflow: hidden;
        }
        
        .terminal-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, transparent 49%, rgba(0, 255, 255, 0.1) 50%, transparent 51%);
            background-size: 3px 3px;
            pointer-events: none;
            z-index: 1;
        }
        
        .scan-line {
            position: absolute;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--cyber-cyan), transparent);
            animation: scan 3s linear infinite;
        }
        
        @keyframes scan {
            0% { top: 0; opacity: 1; }
            100% { top: 100%; opacity: 0; }
        }
        
        .data-static {
            position: absolute;
            font-size: 10px;
            color: var(--cyber-green);
            opacity: 0;
            animation: staticBlink 3s infinite;
        }
        
        @keyframes staticBlink {
            0%, 90% { opacity: 0; }
            5%, 15% { opacity: 1; }
            10%, 20% { opacity: 0; }
            25%, 35% { opacity: 1; }
            30%, 40% { opacity: 0; }
            45%, 55% { opacity: 1; }
            50%, 60% { opacity: 0; }
            65%, 75% { opacity: 1; }
            70%, 80% { opacity: 0; }
            85%, 95% { opacity: 1; }
        }
        
        .surveillance-feed {
            width: 300px;
            height: 200px;
            background: rgba(0, 0, 0, 0.9);
            border: 2px solid var(--cyber-blue);
            position: relative;
            overflow: hidden;
            transition: all 0.5s ease;
        }
        
        .surveillance-feed::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-size: cover;
            background-position: center;
            filter: grayscale(100%) contrast(120%) brightness(0.8);
            opacity: 0.9;
            transition: all 0.5s ease;
        }
        
        .surveillance-feed::after {
            content: 'SURVEILLANCE FEED: WINSTON-SALEM SECTOR';
            position: absolute;
            bottom: 10px;
            left: 10px;
            font-size: 10px;
            color: var(--cyber-cyan);
            text-shadow: 0 0 5px var(--cyber-cyan);
            z-index: 2;
        }
        
        .surveillance-feed.cam-1::before {
            background-image: url('/wp-content/themes/ghostechelon/assets/winston-salem-1.jpg');
        }
        
        .surveillance-feed.cam-2::before {
            background-image: url('/wp-content/themes/ghostechelon/assets/winston-salem-2.jpg');
        }
        
        .surveillance-feed.cam-3::before {
            background-image: url('/wp-content/themes/ghostechelon/assets/winston-salem-3.jpg');
        }
        
        .surveillance-feed.cam-4::before {
            background-image: url('/wp-content/themes/ghostechelon/assets/winston-salem-4.jpg');
        }
        
        .surveillance-feed.cam-5::before {
            background-image: url('/wp-content/themes/ghostechelon/assets/winston-salem-5.jpg');
        }
        
        .surveillance-feed.cam-6::before {
            background-image: url('/wp-content/themes/ghostechelon/assets/winston-salem-6.jpg');
        }
        
        .feed-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
            background-size: 20px 20px;
            pointer-events: none;
            z-index: 1;
        }
        
        .feed-info {
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 12px;
            color: var(--cyber-cyan);
            z-index: 2;
        }
        
        .feed-status {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 12px;
            color: var(--cyber-green);
            z-index: 2;
        }
        
        .nav-hexagon {
            position: fixed;
            top: 50%;
            transform: translateY(-50%);
            z-index: 100;
        }
        
        .nav-hexagon.left {
            left: 20px;
        }
        
        .nav-hexagon.right {
            right: 20px;
        }
        
        .nav-hexagon .hexagon {
            text-decoration: none;
            color: var(--cyber-cyan);
            font-size: 12px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .content-section {
            position: relative;
            z-index: 10;
            padding: 50px 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .mission-briefing {
            background: rgba(0, 0, 0, 0.9);
            border: 2px solid var(--cyber-cyan);
            border-radius: 10px;
            padding: 30px;
            margin: 20px 0;
            position: relative;
        }
        
        .mission-briefing::before {
            content: 'CLASSIFIED - EYES ONLY';
            position: absolute;
            top: -15px;
            left: 20px;
            background: var(--cyber-black);
            color: var(--cyber-cyan);
            padding: 5px 10px;
            font-size: 12px;
            border: 1px solid var(--cyber-cyan);
        }
        
        .status-indicator {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--cyber-green);
            animation: blink 2s infinite;
        }
        
        @keyframes blink {
            0%, 50% { opacity: 1; }
            51%, 100% { opacity: 0.3; }
        }
        
        .trailer-container {
            position: relative;
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
            border: 3px solid var(--cyber-cyan);
            border-radius: 10px;
            overflow: hidden;
        }
        
        .trailer-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2;
            cursor: pointer;
        }
        
        .play-button {
            width: 80px;
            height: 80px;
            background: var(--cyber-cyan);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .play-button:hover {
            transform: scale(1.1);
            box-shadow: 0 0 30px var(--cyber-cyan);
        }
        
        .play-button::before {
            content: '';
            width: 0;
            height: 0;
            border-left: 20px solid var(--cyber-black);
            border-top: 12px solid transparent;
            border-bottom: 12px solid transparent;
            margin-left: 4px;
        }
        
        .loading-sequence {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--cyber-black);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }
        
        .system-boot {
            font-family: 'Orbitron', monospace;
            color: var(--cyber-cyan);
            font-size: 18px;
            text-align: center;
            margin-bottom: 30px;
        }
        
        .boot-progress {
            width: 300px;
            height: 4px;
            background: rgba(0, 255, 255, 0.2);
            border: 1px solid var(--cyber-cyan);
            position: relative;
            overflow: hidden;
        }
        
        .boot-progress::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            background: var(--cyber-cyan);
            animation: boot-progress 3s ease-out;
            width: 100%;
        }
        
        @keyframes boot-progress {
            0% { width: 0%; }
            100% { width: 100%; }
        }
        
        @media (max-width: 768px) {
            .nav-hexagon {
                display: none;
            }
            
            .content-section {
                padding: 30px 10px;
            }
            
            .hexagon {
                width: 80px;
                height: 80px;
            }
            
            .surveillance-feed {
                width: 100%;
                height: 150px;
            }
        }
    </style>
</head>
<body>
    <!-- Loading Sequence -->
    <div class="loading-sequence" id="loadingSequence">
        <div class="system-boot">
            <div class="mb-4">GHOST ECHELON TACTICAL INTERFACE</div>
            <div class="text-sm mb-2">SYSTEM INITIALIZING...</div>
            <div class="text-xs mb-4">ESTABLISHING SECURE CONNECTION</div>
        </div>
        <div class="boot-progress"></div>
        <div class="text-xs mt-4" style="color: var(--cyber-green);">AUTHENTICATION COMPLETE</div>
    </div>

    <!-- Military HUD -->
    <div class="military-hud">
        <div class="hud-element hud-top-left">
            <div>SYSTEM: <span class="status-indicator"></span> ONLINE</div>
            <div>SIGNAL: 97%</div>
            <div>GRID: WS-7742-Sector-7</div>
        </div>
        
        <div class="hud-element hud-top-right">
            <div id="zuluTime">00:00:00 ZULU</div>
            <div id="currentDate">2025-10-20</div>
            <div>COORD: 36.0998°N, 80.2442°W</div>
        </div>
        
        <div class="hud-element hud-bottom-left">
            <div>MISSION: GHOST ECHELON</div>
            <div>STATUS: ACTIVE SURVEILLANCE</div>
            <div>THREAT LEVEL: ELEVATED</div>
        </div>
        
        <div class="hud-element hud-bottom-right">
            <div>AI CORE: ONLINE</div>
            <div>HEARTBEAT: 72 BPM</div>
            <div>MISSION TIMER: 02:00:00</div>
        </div>
    </div>

    <!-- Grid Overlay -->
    <div class="grid-overlay"></div>
    
    <!-- Topographical Background -->
    <div class="topographical-bg"></div>
    
    <!-- Data Static -->
    <div id="dataStatic"></div>
    
    <!-- Navigation Hexagons -->
    <div class="nav-hexagon left">
        <a href="about.html" class="hexagon">
            <div class="flex items-center justify-center h-full text-xs font-bold">ABOUT</div>
        </a>
    </div>
    
    <div class="nav-hexagon right">
        <a href="contact.html" class="hexagon">
            <div class="flex items-center justify-center h-full text-xs font-bold">COMMS</div>
        </a>
    </div>

    <!-- Main Content -->
    <div class="content-section">
        <!-- Title Section -->
        <div class="text-center mb-16">
            <h1 class="text-6xl md:text-8xl font-bold mb-6" style="font-family: 'Orbitron', monospace;">
                <span class="glitch-text" data-text="GHOST" id="mainTitle">GHOST</span>
                <br>
                <span class="glitch-text" data-text="ECHELON" style="color: var(--cyber-cyan);" id="mainSubtitle">ECHELON</span>
            </h1>
            <div class="text-xl md:text-2xl text-gray-300 mb-8" style="font-family: 'Orbitron', monospace;">
                TACTICAL SURVEILLANCE INTERFACE
            </div>
        </div>

        <!-- Surveillance Terminal -->
        <div class="terminal-container mb-16">
            <div class="scan-line"></div>
            <div class="grid md:grid-cols-3 gap-4">
                <div class="surveillance-feed cam-1" id="feed1">
                    <div class="feed-overlay"></div>
                    <div class="feed-info">CAM-01</div>
                    <div class="feed-status">● REC</div>
                </div>
                <div class="surveillance-feed cam-2" id="feed2">
                    <div class="feed-overlay"></div>
                    <div class="feed-info">CAM-02</div>
                    <div class="feed-status">● REC</div>
                </div>
                <div class="surveillance-feed cam-3" id="feed3">
                    <div class="feed-overlay"></div>
                    <div class="feed-info">CAM-03</div>
                    <div class="feed-status">● REC</div>
                </div>
            </div>
            <div class="mt-4 text-center">
                <div class="text-cyan-400 text-sm mb-2">SURVEILLANCE GRID: WINSTON-SALEM QUARANTINE ZONE</div>
                <div class="text-green-400 text-xs">MULTIPLE TARGETS DETECTED | THREAT ASSESSMENT: HIGH</div>
            </div>
        </div>

/* force live video to fill cyber frame */
.surveillance-feed video,
.surveillance-feed img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;        /* crop to fill, no distortion */
  pointer-events: none;     /* optional: user can't right-click */
}

        <!-- Mission Briefing -->
        <div class="mission-briefing mb-16">
            <h2 class="text-3xl font-bold mb-8" style="color: var(--cyber-cyan); font-family: 'Orbitron', monospace;">
                MISSION BRIEFING
            </h2>
            <div class="space-y-4 text-gray-300">
                <p>
                    <span class="text-cyan-400">CLASSIFIED INTEL:</span> A lone operative codenamed "GHOST" has been 
                    smuggled into Winston-Salem under military lockdown. Subject was inserted as a lifeless corpse 
                    and successfully revived using experimental neural interface technology.
                </p>
                <p>
                    <span class="text-green-400">MISSION PARAMETERS:</span> Operative has exactly 2 hours before 
                    cardiac failure to prevent deployment of a devastating weapon. Neural AI assistant "ARIA" 
                    providing tactical support through encrypted channels.
                </p>
                <p>
                    <span class="text-blue-400">THREAT ASSESSMENT:</span> Multiple hostile entities detected within 
                    quarantine zone. Surveillance indicates high-level conspiracy involving military enforcers 
                    and rogue AI systems.
                </p>
                <p class="text-cyan-400 font-bold mt-6">
                    SURVEILLANCE FOOTAGE AND INTEL AVAILABLE IN TACTICAL DATABASE.
                </p>
            </div>
        </div>

        <!-- Trailer Section -->
        <div class="mb-16">
            <h2 class="text-3xl font-bold text-center mb-8" style="color: var(--cyber-cyan); font-family: 'Orbitron', monospace;">
                TACTICAL FOOTAGE
            </h2>
            <div class="trailer-container">
                <div class="trailer-overlay" id="trailerOverlay">
                    <div class="play-button"></div>
                </div>
                <div class="aspect-video bg-black flex items-center justify-center" id="trailerContent">
                    <div class="text-center">
                        <div class="text-4xl mb-4">📹</div>
                        <div class="text-cyan-400">SURVEILLANCE FEED: OPERATION GHOST ECHELON</div>
                        <div class="text-gray-400 text-sm mt-2">CLASSIFIED FOOTAGE - AUTHORIZED PERSONNEL ONLY</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- System Status -->
        <div class="grid md:grid-cols-3 gap-8 mb-16">
            <div class="terminal-container text-center">
                <div class="text-3xl mb-4">🛡️</div>
                <div class="text-xl font-bold mb-2">DEFENSE GRID</div>
                <div class="text-green-400">OPERATIONAL</div>
                <div class="text-xs text-gray-400 mt-2">SHIELD INTEGRITY: 97%</div>
            </div>
            
            <div class="terminal-container text-center">
                <div class="text-3xl mb-4">🧠</div>
                <div class="text-xl font-bold mb-2">ARIA AI</div>
                <div class="text-green-400">ONLINE</div>
                <div class="text-xs text-gray-400 mt-2">NEURAL LINK: STABLE</div>
            </div>
            
            <div class="terminal-container text-center">
                <div class="text-3xl mb-4">📡</div>
                <div class="text-xl font-bold mb-2">COMMS ARRAY</div>
                <div class="text-green-400">ACTIVE</div>
                <div class="text-xs text-gray-400 mt-2">SIGNAL STRENGTH: 94%</div>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="relative z-10 py-8 px-6 border-t border-cyan-400 border-opacity-30">
        <div class="max-w-7xl mx-auto text-center">
            <div class="text-cyan-400 text-sm mb-2" style="font-family: 'Orbitron', monospace;">
                GHOST ECHELON - TACTICAL INTERFACE v2.1
            </div>
            <div class="text-gray-500 text-xs">
                CLASSIFIED MATERIAL - AUTHORIZED PERSONNEL ONLY<br>
                © 2025 GHOST ECHELON OPERATIONS - ALL RIGHTS RESERVED
            </div>
        </div>
    </footer>

    <script>
        // Military HUD Clock
        function updateZuluTime() {
            const now = new Date();
            const zuluTime = now.toISOString().substr(11, 8);
            const date = now.toISOString().substr(0, 10);
            
            document.getElementById('zuluTime').textContent = zuluTime + ' ZULU';
            document.getElementById('currentDate').textContent = date;
        }
        
        setInterval(updateZuluTime, 1000);
        updateZuluTime();
        
        // Loading Sequence
        window.addEventListener('load', () => {
            setTimeout(() => {
                const loading = document.getElementById('loadingSequence');
                loading.style.opacity = '0';
                loading.style.transition = 'opacity 1s ease-out';
                setTimeout(() => {
                    loading.style.display = 'none';
                }, 1000);
            }, 3000);
        });
        
        // Data Static (blinking codes)
        function createDataStatic() {
            const dataStatic = document.getElementById('dataStatic');
            const codes = [
                'WS-7742', 'SECTOR-7', 'GHOST-01', 'ARIA-ONLINE', 
                'TACTICAL-01', 'SURVEILLANCE', 'QUARANTINE', 'LOCKDOWN',
                'ECHELON-07', 'NEURAL-LINK', 'AI-CORE', 'THREAT-HIGH'
            ];
            
            setInterval(() => {
                if (Math.random() < 0.3) {
                    const static = document.createElement('div');
                    static.className = 'data-static';
                    static.style.left = Math.random() * window.innerWidth + 'px';
                    static.style.top = Math.random() * window.innerHeight + 'px';
                    static.textContent = codes[Math.floor(Math.random() * codes.length)];
                    
                    dataStatic.appendChild(static);
                    
                    setTimeout(() => {
                        if (static.parentNode) {
                            static.remove();
                        }
                    }, 3000);
                }
            }, 500);
        }
        
        createDataStatic();
        
        // Surveillance Feed Rotation
        function rotateSurveillanceFeeds() {
            const feeds = ['cam-1', 'cam-2', 'cam-3', 'cam-4', 'cam-5', 'cam-6'];
            const feedElements = [
                document.getElementById('feed1'),
                document.getElementById('feed2'),
                document.getElementById('feed3')
            ];
            
            setInterval(() => {
                feedElements.forEach(feed => {
                    if (Math.random() < 0.1) { // 10% chance every 5 seconds
                        const currentClass = Array.from(feed.classList).find(cls => cls.startsWith('cam-'));
                        if (currentClass) {
                            feed.classList.remove(currentClass);
                        }
                        
                        const newCam = feeds[Math.floor(Math.random() * feeds.length)];
                        feed.classList.add(newCam);
                        
                        // Add transition effect
                        feed.style.opacity = '0.3';
                        setTimeout(() => {
                            feed.style.opacity = '1';
                        }, 200);
                    }
                });
            }, 5000);
        }
        
        rotateSurveillanceFeeds();
        
        // Title Glitch Effect
        function setupTitleGlitch() {
            const title = document.getElementById('mainTitle');
            const subtitle = document.getElementById('mainSubtitle');
            
            setInterval(() => {
                if (Math.random() < 0.3) {
                    title.classList.add('glitching');
                    setTimeout(() => {
                        title.classList.remove('glitching');
                    }, 500);
                }
            }, 15000 + Math.random() * 10000);
            
            setInterval(() => {
                if (Math.random() < 0.3) {
                    subtitle.classList.add('glitching');
                    setTimeout(() => {
                        subtitle.classList.remove('glitching');
                    }, 500);
                }
            }, 12000 + Math.random() * 8000);
        }
        
        setupTitleGlitch();
        
        // Hexagon Navigation
        document.querySelectorAll('.hexagon').forEach(hex => {
            hex.addEventListener('mouseenter', () => {
                anime({
                    targets: hex,
                    scale: 1.1,
                    duration: 300,
                    easing: 'easeOutCubic'
                });
            });
            
            hex.addEventListener('mouseleave', () => {
                anime({
                    targets: hex,
                    scale: 1,
                    duration: 300,
                    easing: 'easeOutCubic'
                });
            });
            
            hex.addEventListener('click', (e) => {
                e.preventDefault();
                hex.classList.add('active');
                
                setTimeout(() => {
                    window.location.href = hex.href;
                }, 500);
            });
        });
        
        // Trailer Overlay
        document.getElementById('trailerOverlay').addEventListener('click', () => {
            const overlay = document.getElementById('trailerOverlay');
            const trailerContent = document.getElementById('trailerContent');
            
            anime({
                targets: overlay,
                opacity: [1, 0],
                duration: 500,
                complete: () => {
                    overlay.style.display = 'none';
                    
                    // Replace with actual trailer content
                    trailerContent.innerHTML = `
                        <div class="w-full h-full bg-black flex items-center justify-center">
                            <div class="text-center">
                                <div class="text-4xl mb-4 text-cyan-400">🎬</div>
                                <div class="text-cyan-400 font-bold mb-2">TRAILER PLAYING</div>
                                <div class="text-gray-400 text-sm">Operation Ghost Echelon - Classified Footage</div>
                                <div class="text-xs text-green-400 mt-2">AUDIO: TACTICAL FREQUENCY</div>
                            </div>
                        </div>
                    `;
                    
                    // Add video-like effects
                    setInterval(() => {
                        trailerContent.style.filter = 'brightness(1.2)';
                        setTimeout(() => {
                            trailerContent.style.filter = 'brightness(1)';
                        }, 100);
                    }, 3000);
                }
            });
        });
        
        // Cursor Effects - Hexagon outlines
        document.addEventListener('mousemove', (e) => {
            if (Math.random() < 0.4) {
                const hexOutline = document.createElement('div');
                hexOutline.style.cssText = `
                    position: fixed;
                    left: ${e.clientX - 4}px;
                    top: ${e.clientY - 4}px;
                    width: 8px;
                    height: 8px;
                    border: 1px solid var(--cyber-cyan);
                    clip-path: polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%);
                    pointer-events: none;
                    z-index: 9999;
                    opacity: 0.8;
                `;
                
                document.body.appendChild(hexOutline);
                
                anime({
                    targets: hexOutline,
                    scale: [1, 0],
                    opacity: [0.8, 0],
                    duration: 1000,
                    easing: 'easeOutCubic',
                    complete: () => {
                        hexOutline.remove();
                    }
                });
            }
        });
        
        // Initial Animations
        anime({
            targets: '.terminal-container',
            opacity: [0, 1],
            translateY: [20, 0],
            duration: 1000,
            delay: anime.stagger(200),
            easing: 'easeOutCubic'
        });
        
        anime({
            targets: '.mission-briefing',
            opacity: [0, 1],
            translateY: [30, 0],
            duration: 1200,
            delay: 500,
            easing: 'easeOutCubic'
        });
    </script>
</body>