Futuristic System Portal Login Card

<div
  class="relative min-h-screen w-full bg-[#0a0a0a] flex items-center justify-center overflow-hidden antialiased selection:bg-amber-500/20 text-slate-200 font-sans">
  <!-- Dependency Loader -->
  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>

  <!-- Ambient Background Glow -->
  <div
    class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] rounded-full pointer-events-none transition-opacity duration-1000"
    style="background: radial-gradient(circle, rgba(245,158,11,0.06) 0%, rgba(10,10,10,0) 60%); filter: blur(60px);">
  </div>

  <!-- Animated Circuit Board & Laser SVG Background -->
  <div
    class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none opacity-50 scale-150 sm:scale-100 transition-transform duration-1000">
    <svg width="280" height="320" viewBox="0 0 280 320" fill="none" xmlns="http://www.w3.org/2000/svg"
      class="overflow-visible">
      <g style="filter: drop-shadow(0 0 4px #F59E0B);">
        <path d="M140 -2000V2000" stroke="#F59E0B" stroke-width="0.3" stroke-dasharray="12 12" opacity="0.3">
          <animate attributeName="stroke-dashoffset" from="24" to="0" dur="0.6s" repeatCount="indefinite" />
        </path>
      </g>
      <path d="M140 -2000V2000" stroke="#FFFBEB" stroke-width="0.4" opacity="0.4">
        <animate attributeName="opacity" values="0.1;0.4;0.1" dur="1.2s" repeatCount="indefinite" />
      </path>
      <path d="M140 -2000V40L155 55V2000" stroke="#D97706" stroke-width="0.5" stroke-linecap="round"
        stroke-linejoin="round" opacity="0.2" />
      <path d="M120 -2000V45L105 60V2000" stroke="#D97706" stroke-width="0.5" stroke-linecap="round"
        stroke-linejoin="round" opacity="0.2" />
      <path d="M160 -2000V35L185 60V2000" stroke="#D97706" stroke-width="0.5" stroke-linecap="round"
        stroke-linejoin="round" opacity="0.2" />
      <path d="M100 -2000V50L80 70V2000" stroke="#D97706" stroke-width="0.5" stroke-linecap="round"
        stroke-linejoin="round" opacity="0.2" />
      <path d="M140 -2000V40L155 55V2000" stroke="#FDE68A" stroke-width="0.5" stroke-dasharray="4 12" opacity="0.6">
        <animate attributeName="stroke-dashoffset" from="16" to="0" dur="1s" repeatCount="indefinite" />
      </path>
      <path d="M120 -2000V45L105 60V2000" stroke="#FDE68A" stroke-width="0.5" stroke-dasharray="4 12" opacity="0.6">
        <animate attributeName="stroke-dashoffset" from="16" to="0" dur="1.5s" repeatCount="indefinite" />
      </path>
      <circle r="1.5" fill="#FFFBEB" style="filter: drop-shadow(0 0 4px #FDE68A);">
        <animateMotion dur="25s" repeatCount="indefinite" path="M160 -2000V35L185 60V2000" />
        <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.9;1" dur="25s" repeatCount="indefinite" />
      </circle>
      <circle r="1.5" fill="#FFFBEB" style="filter: drop-shadow(0 0 4px #FDE68A);">
        <animateMotion dur="31s" repeatCount="indefinite" path="M100 -2000V50L80 70V2000" />
        <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.9;1" dur="31s" repeatCount="indefinite" />
      </circle>
      <circle r="1.5" fill="#FFFBEB" style="filter: drop-shadow(0 0 4px #FDE68A);">
        <animateMotion dur="22.5s" repeatCount="indefinite" path="M140 -2000V40L155 55V2000" />
        <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.9;1" dur="22.5s" repeatCount="indefinite" />
      </circle>
      <circle r="1.5" fill="#FFFBEB" style="filter: drop-shadow(0 0 4px #FDE68A);">
        <animateMotion dur="37.5s" repeatCount="indefinite" path="M120 -2000V45L105 60V2000" />
        <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.9;1" dur="37.5s" repeatCount="indefinite" />
      </circle>
      <circle cx="155" cy="280" r="2" fill="#D97706">
        <animate attributeName="r" values="1.5;3;1.5" dur="1.5s" repeatCount="indefinite" />
        <animate attributeName="fill" values="#D97706;#FFFBEB;#D97706" dur="1.5s" repeatCount="indefinite" />
      </circle>
      <circle cx="105" cy="240" r="2" fill="#D97706">
        <animate attributeName="r" values="1.5;3;1.5" dur="1.2s" repeatCount="indefinite" />
        <animate attributeName="fill" values="#D97706;#FFFBEB;#D97706" dur="1.2s" repeatCount="indefinite" />
      </circle>
    </svg>
  </div>

  <!-- Login Card -->
  <main class="relative z-10 w-full max-w-sm mx-4 rounded-[32px] p-[2px]"
    style="background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.01) 100%); box-shadow: 0 24px 48px -12px rgba(0,0,0,1);">

    <div class="bg-[#0f0f0f] rounded-[30px] p-8 relative overflow-hidden"
      style="box-shadow: inset 0 1px 0px rgba(255,255,255,0.05), inset 0 0 0 1px rgba(255,255,255,0.02);">

      <!-- Header -->
      <div class="flex flex-col items-center mb-10">
        <div class="w-12 h-12 rounded-2xl mb-4 flex items-center justify-center"
          style="background: linear-gradient(180deg, #262626 0%, #0a0a0a 100%); box-shadow: inset 0 1px 1px rgba(255,255,255,0.1), 0 4px 12px rgba(0,0,0,0.5);">
          <iconify-icon icon="solar:shield-keyhole-linear"
            class="text-amber-500 text-2xl drop-shadow-[0_0_8px_rgba(245,158,11,0.5)]"></iconify-icon>
        </div>
        <h1 class="text-2xl font-medium tracking-tight text-white mb-1">System Portal</h1>
        <p class="text-xs text-white/40 font-light">Establish a secure connection</p>
      </div>

      <!-- Form -->
      <form class="flex flex-col gap-5" onsubmit="event.preventDefault()">
        <!-- Operator ID -->
        <div class="flex flex-col gap-2">
          <label for="operator-id" class="text-xs font-medium text-white/50 uppercase tracking-wider ml-1">Operator ID</label>
          <div class="relative group">
            <iconify-icon icon="solar:user-linear"
              class="absolute left-4 top-1/2 -translate-y-1/2 text-white/30 group-focus-within:text-amber-500/70 transition-colors"></iconify-icon>
            <input type="text" id="operator-id" placeholder="Enter identification"
                               class="w-full bg-[#050505] text-sm text-white/90 rounded-xl py-3.5 pl-11 pr-4 outline-none transition-all placeholder:text-white/20 focus:ring-1 focus:ring-amber-500/50 border-none"
                               style="box-shadow: inset 0 2px 6px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(255,255,255,0.04);">
          </div>
        </div>

        <!-- Passcode -->
        <div class="flex flex-col gap-2">
          <label for="passcode" class="text-xs font-medium text-white/50 uppercase tracking-wider ml-1">Passcode</label>
          <div class="relative group">
            <iconify-icon icon="solar:lock-password-linear"
              class="absolute left-4 top-1/2 -translate-y-1/2 text-white/30 group-focus-within:text-amber-500/70 transition-colors"></iconify-icon>
            <input type="password" id="passcode" placeholder="••••••••"
                               class="w-full bg-[#050505] text-sm text-white/90 rounded-xl py-3.5 pl-11 pr-4 outline-none transition-all placeholder:text-white/20 focus:ring-1 focus:ring-amber-500/50 border-none"
                               style="box-shadow: inset 0 2px 6px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(255,255,255,0.04);">
          </div>
        </div>

        <!-- Options -->
        <div class="flex items-center justify-between mt-1 mb-4">
          <label class="flex items-center gap-2.5 cursor-pointer group">
                        <div class="relative flex items-center justify-center w-4 h-4 rounded bg-[#050505] transition-colors"
                             style="box-shadow: inset 0 1px 3px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(255,255,255,0.08);">
                            <input type="checkbox" class="peer absolute opacity-0 w-full h-full cursor-pointer">
                            <iconify-icon icon="solar:check-linear" class="text-xs text-amber-500 opacity-0 peer-checked:opacity-100 transition-opacity drop-shadow-[0_0_4px_rgba(245,158,11,0.5)]"></iconify-icon>
                        </div>
                        <span class="text-xs text-white/50 group-hover:text-white/70 transition-colors">Maintain session</span>
                    </label>
          <a href="#" class="text-xs text-amber-500/70 hover:text-amber-400 transition-colors">Recover access</a>
        </div>

        <!-- Skeuomorphic Button Component -->
        <div class="relative group cursor-pointer z-10 mt-2">
          <div
            class="absolute -inset-4 rounded-full opacity-20 group-hover:opacity-40 transition-opacity duration-700 blur-2xl pointer-events-none"
            style="background: linear-gradient(180deg, #FDE68A 0%, #D97706 100%);">
          </div>

          <div
            class="relative rounded-[30px] p-[3px] transition-transform duration-300 ease-out group-active:scale-[0.98] z-10 overflow-hidden"
            style="background: linear-gradient(180deg, #262626 0%, #0a0a0a 100%); box-shadow: 0 12px 24px -6px rgba(0,0,0,0.8);">

            <div
              class="absolute top-1/2 left-1/2 w-[400px] h-[400px] -translate-x-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none animate-spin z-0"
              style="background: conic-gradient(from 0deg, transparent 70%, rgba(245, 158, 11, 0.6) 85%, rgba(253, 230, 138, 1) 100%);">
            </div>

            <div class="absolute inset-0 rounded-[30px] pointer-events-none z-10"
              style="box-shadow: inset 0 6px 12px rgba(0,0,0,0.8), inset 0 1px 0px rgba(255,255,255,0.06), inset 0 0 0 1px rgba(255,255,255,0.02), inset 0 -1px 2px rgba(0,0,0,0.8);">
            </div>

            <button type="submit" class="relative z-20 flex items-center justify-center gap-2.5 rounded-[27px] px-8 py-3.5 w-full h-full outline-none border-none"
                                style="background: linear-gradient(180deg, #FCD34D 0%, #D97706 100%);
                                       box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), inset 0 -3px 6px rgba(180, 83, 9, 0.5), inset 0 -1px 2px rgba(120, 53, 15, 0.7), inset 0 0 0 1px rgba(255,255,255,0.1), 0 6px 12px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4); cursor: pointer;">
                            <span class="text-[#381E02] font-medium text-sm drop-shadow-sm" style="text-shadow: 0 1px 0 rgba(255,255,255,0.25);">
                                Authenticate
                            </span>
                            <iconify-icon icon="solar:login-2-linear" class="text-[#381E02] text-base drop-shadow-sm" style="filter: drop-shadow(0 1px 0 rgba(255,255,255,0.25)); stroke-width: 1.5;"></iconify-icon>
                        </button>
          </div>
        </div>
      </form>
    </div>
  </main>
</div>