feat(intro): polish loading transition

src/components/ui/SceneLoadingOverlay.tsx

@@ -1,5 +1,13 @@
 import type { SceneLoadingState } from "@/types/world/sceneLoading";
 
+const LOADING_BACKGROUND_PATH = "/assets/bg-site.png";
+const LOADING_LOGO_PATH = "/assets/logo/logo.jpg";
+
+for (const path of [LOADING_BACKGROUND_PATH, LOADING_LOGO_PATH]) {
+  const image = new Image();
+  image.src = path;
+}
+
 interface SceneLoadingOverlayProps {
   state: SceneLoadingState;
 }
@@ -15,11 +23,47 @@ export function SceneLoadingOverlay({
       className={`scene-loading-overlay${isReady ? " scene-loading-overlay--ready" : ""}`}
       aria-live="polite"
     >
-      <div className="scene-loading-overlay__content">
-        <strong>{state.currentStep}</strong>
+      <img
+        alt=""
+        className="scene-loading-overlay__background"
+        src={LOADING_BACKGROUND_PATH}
+      />
+      <div className="scene-loading-overlay__shade" />
+      <img
+        alt="La Fabrik Durable"
+        className="scene-loading-overlay__logo"
+        src={LOADING_LOGO_PATH}
+      />
+      <div className="scene-loading-overlay__footer">
+        <div className="scene-loading-overlay__meta">
+          <div className="scene-loading-overlay__label">
+            <span>Loading...</span>
+            <svg
+              className="scene-loading-overlay__spinner"
+              viewBox="0 0 32 32"
+              aria-hidden="true"
+            >
+              <path
+                d="M16 3a13 13 0 1 1-9.2 3.8"
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeWidth="3.5"
+              />
+              <path
+                d="M6.8 6.8V2.8H2.8"
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="3.5"
+              />
+            </svg>
+          </div>
+          <strong>{progress}%</strong>
+        </div>
         <div className="scene-loading-overlay__track">
           <span style={{ width: `${progress}%` }} />
-          <em>{progress}%</em>
         </div>
       </div>
     </div>

src/components/ui/intro/FadeToVideoOverlay.tsx

@@ -0,0 +1,14 @@
+export function FadeToVideoOverlay(): React.JSX.Element {
+  return (
+    <div
+      aria-hidden="true"
+      style={{
+        position: "fixed",
+        inset: 0,
+        zIndex: 29,
+        background: "#000",
+        pointerEvents: "none",
+      }}
+    />
+  );
+}

src/components/ui/intro/index.ts

@@ -1,3 +1,4 @@
+export { FadeToVideoOverlay } from "./FadeToVideoOverlay";
 export { IntroVideoPlayer } from "./IntroVideoPlayer";
 export { IntroDialogueOverlay } from "./IntroDialogueOverlay";
 export { IntroRevealOverlay } from "./IntroRevealOverlay";