モバイルメニュー開閉が思うように動きません

モバイルメニュー開閉のコードを作成しました。
動かしてみると以下3点が思うように動かず、直せないでいます。
よろしければどこが間違っているのか教えて頂きたいです。
よろしくお願いします。

①タイトルやテキストの文章がスムーズに消えない。(消える間際にかくつく)

②MenuとMenuの間にテキストの文章が見えている。

③mobileMenuの枠線内でクリックしてもmobileMenuが閉じてしまう。
(layerの子要素なのでlayerの上に乗っておりクリックイベントに反応しないと思うのですが)

html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>
      <div class="header__wrapper">
        <h1 class="logo">
          <a class="logo__link" href="#">タイトル</a>
        </h1>
        <div id="humberger"><span></span><span></span><span></span></div>
        <div id="layer">
          <div class="mobileMenu">
            <ul class="mobileMenu__main">
              <li class="mobileMenu__list">
                <a href="#" class="mobileMenu__link">Menu</a>
              </li>
              <li class="mobileMenu__list">
                <a href="#" class="mobileMenu__link">Menu</a>
              </li>
              <li class="mobileMenu__list">
                <a href="#" class="mobileMenu__link">Menu</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </header>
    <main class="main">
      <div class="main__wrapper">
        <p>
          テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </p>
        <p>
          テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </p>
      </div>
    </main>
    <script src="main.js"></script>
  </body>
</html>

css
:root {
  font-size: 62.5%;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style-type: none;
}

.logo {
  position: relative;
  z-index: 1;
}

.logo__link {
  display: block;
  font-size: 2.2rem;
}

.header__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 15px;
}

#humberger {
  position: relative;
  z-index: 10;
}

#humberger.open span:nth-child(1) {
  -webkit-transform: translateY(8px) rotate(45deg);
          transform: translateY(8px) rotate(45deg);
}

#humberger.open span:nth-child(2) {
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}

#humberger.open span:nth-child(3) {
  -webkit-transform: translateY(-8px) rotate(-45deg);
          transform: translateY(-8px) rotate(-45deg);
}

#humberger:hover {
  cursor: pointer;
}

#humberger span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: black;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

#humberger span + span {
  margin-top: 5px;
}

#layer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: auto;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  pointer-events: none;
  background-color: white;
  opacity: 0;
}

#layer.open {
  opacity: 0.8;
  z-index: 5;
  pointer-events: auto;
}

.mobileMenu {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  text-align: center;
  outline: 2px solid black;
}

#layer .mobileMenu__list {
  opacity: 0;
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

#layer.open .mobileMenu__list {
  opacity: 1;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
}

#layer.open .mobileMenu__list:nth-child(2) {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}

#layer.open .mobileMenu__list:nth-child(3) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

.mobileMenu__link {
  font-size: 1.8rem;
  line-height: 2.5;
}

.main__wrapper {
  padding: 15px;
}

.main__wrapper p {
  font-size: 1.5rem;
}

.main__wrapper p + p {
  margin-top: 15px;
}

js
const humberger = document.querySelector("#humberger");
const layer = document.querySelector("#layer");

humberger.addEventListener("click", function (e) {
  layer.classList.toggle("open");
  humberger.classList.toggle("open");
});

layer.addEventListener("click", function (e) {
  layer.classList.toggle("open");
  humberger.classList.toggle("open");
});

// 追加コード
const mobileMenu = document.querySelector(".mobileMenu");

mobileMenu.addEventListener("click", function (e) {
  e.stopPropagation();
});