/*
  HyperFrames 플레이어(<hyperframes-player>) 자리. 플레이어는 컴포지션을 iframe으로 띄워 실시간으로 재생한다(영상 파일 아님).
  - 상자(.hf-frame) 크기는 컴포지션 비율로 미리 잡아 둔다(화면 밀림 0).
  - 상자 안 맨 아래에 정지 화면(.hf-still)이 깔려 있다. JS 없이도, 플레이어가 준비되기 전에도, '동작 줄이기'에서도 이 그림이 보인다.
  - 플레이어는 그 위에 겹쳐 있다가 재생되면 같은 순간의 화면을 그리며 덮는다(정지 화면과 같은 프레임에서 출발해 끊김이 없다).
  - 플레이어 기본 검은 배경은 지운다(페이지 흰 바탕이 그대로 보이게).
*/
.hf-frame {
  position: relative;
  width: 100%;
}

.hf-still,
.hf-frame > picture,
.hf-frame hyperframes-player {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.hf-still {
  object-fit: contain;
}

.hf-frame hyperframes-player {
  background: transparent;
}

/* 준비(컴포지션·글꼴)가 끝나기 전에는 플레이어를 숨겨 정지 화면이 그대로 보이게 한다 */
.hf-frame hyperframes-player:not([data-state="ready"]) {
  visibility: hidden;
}

.hf-frame--hero {
  width: min(100%, 26rem);
  aspect-ratio: 720 / 1340;
}

.hf-frame--stats {
  aspect-ratio: 720 / 310;
}

.hf-frame--memory {
  aspect-ratio: 640 / 400;
}

.hf-frame--day {
  aspect-ratio: 640 / 330;
}

.hf-frame--handoff {
  aspect-ratio: 640 / 260;
}

.hf-frame--how {
  aspect-ratio: 640 / 225;
}

.hf-frame--flow {
  aspect-ratio: 640 / 320;
}

/* 넓은 화면의 첫 화면 폰: 화면 높이에 맞춰 최대한 크게 */
@media (min-width: 64rem) {
  .hf-frame--hero {
    width: min(100%, calc((100svh - 7rem) * 720 / 1340), 30rem);
  }
}

/* 예시 설명과 멈춤 버튼 */
.stage-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-2) var(--s-4);
  max-width: 30rem;
  font-size: var(--t-meta-size);
  line-height: var(--t-meta-lh);
  color: var(--text-meta);
  text-align: center;
}

.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--touch-min);
  padding: 0 var(--s-4);
  border: 1px solid var(--text-meta);
  border-radius: var(--r-pill);
  background: var(--bg-page);
  color: var(--text-primary);
  font-size: var(--t-small-size);
  line-height: var(--t-small-lh);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.motion-toggle:hover {
  background: var(--bg-sheet);
}

.motion-toggle svg {
  width: 0.875rem;
  height: 0.875rem;
}

.motion-toggle .icon-play,
.motion-toggle[aria-pressed="true"] .icon-pause {
  display: none;
}

.motion-toggle[aria-pressed="true"] .icon-play {
  display: block;
}