{{template "base/head" .}}

<style>
  body {
    background-color: #0f0f0f;
    color: #f8f8f2;
    font-family: 'Fira Code', monospace;
    background-image: radial-gradient(circle at 10% 20%, #1a1a1a, #0f0f0f);
  }

  .landing-container {
    text-align: center;
    padding: 6rem 2rem;
  }

  .landing-container .logo {
    width: 180px;
    height: auto;
    margin-bottom: 2rem;
    filter: drop-shadow(0 0 5px #0ff);
  }

  h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #0ff;
    text-shadow: 0 0 10px #0ff;
  }

  p {
    font-size: 1.2rem;
    color: #ccc;
    max-width: 700px;
    margin: 0 auto 2rem;
  }

  .button {
    background: linear-gradient(90deg, #0ff, #f0f);
    padding: 0.8rem 1.6rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    color: #000;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
  }

  .button:hover {
    filter: brightness(1.1);
  }

  .strike {
    text-decoration: line-through;
    opacity: 0.6;
  }

  #easter-egg {
    display: none;
    margin-top: 2rem;
    font-size: 1rem;
    color: #0f0;
    opacity: 0.85;
    animation: fadeIn 1s ease forwards;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
</style>

<div class="landing-container">
  <img class="logo" src="{{AssetUrlPrefix}}/img/logo.svg" alt="Logo">
  <h1><span class="strike">Wellcome</span> to ██████ — Who r u?</h1>
  <p>Build. Hack.</p>
  <a href="/explore/repos" class="button">Explore Repos</a>

  <div id="easter-egg">🕶️ You have found the terminal behind the mirror.</div>
</div>

<script>
  document.addEventListener('keydown', function (e) {
    if (e.ctrlKey && e.shiftKey && e.code === 'KeyX') {
      const egg = document.getElementById('easter-egg');
      if (egg) egg.style.display = 'block';
    }
  });
</script>

{{template "base/footer" .}}