/* hm-scroll3d 1.0.0 — 스크롤 반응형 3D·영상 히어로 (Homepage Maker 키트, 수정 금지)
 * 자리: <section data-hm-scroll3d="hm-scroll3d-kit/manifest.json"> 하나.
 * 켜지면(.hm-s3d--on) 자리가 스크롤 길이(--hm-s3d-len, 기본 300vh)만큼 길어지고 안쪽 무대가 화면에 고정된다.
 * 꺼지면(움직임 줄이기·데이터 절약·저사양·소재 없음) 첫 화면 한 장(poster)만 보인다.
 */
[data-hm-scroll3d] {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
}
[data-hm-scroll3d].hm-s3d--on {
  height: var(--hm-s3d-len, 300vh);
}
.hm-s3d-sticky {
  position: relative;
  top: 0;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  overflow: clip;
}
[data-hm-scroll3d].hm-s3d--on .hm-s3d-sticky {
  position: -webkit-sticky;
  position: sticky;
}
.hm-s3d-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hm-s3d-media > .hm-s3d-poster,
.hm-s3d-media > .hm-s3d-canvas,
.hm-s3d-media > .hm-s3d-video,
.hm-s3d-media > model-viewer {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  border: 0;
  margin: 0;
  padding: 0;
  object-fit: cover;
  object-position: var(--hm-s3d-pos, 50% 50%);
}
.hm-s3d-media > .hm-s3d-canvas,
.hm-s3d-media > .hm-s3d-video,
.hm-s3d-media > model-viewer {
  opacity: 0;
  transition: opacity .35s ease;
  background: transparent;
  --poster-color: transparent;
}
[data-hm-scroll3d].hm-s3d--ready .hm-s3d-media > .hm-s3d-canvas,
[data-hm-scroll3d].hm-s3d--ready .hm-s3d-media > .hm-s3d-video,
[data-hm-scroll3d].hm-s3d--ready .hm-s3d-media > model-viewer {
  opacity: 1;
}
/* 히어로 문구·버튼은 그림 위 레이어 — 자리·크기는 사이트 CSS(분석대로)가 정한다 */
.hm-s3d-overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  height: 100%;
}
@media (prefers-reduced-motion: reduce) {
  [data-hm-scroll3d].hm-s3d--on { height: auto; }
  [data-hm-scroll3d].hm-s3d--on .hm-s3d-sticky { position: relative; }
  .hm-s3d-media > .hm-s3d-canvas,
  .hm-s3d-media > .hm-s3d-video,
  .hm-s3d-media > model-viewer { display: none; }
}