---
import Blank from '../layouts/Blank.astro';
import Snake from '../components/Snake.astro';
---

<Blank title="404 - Don't Panic">
  <div class="flex flex-col items-center justify-center min-h-screen text-center gap-6">
    <div id="error-code" class="font-bold text-ctp-accent leading-none" style="font-size: 5rem;">
      404
    </div>
    <div class="text-ctp-text text-xl font-semibold">Don't Panic.</div>
	<p class="text-ctp-subtext mx-auto text-sm hyphens-auto" style="max-width: 40%; text-align: justify;">
  The Guide says: remain calm. This page exists somewhere in the universe — it simply cannot be located from your current position in space and time. While you wait, the Guide recommends a game of Snake. Or switch to AI mode and watch the snake find its own way — much like the universe itself, it knows where it is going, even if you do not.
</p>
    <Snake />
    <a href="/" class="text-ctp-accent hover:text-ctp-peach transition-colors text-sm">← Take me to the Guide</a>
  </div>
</Blank>

<style>
  #error-code {
    animation: glitch 4s infinite;
  }

  @keyframes glitch {
    0%   { text-shadow: 4px 0 var(--ctp-red), -4px 0 var(--ctp-blue); }
    20%  { text-shadow: -4px 0 var(--ctp-red), 4px 0 var(--ctp-blue); }
    40%  { text-shadow: 4px 4px var(--ctp-mauve), -4px -4px var(--ctp-green); }
    60%  { text-shadow: -4px 0 var(--ctp-peach), 4px 0 var(--ctp-teal); }
    80%  { text-shadow: 4px 0 var(--ctp-red), -4px 0 var(--ctp-blue); }
    100% { text-shadow: none; }
  }
</style>
