<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    
    <!-- DNS prefetch for faster external resource loading -->
    <link rel="dns-prefetch" href="https://fonts.googleapis.com" />
    <link rel="dns-prefetch" href="https://fonts.gstatic.com" />
    <link rel="dns-prefetch" href="https://pub-fb67aff2e4f241a3ac45a83f2ea58d32.r2.dev" />
    
    <!-- Preconnect to critical origins -->
    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://pub-fb67aff2e4f241a3ac45a83f2ea58d32.r2.dev" crossorigin />
    
    <!-- Preload critical resources -->
    <link rel="modulepreload" href="data:application/octet-stream;base64,aW1wb3J0IHsgY3JlYXRlUm9vdCB9IGZyb20gInJlYWN0LWRvbS9jbGllbnQiOwppbXBvcnQgeyBCcm93c2VyUm91dGVyIH0gZnJvbSAicmVhY3Qtcm91dGVyLWRvbSI7CmltcG9ydCBBcHAgZnJvbSAiLi9BcHAiOwppbXBvcnQgeyBDYXJ0UHJvdmlkZXIgfSBmcm9tICIuL2NvbnRleHQvQ2FydENvbnRleHQiOwppbXBvcnQgIi4vaW5kZXguY3NzIjsKCi8vIEdldCByb290IGVsZW1lbnQgd2l0aCBlcnJvciBoYW5kbGluZwpjb25zdCByb290RWxlbWVudCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJyb290Iik7CmlmICghcm9vdEVsZW1lbnQpIHsKICB0aHJvdyBuZXcgRXJyb3IoJ1Jvb3QgZWxlbWVudCBub3QgZm91bmQhJyk7Cn0KCi8vIFJlbmRlciB0aGUgYXBwIEZJUlNUIChtb3N0IGNyaXRpY2FsKQpjcmVhdGVSb290KHJvb3RFbGVtZW50KS5yZW5kZXIoCiAgPEJyb3dzZXJSb3V0ZXI+CiAgICA8Q2FydFByb3ZpZGVyPgogICAgICA8QXBwIC8+CiAgICA8L0NhcnRQcm92aWRlcj4KICA8L0Jyb3dzZXJSb3V0ZXI+Cik7CgovLyBHbG9iYWwgZXJyb3IgaGFuZGxlciAobm9uLWJsb2NraW5nKQp3aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcignZXJyb3InLCAoZXZlbnQpID0+IHsKICBjb25zb2xlLmVycm9yKCdVbmNhdWdodCBlcnJvcjonLCBldmVudC5lcnJvcik7Cn0pOwoKd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoJ3VuaGFuZGxlZHJlamVjdGlvbicsIChldmVudCkgPT4gewogIGNvbnNvbGUuZXJyb3IoJ1VuaGFuZGxlZCByZWplY3Rpb246JywgZXZlbnQucmVhc29uKTsKfSk7CgovLyBSZWdpc3RlciBzZXJ2aWNlIHdvcmtlciBBRlRFUiByZW5kZXIgKG5vbi1ibG9ja2luZykKaWYgKCdzZXJ2aWNlV29ya2VyJyBpbiBuYXZpZ2F0b3IgJiYgaW1wb3J0Lm1ldGEuZW52LlBST0QpIHsKICB3aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcignbG9hZCcsICgpID0+IHsKICAgIG5hdmlnYXRvci5zZXJ2aWNlV29ya2VyCiAgICAgIC5yZWdpc3RlcignL3N3LmpzJykKICAgICAgLnRoZW4oKHJlZ2lzdHJhdGlvbikgPT4gewogICAgICAgIGNvbnNvbGUubG9nKCdTVyByZWdpc3RlcmVkOicsIHJlZ2lzdHJhdGlvbi5zY29wZSk7CiAgICAgIH0pCiAgICAgIC5jYXRjaCgoZXJyb3IpID0+IHsKICAgICAgICBjb25zb2xlLmVycm9yKCdTVyByZWdpc3RyYXRpb24gZmFpbGVkOicsIGVycm9yKTsKICAgICAgfSk7CiAgfSk7Cn0K" />
    <link rel="preload" href="https://pub-fb67aff2e4f241a3ac45a83f2ea58d32.r2.dev/Abovethefold/BG-Backlayer2.png" as="image" />
    <link rel="preload" href="https://pub-fb67aff2e4f241a3ac45a83f2ea58d32.r2.dev/Abovethefold/Pegasus.png" as="image" />
    
    <title>Angelspeak</title>
    
    <!-- Inline critical CSS for instant paint -->
    <style>
      /* Critical above-the-fold styles */
      body { margin: 0; background: #0d0c0b; color: white; font-family: system-ui, -apple-system, sans-serif; }
      #root { min-height: 100vh; background: #0d0c0b; }
      /* Prevent layout shift */
      img { display: block; max-width: 100%; height: auto; }
      /* Mobile viewport fix */
      @media (max-width: 640px) {
        html, body, #root { min-height: 100vh; min-height: -webkit-fill-available; }
      }
    </style>
    <script type="module" crossorigin src="/assets/index-Bsmgj59A.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/router-tFQkQEW8.js">
    <link rel="modulepreload" crossorigin href="/assets/animation-CqIrJawE.js">
    <link rel="stylesheet" crossorigin href="/assets/index-IG4JdmuG.css">
  </head>
  <body>
    <div id="root">
      <div style="display:flex;align-items:center;justify-content:center;min-height:100vh;background:#0d0c0b;color:#c9a55a;font-size:1.5rem;font-family:system-ui">
        Loading Angelspeak...
      </div>
    </div>
    <script>
      // Fix for mobile viewport height (address bar issue)
      function setVH() {
        let vh = window.innerHeight * 0.01;
        document.documentElement.style.setProperty('--vh', vh + 'px');
      }
      setVH();
      window.addEventListener('resize', setVH);
      window.addEventListener('orientationchange', setVH);
      // Force reflow on mobile to fix viewport issues
      setTimeout(() => setVH(), 100);

      // Network monitoring for debugging
      if (typeof PerformanceObserver !== 'undefined') {
        try {
          const observer = new PerformanceObserver((list) => {
            for (const entry of list.getEntries()) {
              if (entry.transferSize === 0 && entry.decodedBodySize > 0) {
                console.log('✓ Cached:', entry.name);
              } else if (entry.duration > 1000) {
                console.warn('⚠ Slow load:', entry.name, `(${Math.round(entry.duration)}ms)`);
              }
            }
          });
          observer.observe({ entryTypes: ['resource'] });
        } catch (e) {
          // PerformanceObserver not supported
        }
      }

      // Clear old caches on page load
      if ('caches' in window) {
        caches.keys().then((names) => {
          names.forEach((name) => {
            if (name.includes('angelspeak-cache') || name.includes('angelspeak-runtime')) {
              console.log('Cleaning cache:', name);
              caches.delete(name).catch(() => {});
            }
          });
        }).catch(() => {});
      }
    </script>
  </body>
</html>
