// Loading screen that displays while WASM loads
(function() {
  // Create and inject loader styles immediately (head exists)
  var style = document.createElement('style');
  style.textContent =
    '.wasm-loader {' +
      'position: fixed;' +
      'top: 0;' +
      'left: 0;' +
      'width: 100%;' +
      'height: 100%;' +
      'background-color: oklch(0.15 0.01 338.64);' +
      'display: flex;' +
      'align-items: center;' +
      'justify-content: center;' +
      'z-index: 9999;' +
      'transition: opacity 0.3s ease-out;' +
    '}' +
    '.wasm-loader.hidden {' +
      'opacity: 0;' +
      'pointer-events: none;' +
    '}' +
    '.wasm-spinner {' +
      'width: 48px;' +
      'height: 48px;' +
      'border: 4px solid rgba(123, 173, 159, 0.2);' +
      'border-top-color: #7bad9f;' +
      'border-radius: 50%;' +
      'animation: wasm-spin 1s linear infinite;' +
    '}' +
    '@keyframes wasm-spin {' +
      'to { transform: rotate(360deg); }' +
    '}';
  document.head.appendChild(style);

  function init() {
    // Create loader element
    var loader = document.createElement('div');
    loader.className = 'wasm-loader';
    loader.innerHTML = '<div class="wasm-spinner"></div>';
    document.body.appendChild(loader);

    // Watch for Dioxus to mount content in #main
    var observer = new MutationObserver(function(mutations, obs) {
      var main = document.getElementById('main');
      if (main && main.children.length > 0) {
        loader.classList.add('hidden');
        setTimeout(function() { loader.remove(); }, 300);
        obs.disconnect();
      }
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true
    });
  }

  // Wait for body to exist
  if (document.body) {
    init();
  } else {
    document.addEventListener('DOMContentLoaded', init);
  }
})();