/* home.css — 홈($pageKey='home') 전용. 메인 비주얼 풀스크린 히어로. */

.main-visual {
  height: calc(100svh - var(--header-h));
  min-height: 480px;
  overflow: hidden;
}

.visual-bg-video,
.visual-bg-video video {
  pointer-events: none;
}

.visual-bg-video {
  position: relative;
  width: 100%;
  height: 100%;
}

/* 방향별 영상 2개를 겹쳐 두고 media query로 노출만 전환한다.
   display:none 대신 opacity/visibility를 쓰는 이유 → 숨긴 영상의 버퍼와
   디코더를 브라우저가 해제하지 않게 해서, 회전 시 재요청을 막기 위함. */
.video-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;
}

@media (orientation: portrait) {
  .video-player[data-orientation='portrait'] {
    opacity: 1;
    visibility: visible;
  }
}

@media (orientation: landscape) {
  .video-player[data-orientation='landscape'] {
    opacity: 1;
    visibility: visible;
  }
}