<footer class="relative overflow-hidden border-t border-zinc gutter-x py-14 mt-auto bg-ink speed-lines">

  <!-- Decorative background text -->
  <div
    class="graffiti-tag absolute -bottom-6 -right-4 select-none pointer-events-none"
    style="-webkit-text-stroke-color: rgba(255,26,140,0.07); opacity: 1;"
    aria-hidden="true"
  >PIVOINE</div>

  <div class="gradient-line mb-10 relative z-10"></div>
  <div class="relative z-10 flex flex-col md:flex-row md:items-start justify-between gap-10">

    <!-- Brand -->
    <div>
      <a href="/" class="block mb-4 hover:opacity-90 transition-opacity w-fit" aria-label="{{ .Site.Title }} Home">
        {{- partial "logo.html" (dict "id" "footer" "class" "h-10 w-auto") -}}
      </a>
      <p class="label text-fog max-w-xs leading-loose">{{ .Site.Params.description }}</p>
    </div>

    <!-- Links -->
    <nav aria-label="Footer navigation">
      <ul class="flex flex-wrap gap-x-8 gap-y-4">
        {{- range .Site.Menus.footer -}}
        <li>
          <a href="{{ .URL }}" class="label text-fog hover:text-heat transition-colors">{{ .Name }}</a>
        </li>
        {{- end -}}
        {{- with .Site.Params.social -}}
          {{- range $platform, $url := . -}}
          <li>
            <a href="{{ $url }}" target="_blank" rel="noopener noreferrer" class="label text-fog hover:text-frost transition-colors">
              {{- $platform | upper -}} {{ partial "icon.html" "arrow-external" }}
            </a>
          </li>
          {{- end -}}
        {{- end -}}
      </ul>
    </nav>
  </div>

  <div class="relative z-10 gradient-line mt-10 mb-6"></div>
  <p class="relative z-10 label text-smoke">
    &copy; {{ .Site.Params.copyrightYear }} {{ .Site.Params.author }}. All rights reserved.
  </p>
</footer>
