.site-header {
  opacity: 1;
  visibility: visible;
  transition:
    background .28s var(--ease),
    box-shadow .28s var(--ease),
    color .28s var(--ease),
    height .28s var(--ease),
    padding .28s var(--ease),
    transform .42s var(--ease),
    opacity .36s var(--ease),
    visibility 0s linear;
  will-change: transform, opacity;
}

.site-header.is-hero-video-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-18px);
  pointer-events: none;
  transition:
    background .28s var(--ease),
    box-shadow .28s var(--ease),
    color .28s var(--ease),
    height .28s var(--ease),
    padding .28s var(--ease),
    transform .42s var(--ease),
    opacity .36s var(--ease),
    visibility 0s linear .36s;
}

.chatbot {
  visibility: visible;
  transition:
    bottom .28s var(--chatbot-ease, var(--ease)),
    opacity .42s var(--chatbot-ease, var(--ease)),
    transform .42s var(--chatbot-ease, var(--ease)),
    visibility 0s linear;
  /* will-change: transform 을 주면 .chatbot 이 position: fixed 자식의 containing block 이 된다.
     그러면 .chatbot__panel 의 %(--gutter) 값이 뷰포트가 아니라 토글 버튼(64px) 기준으로 계산돼
     모바일에서 패널 폭이 57px 로 찌그러진다. 성능 힌트일 뿐이라 뺀다. */
}

.chatbot.is-hero-video-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(28px);
  pointer-events: none;
  transition:
    bottom .28s var(--chatbot-ease, var(--ease)),
    opacity .32s var(--chatbot-ease, var(--ease)),
    transform .32s var(--chatbot-ease, var(--ease)),
    visibility 0s linear .32s;
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .chatbot {
    transition: none;
  }
}