@keyframes scale {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(100%);
  }
}

.header__button {
  animation-duration: 300ms;
  animation-timing-function: ease;
}

.header__button[data-open='true'] {
  animation-name: scale;
}

.header__button[data-open='false'] {
  transition: background-color 250ms linear;
}

.header__nav {
  clip-path: circle(var(--radius) at calc(100% - 55px) 47px);
  visibility: hidden;
}

.header__nav[data-active='true'] {
  visibility: visible;
}