【Arkhe】ヘッダーロゴを非表示にして、スクロールで表示されるようにしたい

.c-headLogo__img {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}

/* data-scrolled=true のとき表示 */
[data-scrolled="true"] .c-headLogo__img {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* アニメ苦手な環境への配慮（任意） */
@media (prefers-reduced-motion: reduce) {
  .c-headLogo__img {
    transition: none;
  }
}