Initial commit

frontend/src/components/LoadingScreen.svelte

@@ -0,0 +1,160 @@
+<script>
+  let visible = $state(true)
+  let progress = $state(0)
+  let fading = $state(false)
+  let on = $state(false)
+
+  const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+  $effect(() => {
+    if (reducedMotion) {
+      on = true
+      progress = 100
+      setTimeout(() => {
+        fading = true
+        setTimeout(() => { visible = false }, 400)
+      }, 300)
+      return
+    }
+
+    requestAnimationFrame(() => { on = true })
+
+    const duration = 1600
+    const start = performance.now()
+
+    function tick(now) {
+      const elapsed = now - start
+      progress = Math.min(100, (elapsed / duration) * 100)
+      if (progress < 100) {
+        requestAnimationFrame(tick)
+      } else {
+        setTimeout(() => {
+          fading = true
+          setTimeout(() => { visible = false }, 700)
+        }, 300)
+      }
+    }
+    requestAnimationFrame(tick)
+  })
+</script>
+
+{#if visible}
+  <div class="loading-screen" class:fading class:on>
+    <div class="scanlines"></div>
+    <div class="curvature"></div>
+    <div class="content">
+      <div class="logo">CG.CX</div>
+      <div class="progress-bar">
+        <div class="progress-fill" style="width: {progress}%"></div>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .loading-screen {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    background: var(--retro-bg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transform: scaleY(0.005) scaleX(0.8);
+    opacity: 0;
+    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease;
+    overflow: hidden;
+  }
+  .loading-screen.on {
+    transform: scaleY(1) scaleX(1);
+    opacity: 1;
+  }
+  .loading-screen.fading {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.7s ease;
+  }
+
+  .scanlines {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background: repeating-linear-gradient(
+      0deg,
+      transparent,
+      transparent 2px,
+      rgba(0,0,0,0.04) 2px,
+      rgba(0,0,0,0.04) 4px
+    );
+    animation: scanline-flicker 0.1s infinite;
+  }
+
+  @keyframes scanline-flicker {
+    0%, 100% { opacity: 0.95; }
+    50% { opacity: 1; }
+  }
+
+  .curvature {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    box-shadow: inset 0 0 80px rgba(0,0,0,0.12);
+    border-radius: 15% / 5%;
+  }
+
+  .content {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 24px;
+  }
+
+  .logo {
+    font-family: 'Press Start 2P', cursive;
+    font-size: clamp(1.4rem, 5vw, 2.4rem);
+    color: var(--retro-green);
+    text-shadow: 2px 2px 0px rgba(0,0,0,0.1);
+    animation: glitch-reveal 0.6s ease-out 0.3s both;
+  }
+
+  @keyframes glitch-reveal {
+    0% { clip-path: inset(0 100% 0 0); transform: translateX(-6px); }
+    25% { clip-path: inset(0 70% 0 0); transform: translateX(5px); }
+    50% { clip-path: inset(0 30% 0 0); transform: translateX(-3px); }
+    75% { clip-path: inset(0 10% 0 0); transform: translateX(2px); }
+    100% { clip-path: inset(0 0 0 0); transform: translateX(0); }
+  }
+
+  .progress-bar {
+    width: min(300px, 80vw);
+    height: 10px;
+    background: #ddd;
+    border: 2px solid var(--retro-border);
+    position: relative;
+  }
+
+  .progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--retro-green), var(--retro-green-light));
+    transition: width 0.05s linear;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .loading-screen {
+      transform: none;
+      opacity: 1;
+      transition: opacity 0.3s ease;
+    }
+    .scanlines {
+      display: none;
+    }
+    .logo {
+      animation: none;
+    }
+    .progress-fill {
+      transition: none;
+    }
+  }
+</style>