<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Asgard Bot Dashboard</title>
    <link rel="icon" type="image/webp" href="/asgard-logo.webp" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
    <style>
      /* Initial loading screen - shows while JS loads */
      #initial-loader {
        position: fixed;
        inset: 0;
        background: hsl(240, 10%, 4%);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
      }

      /* Runic Dots - ASGARD in Elder Futhark */
      .runic-dots {
        display: flex;
        align-items: flex-end;
        gap: 0.5rem;
      }

      .runic-dots span {
        font-size: 2rem;
        font-weight: bold;
        color: rgba(251, 191, 36, 0.4);
        animation: rune-bounce 2.5s ease-in-out infinite;
      }

      .runic-dots span:nth-child(1) { animation-delay: 0s; }
      .runic-dots span:nth-child(2) { animation-delay: 0.2s; }
      .runic-dots span:nth-child(3) { animation-delay: 0.4s; }
      .runic-dots span:nth-child(4) { animation-delay: 0.6s; }
      .runic-dots span:nth-child(5) { animation-delay: 0.8s; }
      .runic-dots span:nth-child(6) { animation-delay: 1s; }

      @keyframes rune-bounce {
        0%, 60%, 100% {
          transform: translateY(0);
          opacity: 0.4;
          text-shadow: 0 0 0px rgba(251, 191, 36, 0);
        }
        30% {
          transform: translateY(-10px);
          opacity: 1;
          text-shadow:
            0 0 20px rgba(251, 191, 36, 1),
            0 0 40px rgba(251, 191, 36, 0.8),
            0 0 60px rgba(251, 191, 36, 0.4);
        }
      }

      /* Respect user's motion preferences */
      @media (prefers-reduced-motion: reduce) {
        .runic-dots span {
          animation: none;
        }
      }

      /* Hide once React mounts */
      #root:not(:empty) ~ #initial-loader {
        display: none;
      }
    </style>
    <script type="module" crossorigin src="/assets/index-CS9_xFlY.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/admin-BqxvyusM.js">
    <link rel="stylesheet" crossorigin href="/assets/index-DuQDfjfc.css">
  </head>
  <body>
    <div id="root"></div>

    <!-- Initial loading screen (removed when React mounts) -->
    <div id="initial-loader">
      <div class="runic-dots">
        <span>ᚨ</span>
        <span>ᛊ</span>
        <span>ᚷ</span>
        <span>ᚨ</span>
        <span>ᚱ</span>
        <span>ᛞ</span>
      </div>
    </div>

  <!-- Cloudflare Pages Analytics --><script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "77abbade86ca4746a62fec47c8a34ac7"}'></script><!-- Cloudflare Pages Analytics --></body>
</html>
