<!DOCTYPE html>
<!--
  ============================================================
  goblincare.com — 404 Page
  ============================================================
  Shown when someone visits a URL that doesn't exist.
  Matches the void aesthetic of the landing page.
  ============================================================
-->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="theme-color" content="#000000">
  <title>404 — goblincare</title>
  <meta name="robots" content="noindex"> <!-- Don't index error pages in Google -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">
  <link rel="apple-touch-icon" href="/images/gea_icon.jpg">
  <link rel="shortcut icon" href="/images/gea_icon.jpg" type="image/jpeg">
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --void: #000000;
      --accent: #C4A35A;
      --accent-bright: #E8DCC8;
      --text-dim: #666655;
      --text-log: #888876;
      --mono: 'Share Tech Mono', 'Courier New', monospace;
    }

    html, body {
      width: 100%; height: 100%;
      background: var(--void);
      color: var(--accent-bright);
      font-family: var(--mono);
      overflow: hidden;
    }

    /* Skip link */
    .skip-link {
      position: fixed; top: -100%; left: 16px; z-index: 9999;
      background: var(--accent); color: #000;
      padding: 8px 16px; font-size: 13px; font-family: var(--mono);
      text-decoration: none; border-radius: 2px; transition: top 200ms;
    }
    .skip-link:focus { top: 16px; outline: 2px solid var(--accent-bright); outline-offset: 2px; }

    /* Subtle grid */
    .grid {
      position: fixed; inset: 0; z-index: 1;
      background-image:
        linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
      background-size: 60px 60px;
      pointer-events: none;
    }

    /* System log */
    #log {
      position: fixed; top: 24px; left: 24px; z-index: 10;
      font-size: 11px; color: var(--text-log);
      letter-spacing: 0.12em; line-height: 2;
      opacity: 0; animation: fadein 1s 0.3s ease forwards;
    }
    #log .line { display: block; opacity: 0; }
    #log .line.l1 { animation: fadein 0.4s 0.5s ease forwards; }
    #log .line.l2 { animation: fadein 0.4s 1.0s ease forwards; }
    #log .line.l3 { animation: fadein 0.4s 1.5s ease forwards; color: #884433; }

    /* Main content */
    #main-content {
      position: fixed; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      z-index: 10; text-align: center;
      opacity: 0;
      animation: spawn 0.6s 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .error-code {
      font-size: clamp(48px, 15vw, 96px);
      color: #1a1a1a;
      letter-spacing: 0.1em;
      display: block;
      margin-bottom: 8px;
      line-height: 1;
    }

    .error-msg {
      font-size: 11px;
      color: var(--text-dim);
      letter-spacing: 0.3em;
      text-transform: uppercase;
      display: block;
      margin-bottom: 32px;
    }

    /* Home link */
    .home-link {
      display: inline-block;
      font-size: clamp(14px, 3vw, 18px);
      color: var(--accent);
      text-decoration: none;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      position: relative;
      padding: 8px 4px;
      border-radius: 2px;
      transition: color 200ms;
    }
    .home-link::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0; height: 1px;
      background: var(--accent);
      transform: scaleX(0); transform-origin: left;
      transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    .home-link:hover { color: var(--accent-bright); }
    .home-link:hover::after { transform: scaleX(1); }
    .home-link:focus-visible {
      outline: 2px solid var(--accent-bright);
      outline-offset: 4px;
      color: var(--accent-bright);
    }

    /* Version tag */
    #version {
      position: fixed; bottom: 24px; right: 24px; z-index: 10;
      font-size: 9px; color: var(--text-dim);
      letter-spacing: 0.2em;
      opacity: 0; animation: fadein 2s 3s ease forwards;
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
      #main-content, #log, #version { opacity: 1 !important; }
    }

    @keyframes fadein {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    @keyframes spawn {
      from { opacity: 0; transform: translate(-50%, -50%) scale(0.94); filter: blur(4px); }
      to { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
    }
  </style>
</head>
<body>

  <a href="/" class="skip-link">Skip to navigation</a>

  <div class="grid" role="presentation" aria-hidden="true"></div>

  <div id="log" aria-hidden="true" role="presentation">
    <span class="line l1">// request received</span>
    <span class="line l2">// searching world geometry...</span>
    <span class="line l3">// object not found</span>
  </div>

  <main id="main-content">
    <span class="error-code" aria-hidden="true">404</span>
    <span class="error-msg">this object does not exist</span>
    <nav aria-label="Error page navigation">
      <a href="/" class="home-link" aria-label="Return to goblincare homepage">
        ← return to void
      </a>
    </nav>
  </main>

  <p id="version" aria-hidden="true">goblincare // v0.1</p>

</body>
</html>

