<script lang="ts">
  let containerEl: HTMLDivElement;
  let mouseX = $state(0);
  let mouseY = $state(0);

  function handleMouseMove(event: MouseEvent) {
    if (!containerEl) return;
    const { clientX, clientY } = event;
    const { left, top, width, height } = containerEl.getBoundingClientRect();
    mouseX = (clientX - left - width / 2) / (width / 2);
    mouseY = (clientY - top - height / 2) / (height / 2);
  }
</script>

<div
  class="splash-screen"
  bind:this={containerEl}
  onmousemove={handleMouseMove}
  onmouseleave={() => {
    mouseX = 0;
    mouseY = 0;
  }}
>
  <div class="grid-container" style="--mouse-x: {mouseX}; --mouse-y: {mouseY};">
    <div class="grid" />
  </div>
  <div class="logo-container">
    <img src="/favicon.png" alt="Portal BTC Logo" class="logo" />
  </div>
  <div class="scanlines"></div>
</div>

<style>
  .splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(ellipse at center, #1b2735 0%, #090a0f 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    color: white;
    opacity: 1;
    transition: opacity 1s ease-out;
    overflow: hidden;
  }

  .grid-container {
    position: absolute;
    width: 100%;
    height: 100%;
    perspective: 400px;
    transform-style: preserve-3d;
    transform: rotateX(calc(var(--mouse-y) * -5deg))
      rotateY(calc(var(--mouse-x) * 5deg));
    transition: transform 0.2s linear;
  }

  .grid {
    position: absolute;
    width: 250vw;
    height: 250vh;
    top: -75vh;
    left: -75vw;
    background-image:
      linear-gradient(rgba(0, 255, 255, 0.4) 1px, transparent 1px),
      linear-gradient(to right, rgba(0, 255, 255, 0.4) 1px, transparent 1px);
    background-size: 50px 50px;
    transform: rotateX(80deg) translateY(200px) translateZ(-300px);
    animation: moveGrid 5s linear infinite;
    will-change: background-position;
  }

  @keyframes moveGrid {
    from {
      background-position: 0 0;
    }
    to {
      background-position: 0 -100px;
    }
  }

  .logo-container {
    position: relative;
    width: 40vw;
    max-width: 300px;
    animation: flicker 3s infinite;
  }

  .logo {
    width: 100%;
    height: auto;
    object-fit: contain;
    animation: pulse 2.5s infinite ease-in-out;
    filter: drop-shadow(0 0 7px #ff00ff) drop-shadow(0 0 15px #00ffff)
      drop-shadow(0 0 20px #ff00ff);
  }

  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
    100% {
      transform: scale(1);
    }
  }

  @keyframes flicker {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.95;
    }
    52% {
      opacity: 1;
    }
    55% {
      opacity: 0.98;
    }
    56% {
      opacity: 1;
    }
  }

  .scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      to bottom,
      rgba(18, 16, 16, 0) 50%,
      rgba(0, 0, 0, 0.25) 50%
    );
    background-size: 100% 4px;
    animation: scanlines 0.2s linear infinite;
    pointer-events: none;
    z-index: 10000;
  }

  @keyframes scanlines {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 0 4px;
    }
  }
</style>
