@layer components {
  .header {
    @mixin py var(--el-header-paddingY);

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

    width: var(--dim-full);

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

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

  .inner {
    @mixin responsive-wrapper;

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

    font-size: var(--el-header-font-size);
    line-height: var(--el-header-line-height);

  }

  .logo {
    @mixin anim-txt-characterglitch;

    font-family: var(--font-mono);
    animation:
        logo-pulse 5s cubic-bezier(0.4, 0, 0.6, 1) infinite;

    &:hover {
      transform: translate(0, 0);
      color: var(--color-secondary);
    }
  }

  .pagename {
    font-family: var(--font-mono);

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

  .menutoggle {
    @mixin ml auto;

    & button {
      cursor: pointer;
      font-family: var(--font-mono);
      transition: color 0.2s ease-out;

      &:hover {
        color: var(--color-primary);
      }

      &:active {
        transform: scale(0.95);
        transition: transform 0.1s ease-out;
      }
    }
  }

  @keyframes logo-pulse {
    0% { opacity: 1; }
    25% { opacity: 0.66; }
    50% { opacity: 0.33; }
    75% { opacity: 0.66; }
    100% { opacity: 1; }
  }
}