<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>404 — Lost in the Stream</title>
  <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { width: 100%; height: 100%; overflow: hidden; background: #000; }
    #yt-bg {
      position: fixed;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 100vw; height: 100vh;
      min-width: 177.78vh;
      min-height: 56.25vw;
      border: 0;
      pointer-events: none;
    }
    .badge {
      position: fixed;
      bottom: 1.25rem;
      left: 1.25rem;
      z-index: 2;
      font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
      font-size: 0.9rem;
      letter-spacing: 0.04em;
      color: rgba(255,255,255,0.85);
      background: rgba(0,0,0,0.45);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      padding: 0.45rem 0.8rem;
      border-radius: 0.4rem;
      border: 1px solid rgba(255,255,255,0.15);
    }
    .badge a {
      color: #b2e7ff;
      text-decoration: none;
      margin-left: 0.5rem;
    }
    .badge a:hover { text-decoration: underline; }
    @media (prefers-reduced-motion: reduce) {
      #yt-bg { filter: brightness(0.5); }
    }
  </style>
</head>
<body>
  <div id="yt-bg"></div>

  <div class="badge">
    404 — page not found
    <a href="/">go home</a>
  </div>

  <script>
    // Loop just the first 10 seconds of the video, muted autoplay.
    const VIDEO_ID = 'Aba6qm8Pdic';
    const LOOP_END = 10; // seconds

    const tag = document.createElement('script');
    tag.src = 'https://www.youtube.com/iframe_api';
    document.head.appendChild(tag);

    let player;
    let watcher;

    window.onYouTubeIframeAPIReady = function () {
      player = new YT.Player('yt-bg', {
        videoId: VIDEO_ID,
        playerVars: {
          autoplay: 1,
          mute: 1,
          controls: 0,
          modestbranding: 1,
          playsinline: 1,
          rel: 0,
          iv_load_policy: 3,
          disablekb: 1,
          start: 0,
          end: LOOP_END
        },
        events: {
          onReady: (e) => {
            e.target.mute();
            e.target.playVideo();
            startWatcher();
          },
          onStateChange: (e) => {
            if (e.data === YT.PlayerState.ENDED) {
              player.seekTo(0, true);
              player.playVideo();
            }
            if (e.data === YT.PlayerState.PLAYING) {
              startWatcher();
            }
          }
        }
      });
    };

    function startWatcher() {
      if (watcher) return;
      watcher = setInterval(() => {
        if (!player || !player.getCurrentTime) return;
        const t = player.getCurrentTime();
        if (t >= LOOP_END) {
          player.seekTo(0, true);
          player.playVideo();
        }
      }, 200);
    }
  </script>
</body>
</html>
