---
import CommandPalette from "./CMDPalette"
---

<header class="site-header">
  <div class="inner">
    <a href="/" class="link">
      <span class="site-logo">◬</span>
      <span class="site-name">
        dave
        <span class="bracket">[</span>
        dmg
        <span class="bracket">]</span>
      </span>
    </a>
    <CommandPalette client:load currentPath={Astro.url.pathname} />
  </div>
</header>

<style>
  .site-header {
    @mixin py var(--ui-masthead-paddingY);

    position: sticky;
    z-index: 9;
    top: 0;

    width: 100%;

    color: var(--color-text-inverse);

    background-color: var(--color-surface-inverse);
  }

  .inner {
    @mixin layout-wrapper;

    display: flex;
    flex-direction: row;
    gap: var(--ui-spacing-cozy);
    align-items: center;
    justify-content: flex-start;

    font-size: var(--ui-masthead-font-size);
    line-height: var(--ui-masthead-line-height);
  }

  .site-logo {
    display: inline-block;
    font-family: var(--font-mono);
    animation:
      logo-pulse 5s cubic-bezier(0.4, 0, 0.6, 1) infinite,
      logo-glitch 13s step-end infinite;
  }

  .site-name {
    font-family: var(--font-mono);
  }

  .bracket {
    color: var(--color-secondary);
  }

  @keyframes logo-pulse {
    0% {
      opacity: 1;
    }

    25% {
      opacity: 0.66;
    }

    50% {
      opacity: 0.33;
    }

    75% {
      opacity: 0.66;
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes logo-glitch {
    0%,
    84% {
      transform: translate(0, 0);
      filter: brightness(1);
    }

    85% {
      transform: translate(-2px, 0);
      filter: brightness(0.4);
    }

    86% {
      transform: translate(1px, -1px);
      filter: brightness(0.2);
    }

    87% {
      transform: translate(-1px, 1px);
      filter: brightness(0.7);
    }

    88% {
      transform: translate(2px, 0);
      filter: brightness(0.1);
    }

    89% {
      transform: translate(-2px, 1px);
      filter: brightness(0.5);
    }

    90% {
      transform: translate(0, -1px);
      filter: brightness(0.8);
    }

    91%,
    100% {
      transform: translate(0, 0);
      filter: brightness(1);
    }
  }
</style>
