{{- define "main" -}}
<section class="relative min-h-screen flex flex-col items-center justify-center overflow-hidden noise gutter-x py-32 text-center">

  <!-- Background texture -->
  <div class="absolute inset-0 speed-lines opacity-60"></div>
  <div class="absolute inset-0"
    style="background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(155,0,255,0.06) 0%, transparent 70%)"></div>

  <!-- Decorative hollow "404" behind everything -->
  <div class="absolute inset-0 flex items-center justify-center pointer-events-none select-none" aria-hidden="true">
    <span
      class="font-display leading-none"
      style="font-size: clamp(14rem, 40vw, 32rem);
             color: transparent;
             -webkit-text-stroke: 1px rgba(255,26,140,0.07);
             letter-spacing: -0.02em;">404</span>
  </div>

  <!-- Content -->
  <div class="relative z-10 flex flex-col items-center gap-6 max-w-2xl mx-auto">

    <!-- Eyebrow badge -->
    <span class="badge badge-gradient" style="animation: mob-link-in 0.5s var(--ease-out-expo) 0ms both">
      Error 404
    </span>

    <!-- Main headline -->
    <h1
      class="font-display leading-none text-balance"
      style="font-size: clamp(4rem, 14vw, 10rem);
             animation: mob-link-in 0.6s var(--ease-out-expo) 80ms both"
    >
      <span class="text-stroke-heat">PAGE</span><br>
      <span class="text-gradient">NOT FOUND</span>
    </h1>

    <!-- Gradient divider -->
    <div class="gradient-line w-32 mx-auto" style="animation: mob-link-in 0.4s ease 200ms both"></div>

    <!-- Description -->
    <p
      class="text-fog font-body text-base md:text-lg leading-relaxed max-w-md text-pretty"
      style="animation: mob-link-in 0.5s var(--ease-out-expo) 260ms both"
    >
      This drop got pulled. The page you're looking for doesn't exist, was moved, or got lost in the grid.
    </p>

    <!-- CTA -->
    <div class="flex flex-wrap gap-4 justify-center"
      style="animation: mob-link-in 0.5s var(--ease-out-expo) 340ms both">
      <a href="/" class="btn">Back to the Drop {{ partial "icon.html" "arrow-right" }}</a>
      <a href="/posts/" class="btn btn-ghost">Browse all posts {{ partial "icon.html" "arrow-right" }}</a>
    </div>

  </div>

  <!-- Bottom graffiti tag -->
  <div
    class="graffiti-tag absolute -bottom-6 left-1/2 -translate-x-1/2 select-none pointer-events-none whitespace-nowrap"
    style="-webkit-text-stroke-color: rgba(0,200,255,0.05);"
    aria-hidden="true"
  >LOST</div>

</section>
{{- end -}}