---
/**
 * ============================================================
 * SVGarden — https://www.svgarden.dev
 * Author : Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * File   : src/pages/404.astro
 * Desc   : 404 page — a wilted-flower stroke animation, of course
 * ============================================================
 */
import Base from '../layouts/Base.astro';
---

<Base title="404 — SVGarden" description="Page not found.">
  <section class="sg-hero" style="text-align: center; padding: 4rem 0;">
    <svg width="120" height="120" viewBox="0 0 64 64" aria-hidden="true" style="margin: 0 auto; display: block;">
      <path
        d="M32 56 C 32 44, 32 36, 32 30 C 32 22, 26 18, 20 20 C 22 26, 27 28, 32 30 M 32 26 C 34 18, 42 16, 46 18 C 44 24, 38 26, 32 26"
        fill="none"
        stroke="var(--sg-accent)"
        stroke-width="2.5"
        stroke-linecap="round"
        stroke-dasharray="140"
        stroke-dashoffset="140"
        style="animation: sg-404-draw 2s ease forwards;"
      />
    </svg>
    <h1>404 — nothing planted here</h1>
    <p style="color: var(--sg-text-soft);">This page doesn't exist (yet). The garden is back at the gallery.</p>
    <p><a class="sg-btn sg-btn-primary" href="/">Back to the gallery</a></p>
  </section>
  <style>
    @keyframes sg-404-draw {
      to { stroke-dashoffset: 0; }
    }
  </style>
</Base>