<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Initializing...</title>

    <!-- Mobile & Fullscreen -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">

    <link rel="stylesheet" href="/static/css/intro.css">
  </head>
  <body>
    <audio id="bg-music" preload="auto">
      <source src="/static/media/music.mp3" type="audio/mpeg">
  </audio>
<!-- Background Glow -->
<div class="bg-glow"></div>

<!-- Intro Container -->
<div class="intro-screen">
    <div class="logo">♥</div>
    <div id="typewriter"></div>
    <div class="hint">tap to continue</div>
</div>

<script src="/static/js/typewriter.js"></script>
<script>
  let canContinue = false;
  let redirected = false;
  
  function goToStory() {
      if (redirected) return;
      redirected = true;
      window.location.href = "/story";
  }
  
  startTypewriter([
    "Initializing memory...",
    "Decrypting moments...",
    "Loading our story...",
    "Happy Birthday ❤️"
  ], () => {
      const hint = document.querySelector('.hint');
      hint.classList.add('show');
      canContinue = true;
  
      // fallback auto redirect
      setTimeout(goToStory, 4000);
  });
  
  // klik layar → lanjut
  document.addEventListener("click", () => {
      if (canContinue) {
          goToStory();
      }
  });
  
  function setVH() {
      const vh = window.innerHeight * 0.01;
      document.documentElement.style.setProperty('--vh', `${vh}px`);
  }
  
  setVH();
  window.addEventListener('resize', setVH);
  </script>
  

<script src="/static/js/audio.js"></script>
</body>
</html>
