<!doctype html>
<html lang="my">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
  <title>Anime Alpha | Burmese Fansub Database</title>
  <meta name="description"
    content="Anime Alpha – A comprehensive database of Burmese fansub anime series, episodes, and Telegram channels. Browse, search, and discover anime with Myanmar subtitles." />
  <meta property="og:title" content="Anime Alpha | Burmese Fansub Database" />
  <meta property="og:description"
    content="A comprehensive database of Burmese fansub anime series, episodes, and Telegram channels." />
  <meta property="og:type" content="website" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="theme-color" content="#020617" />
  <meta name="monetag" content="650fe1f7f4df024ec06a42bbfc0a14dd" />

  <!-- Google AdSense (Commented out for now) -->
  <!-- <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7482354319796206"
    crossorigin="anonymous"></script> -->

  <!-- Google tag (gtag.js) - Deferred to never block first contentful paint -->
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());
    gtag('config', 'G-NB56JTTFEL');

    window.addEventListener('load', function () {
      setTimeout(function () {
        var s = document.createElement('script');
        s.async = true;
        s.src = 'https://www.googletagmanager.com/gtag/js?id=G-NB56JTTFEL';
        document.head.appendChild(s);
      }, 1000);
    });
  </script>

  <!-- Favicon: Standard -->
  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />

  <!-- Favicon: Apple / iOS -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

  <!-- Web App Manifest (PWA icons handled via manifest) -->
  <link rel="manifest" href="/site.webmanifest" />

  <!-- Preconnect and DNS-prefetch hints for critical origins -->
  <link rel="preconnect" href="https://api.animealpha.net" crossorigin />
  <link rel="dns-prefetch" href="https://api.animealpha.net" />
  <link rel="preconnect" href="https://firestore.googleapis.com" crossorigin />
  <link rel="preconnect" href="https://animealpha-database.firebaseapp.com" />
  <link rel="preconnect" href="https://cdn.myanimelist.net" />
  <link rel="dns-prefetch" href="https://s4.anilist.co" />

  <!-- Critical immediate theme & language initialization script (0ms execution before CSS/JS) -->
  <script>
    (function () {
      try {
        var theme = localStorage.getItem('teleanime_active_theme') || 'dark';
        var lang = localStorage.getItem('teleanime_language') || 'my';
        var root = document.documentElement;
        root.setAttribute('data-theme', theme);
        root.lang = lang;
        if (theme === 'light') {
          root.classList.remove('dark');
          root.classList.add('light');
          root.style.backgroundColor = '#f1f5f9';
          root.style.colorScheme = 'light';
        } else if (theme === 'oled-black') {
          root.classList.add('dark');
          root.style.backgroundColor = '#000000';
          root.style.colorScheme = 'dark';
        } else if (theme === 'sakura') {
          root.classList.add('dark');
          root.style.backgroundColor = '#150d14';
          root.style.colorScheme = 'dark';
        } else if (theme === 'cyberpunk') {
          root.classList.add('dark');
          root.style.backgroundColor = '#090514';
          root.style.colorScheme = 'dark';
        } else if (theme === 'eva') {
          root.classList.add('dark');
          root.style.backgroundColor = '#0a0d14';
          root.style.colorScheme = 'dark';
        } else if (theme === 'tokyo-midnight') {
          root.classList.add('dark');
          root.style.backgroundColor = '#060b17';
          root.style.colorScheme = 'dark';
        } else {
          root.classList.add('dark');
          root.classList.remove('light');
          root.style.backgroundColor = '#020617';
          root.style.colorScheme = 'dark';
        }
      } catch (e) { }
    })();
  </script>

  <!-- Critical first-paint inline styles to prevent FOUC & white flash -->
  <style>
    :root {
      --bg-primary: #020617;
      --bg-secondary: #0f172a;
      --bg-tertiary: #1e293b;
      --text-primary: #f8fafc;
      --text-secondary: #cbd5e1;
      --text-muted: #64748b;
      --accent-primary: #38bdf8;
      --border-color: #1e293b;
    }

    :root.light,
    [data-theme="light"] {
      --bg-primary: #f1f5f9;
      --bg-secondary: #ffffff;
      --bg-tertiary: #e2e8f0;
      --text-primary: #090d16;
      --text-secondary: #1e293b;
      --text-muted: #475569;
      --accent-primary: #0284c7;
      --border-color: #cbd5e1;
    }

    html,
    body {
      background-color: #020617;
      background-color: var(--bg-primary, #020617);
      color: #f8fafc;
      color: var(--text-primary, #f8fafc);
      margin: 0;
      padding: 0;
      min-height: 100vh;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      color-scheme: dark;
    }

    #root {
      min-height: 100vh;
      background-color: inherit;
    }

    @keyframes skelPulse {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0.35;
      }
    }

    @keyframes spinRing {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes pulseGlow {

      0%,
      100% {
        transform: scale(1);
        opacity: 0.85;
        filter: drop-shadow(0 0 15px rgba(56, 189, 248, 0.5));
      }

      50% {
        transform: scale(1.04);
        opacity: 1;
        filter: drop-shadow(0 0 28px rgba(56, 189, 248, 0.9));
      }
    }

    @keyframes beamSweep {
      0% {
        transform: translateX(-100%);
      }

      50%,
      100% {
        transform: translateX(200%);
      }
    }

    @keyframes statusBlink {

      0%,
      100% {
        opacity: 1;
        transform: scale(1);
      }

      50% {
        opacity: 0.3;
        transform: scale(0.85);
      }
    }

    .skel-pulse {
      animation: skelPulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    .spin-ring {
      animation: spinRing 3.5s linear infinite;
    }

    .pulse-glow {
      animation: pulseGlow 2.2s ease-in-out infinite;
    }

    .beam-sweep {
      animation: beamSweep 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    .status-blink {
      animation: statusBlink 1.4s ease-in-out infinite;
    }
  </style>
  <script type="module" crossorigin src="/assets/index-DWwdBzE0.js"></script>
  <!-- Non-render-blocking stylesheet with high-priority preload -->
  <link rel="preload" as="style" href="/assets/index-C33HOoyv.css" crossorigin />
  <link rel="stylesheet" href="/assets/index-C33HOoyv.css" media="print" onload="this.media='all'" crossorigin />
  <noscript><link rel="stylesheet" href="/assets/index-C33HOoyv.css" /></noscript>
</head>

<body style="background-color: #020617; color: #f8fafc;">
  <!-- React App Root Container -->
  <div id="root"></div>

  <!-- Single Unified App Launch Screen Overlay (Fades out directly to loaded database) -->
  <div id="app-launch-screen"
    style="position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; background: radial-gradient(circle at center, rgba(15, 23, 42, 0.92) 0%, rgba(2, 6, 23, 0.98) 100%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);">
    <div
      style="max-width: 380px; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; background: rgba(15, 23, 42, 0.85); border: 1px solid rgba(56, 189, 248, 0.25); border-radius: 24px; padding: 32px 24px; box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.7), 0 0 35px rgba(56, 189, 248, 0.15);">

      <!-- Animated Logo Core with Web App Favicon -->
      <div
        style="position: relative; width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px;">
        <!-- Outer Cyber Spinning Ring -->
        <div class="spin-ring"
          style="position: absolute; inset: 0; border-radius: 50%; border: 2px dashed rgba(56, 189, 248, 0.45); border-top-color: #38bdf8; border-right-color: #818cf8;">
        </div>

        <!-- Secondary Pulse Glow Aura -->
        <div
          style="position: absolute; inset: 6px; border-radius: 50%; background: radial-gradient(circle, rgba(56, 189, 248, 0.25) 0%, rgba(129, 140, 248, 0.05) 70%, transparent 100%);">
        </div>

        <!-- Central App Favicon / Icon -->
        <div class="pulse-glow"
          style="width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: rgba(15, 23, 42, 0.95); border: 1.5px solid rgba(56, 189, 248, 0.4); box-shadow: 0 8px 24px rgba(56, 189, 248, 0.45);">
          <img src="/apple-touch-icon.png" alt="Anime Alpha Logo"
            style="width: 100%; height: 100%; object-fit: cover; border-radius: 14px;"
            onerror="this.onerror=null; this.src='/favicon-32x32.png';" />
        </div>
      </div>

      <!-- Brand Title -->
      <h1
        style="margin: 0 0 4px 0; font-size: 22px; font-weight: 800; letter-spacing: -0.5px; background: linear-gradient(90deg, #f8fafc 0%, #38bdf8 50%, #c084fc 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: system-ui, -apple-system, sans-serif;">
        Anime Alpha
      </h1>
      <p style="margin: 0 0 22px 0; font-size: 11.5px; color: #94a3b8; font-weight: 500; letter-spacing: 0.2px;">
        မြန်မာ Anime Database
      </p>

      <!-- Flowing Cyber Neon Progress Bar -->
      <div
        style="width: 100%; height: 6px; background: rgba(30, 41, 59, 0.9); border-radius: 999px; overflow: hidden; position: relative; margin-bottom: 16px; border: 1px solid rgba(56, 189, 248, 0.15);">
        <div class="beam-sweep"
          style="position: absolute; top: 0; left: 0; bottom: 0; width: 60%; background: linear-gradient(90deg, transparent 0%, #38bdf8 50%, #c084fc 100%); border-radius: 999px; box-shadow: 0 0 12px #38bdf8;">
        </div>
      </div>

      <!-- Dynamic Status Message Indicator -->
      <div
        style="display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 11.5px; color: #cbd5e1; font-family: system-ui, -apple-system, sans-serif;">
        <div class="status-blink"
          style="width: 7px; height: 7px; border-radius: 50%; background: #38bdf8; box-shadow: 0 0 8px #38bdf8;"></div>
        <span id="loader-status-text" style="font-weight: 500;">ဒေတာဘေ့စ် စတင် ချိတ်ဆက်နေပါသည်...</span>
      </div>
    </div>
  </div>

  <!-- Adaptive 3G Status Message Script -->
  <script>
    (function () {
      try {
        var isMm = (localStorage.getItem('teleanime_language') || 'my') === 'my';
        var statusEl = document.getElementById('loader-status-text');
        if (!statusEl) return;

        setTimeout(function () {
          if (document.getElementById('loader-status-text')) {
            statusEl.textContent = isMm ? 'အော့ဖ်လိုင်း ကက်ရှ်နှင့် ဒေတာများကို ရယူနေပါသည်...' : 'Syncing Anime Catalog...';
          }
        }, 1800);

        setTimeout(function () {
          if (document.getElementById('loader-status-text')) {
            statusEl.textContent = isMm ? 'လိုင်းနှေးနေသဖြင့် အမြန်ဆုံး စနစ်ဖြင့် ဖွင့်လှစ်နေပါသည်...' : 'Optimizing for Slow Connection...';
          }
        }, 3800);
      } catch (e) { }
    })();
  </script>
</body>

</html>