<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>jumps</title>
  <link rel="icon" href="icon.png" type="image/png">

  <style>
    html, body {
      cursor: none;
      background: #000;
      color: #fff;
      font-family: monospace;
      margin: 40px auto;
      max-width: 650px;
      line-height: 1.6;
      padding: 0 20px;
      font-size: 16px;
      user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      height: 100%;
      overflow: hidden;
      position: relative;
      z-index: 0;
    }

    a {
      cursor: url("cursor2.gif"), none;
    }

    .blink {
      animation: blink 1s step-end infinite;
    }

    @keyframes blink {
      50% {
        opacity: 0;
      }
    }

    .trail {
      position: fixed;
      width: 16px;
      height: 16px;
      background-image: url("cursor.gif");
      background-size: contain;
      background-repeat: no-repeat;
      pointer-events: none;
      animation: fade 0.15s ease-out forwards;
      z-index: 10000;
      transform: translate(-50%, -50%);
    }

    #cursor-layer {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 10000;
      pointer-events: none;
    }

    #cursor-dot {
      position: fixed;
      width: 16px;
      height: 16px;
      background-image: url("cursor.gif");
      background-size: contain;
      background-repeat: no-repeat;
      pointer-events: none;
      z-index: 10001;
      transform: translate(-50%, -50%);
    }

    @keyframes fade {
      to {
        opacity: 0;
        transform: scale(0.5);
      }
    }

    @keyframes glow {
      0%, 100% {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff;
      }
      10% {
        text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 7px #fff;
      }
    }

    .glow {
      animation: glow 2s ease-in-out infinite;
    }

    #intro-video {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      object-fit: cover;
      z-index: 9999;
    }

    #main-content {
      opacity: 0;
      transition: opacity 1.2s ease-in-out;
      z-index: 1;
      position: relative;
    }

    #main-content.show {
      opacity: 1;
    }

    /* JUMP! overlay */
	#jump-overlay {
		position: fixed;
		top: 30%; /* higher than before */
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 64px;
		color: black;
		font-weight: 900; /* bolder */
		font-family: monospace;
		z-index: 10001;
		pointer-events: none;
		user-select: none;
}
  </style>
</head>
<body>

<!-- JUMP! overlay -->
<div id="jump-overlay">JUMP!</div>

<!-- Fullscreen intro video -->
<video id="intro-video" src="bg.mp4" muted autoplay playsinline></video>

<!-- Cursor visuals -->
<div id="cursor-layer">
  <div id="cursor-dot"></div>
</div>

<!-- Your actual content -->
<div id="main-content">
  <div class="text-block">
    <span class="glow">jumps.live<span class="blink"> █</span></span>
  </div>

  <div style="margin-top: 40px; font-size: 12px; color: #444;">
    blame-it-on-me
  </div>
</div>

<script>
  let playCount = 0;
  const video = document.getElementById("intro-video");
  const content = document.getElementById("main-content");

  video.addEventListener("ended", function () {
    playCount++;
    if (playCount < 3) {
      video.currentTime = 0;
      video.play();
    } else {
      video.style.display = "none";
      content.classList.add("show");
      const jumpOverlay = document.getElementById("jump-overlay");
      if (jumpOverlay) jumpOverlay.remove();
    }
  });

  const cursorLayer = document.getElementById('cursor-layer');
  const cursorDot = document.getElementById('cursor-dot');

  document.addEventListener('mousemove', function(e) {
    cursorDot.style.left = e.pageX + 'px';
    cursorDot.style.top = e.pageY + 'px';

    const trail = document.createElement('div');
    trail.classList.add('trail');
    trail.style.left = e.pageX + 'px';
    trail.style.top = e.pageY + 'px';
    trail.style.transform = 'translate(-50%, -50%)';
    cursorLayer.appendChild(trail);
    setTimeout(() => trail.remove(), 150);
  });
</script>

</body>
</html>