Cyberpunk Animated Login Terminal

<div class="relative w-full h-[900px] bg-[#050505] text-[#EAEAEA] font-mono overflow-hidden select-none"
  style="--c-accent: #00FF41; --c-grid: rgba(255, 255, 255, 0.08); --font-mono: 'SF Mono', 'Space Mono', monospace;">
  <!-- Dependencies -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
  <script src="https://cdn.tailwindcss.com"></script>

  <!-- Scanline Overlay -->
  <div class="pointer-events-none absolute inset-0 z-50 w-full h-full"
    style="background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.1) 50%); background-size: 100% 4px;">
  </div>

  <!-- Cursor Elements -->
  <div id="cursor-ring"
    class="fixed top-0 left-0 w-10 h-10 border border-white/40 rounded-full pointer-events-none z-[100] -translate-x-1/2 -translate-y-1/2 mix-blend-difference">
  </div>
  <div id="cursor-dot"
    class="fixed top-0 left-0 w-1 h-1 bg-white rounded-full pointer-events-none z-[100] -translate-x-1/2 -translate-y-1/2">
  </div>

  <!-- UI Frame Layer -->
  <div class="absolute inset-0 z-10 grid grid-cols-[60px_1fr_60px] grid-rows-[60px_1fr_60px] pointer-events-none">
    <!-- Grid Lines -->
    <div class="absolute top-[60px] left-0 w-full h-[1px] bg-[var(--c-grid)]"></div>
    <div class="absolute bottom-[60px] left-0 w-full h-[1px] bg-[var(--c-grid)]"></div>
    <div class="absolute left-[60px] top-0 h-full w-[1px] bg-[var(--c-grid)]"></div>
    <div class="absolute right-[60px] top-0 h-full w-[1px] bg-[var(--c-grid)]"></div>

    <!-- Crosshairs -->
    <div
      class="absolute top-[55px] left-[55px] w-2.5 h-2.5 before:content-[''] before:absolute before:top-1/2 before:w-full before:h-[1px] before:bg-[#EAEAEA] after:content-[''] after:absolute after:left-1/2 after:h-full after:w-[1px] after:bg-[#EAEAEA]">
    </div>
    <div
      class="absolute top-[55px] right-[55px] w-2.5 h-2.5 before:content-[''] before:absolute before:top-1/2 before:w-full before:h-[1px] before:bg-[#EAEAEA] after:content-[''] after:absolute after:left-1/2 after:h-full after:w-[1px] after:bg-[#EAEAEA]">
    </div>
    <div
      class="absolute bottom-[55px] left-[55px] w-2.5 h-2.5 before:content-[''] before:absolute before:top-1/2 before:w-full before:h-[1px] before:bg-[#EAEAEA] after:content-[''] after:absolute after:left-1/2 after:h-full after:w-[1px] after:bg-[#EAEAEA]">
    </div>
    <div
      class="absolute bottom-[55px] right-[55px] w-2.5 h-2.5 before:content-[''] before:absolute before:top-1/2 before:w-full before:h-[1px] before:bg-[#EAEAEA] after:content-[''] after:absolute after:left-1/2 after:h-full after:w-[1px] after:bg-[#EAEAEA]">
    </div>

    <!-- Meta Header -->
    <div class="col-start-2 row-start-1 flex justify-between items-center px-5 text-[10px] uppercase tracking-[0.15em]">
      <div class="flex items-center gap-4">
        <span class="font-bold">AUTH_GATEWAY</span>
        <span class="text-[#555]">PROT.SEQ.99</span>
      </div>
      <div>STATION / SECURE_ACCESS / NOD_01</div>
      <div id="time-display" class="text-[#555] tabular-nums">00:00:00 [GMT]</div>
    </div>

    <!-- Meta Sides -->
    <div
      class="col-start-1 row-start-2 flex items-center justify-center rotate-180 text-[10px] text-[#555] uppercase tracking-[0.15em]"
      style="writing-mode: vertical-rl;">
      ENCRYPTION_LAYER: ACTIVE [AES-256]
    </div>
    <div
      class="col-start-3 row-start-2 flex items-center justify-center text-[10px] text-[#555] uppercase tracking-[0.15em]"
      style="writing-mode: vertical-rl;">
      TERMINAL_ID: SPATIAL_WAVE_04
    </div>

    <!-- Meta Footer -->
    <div class="col-start-2 row-start-3 flex justify-between items-center px-5 text-[10px] uppercase tracking-[0.15em]">
      <div class="flex items-center">
        <div class="w-1.5 h-1.5 bg-[var(--c-accent)] rounded-full mr-3 shadow-[0_0_12px_var(--c-accent)] animate-pulse">
        </div>
        <span>SYSTEM_READY</span>
      </div>
      <div id="load-percent" class="text-[#555]">99% / SYNCED</div>
      <div class="w-[100px]"></div>
    </div>
  </div>

  <!-- Main Content: Login Logic -->
  <div class="absolute inset-0 flex flex-col items-center justify-center z-20 gap-8">
    <!-- Decorative Waveform (Smaller) -->
    <div id="visualizer" class="flex items-center justify-between gap-1 w-[300px] h-[40px]">
      <!-- Bars injected by JS -->
    </div>

    <div class="w-[400px] p-8 border border-white/10 bg-black/40 backdrop-blur-sm relative overflow-hidden">
      <!-- Animated Scan Line for Form -->
      <div
        class="absolute left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-[#EAEAEA] to-transparent opacity-20"
        id="form-scanner"></div>

      <h1 class="text-[12px] tracking-[0.4em] mb-8 text-center border-b border-white/10 pb-4 uppercase">
        Identity_Verification</h1>

      <form class="space-y-6 pointer-events-auto" onsubmit="event.preventDefault()">
        <div class="space-y-2">
          <label class="text-[9px] text-[#555] uppercase tracking-widest block">/ Identity_Key</label>
          <input type="text" class="w-full bg-transparent border border-[#555] p-3 text-[11px] focus:outline-none focus:border-[var(--c-accent)] text-[#EAEAEA] transition-colors tracking-widest uppercase" placeholder="USER_ID">
        </div>

        <div class="space-y-2">
          <label class="text-[9px] text-[#555] uppercase tracking-widest block">/ Access_Phrase</label>
          <input type="password" class="w-full bg-transparent border border-[#555] p-3 text-[11px] focus:outline-none focus:border-[var(--c-accent)] text-[#EAEAEA] transition-colors tracking-widest" placeholder="••••••••">
        </div>

        <button class="group relative w-full border border-[var(--c-accent)] py-4 mt-4 overflow-hidden transition-all hover:bg-[var(--c-accent)]/10">
                    <span class="relative z-10 text-[10px] tracking-[0.3em] text-[var(--c-accent)] group-hover:text-white transition-colors">AUTHENTICATE_EXECUTION</span>
                    <div class="absolute inset-0 translate-y-full group-hover:translate-y-0 bg-[var(--c-accent)]/20 transition-transform duration-300"></div>
                </button>

        <div class="pt-4 flex justify-between text-[8px] text-[#555] uppercase tracking-tighter">
          <a href="#" class="hover:text-[var(--c-accent)] transition-colors">Forgot_Phrase?</a>
          <a href="#" class="hover:text-[var(--c-accent)] transition-colors">Request_Access</a>
        </div>
      </form>
    </div>

    <div class="text-[9px] text-[#555] tracking-[0.2em] animate-pulse uppercase">
      Waiting for spatial handshake...
    </div>
  </div>

  <script>
    // Time Display Logic
        const elTime = document.getElementById('time-display');
        setInterval(() => {
            const now = new Date();
            elTime.innerText = now.toISOString().split('T')[1].split('.')[0] + " [GMT]";
        }, 1000);

        // Custom Cursor Logic
        window.addEventListener('mousemove', (e) => {
            gsap.to('#cursor-ring', { x: e.clientX, y: e.clientY, duration: 0.3, ease: 'power2.out' });
            gsap.to('#cursor-dot', { x: e.clientX, y: e.clientY, duration: 0.1 });
        });

        // Waveform Visualizer Logic
        const visualizer = document.getElementById('visualizer');
        const barCount = 40;
        const bars = [];
        for(let i=0; i<barCount; i++) {
            const bar = document.createElement('div');
            bar.style.cssText = "flex: 1; background: #EAEAEA; height: 2px; min-height: 2px; opacity: 0.3;";
            visualizer.appendChild(bar);
            bars.push(bar);
        }

        function animateWave() {
            const time = Date.now() * 0.005;
            bars.forEach((bar, i) => {
                const freq = 0.2;
                const h = Math.sin(time + i * freq) * 100 + 20;
                gsap.to(bar, { 
                    height: Math.max(2, h) + '%', 
                    opacity: 0.1 + (h/100) * 0.5,
                    duration: 0.1,
                    overwrite: true 
                });
            });
            requestAnimationFrame(animateWave);
        }
        animateWave();

        // Form Scanner Animation
        gsap.to('#form-scanner', {
            top: '100%',
            duration: 3,
            repeat: -1,
            ease: "none"
        });

        // System Progress Sim
        const percentEl = document.getElementById('load-percent');
        let progress = 94;
        const updateProgress = () => {
            if (progress < 100) {
                progress += Math.random() * 0.5;
                if (progress > 100) progress = 100;
                percentEl.innerText = `${Math.floor(progress)}% / SYNCED`;
                setTimeout(updateProgress, 500 + Math.random() * 1000);
            }
        };
        updateProgress();
  </script>
</div>