cg_api_secure-webshare/frontend/src/components/LoadingScreen.svelte

<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>