/* 달려콜 필름의 정지 화면.

   움직임을 줄이도록 설정한 환경과 자바스크립트가 없는 환경이 같이
   씁니다(app/layout.tsx). 장면은 고정을 풀고 제 높이로 돌아가며, 모든
   글은 처음부터 서 있습니다. 필름에서만 뜻이 있는 것은 감춥니다. */
.scene {
  height: auto !important;
}

.stage,
.pan-stage {
  position: relative !important;
  height: auto !important;
  overflow: visible !important;
}

.cue,
.cue-in,
.cue-out,
.cue-through,
.hero-frame,
.hero-photo,
.reel-list,
.reel-item,
.reel-then,
.strike-text,
.life-frame,
.life-photo,
.closing-panel {
  opacity: 1 !important;
  transform: none !important;
}

.film-only {
  display: none !important;
}

.static-only {
  display: block !important;
}

.hero .stage {
  min-height: 100svh;
}

.reel-view {
  height: auto !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.reel-list {
  position: static !important;
  margin-top: 0 !important;
}

.reel-item {
  height: auto !important;
  padding-block: 1.75rem;
  border-bottom: 1px solid #e4e5ea;
}

.strike-line {
  transform: scaleX(1) !important;
}

.strike-text {
  opacity: 0.45 !important;
}

.life-head {
  opacity: 1 !important;
  transform: none !important;
}

.life-frame {
  position: relative !important;
  inset: auto !important;
  margin: 2.5rem var(--frame) 0;
  aspect-ratio: 5 / 4 !important;
}

@media (min-width: 1024px) {
  .life-frame {
    aspect-ratio: 12 / 5 !important;
  }
}

.hours-bar {
  transform: scaleY(0.32) !important;
}

.hours-bar-on {
  transform: scaleY(1) !important;
}

.hours-fill {
  opacity: 1 !important;
}

/* 필름에서는 두 문장이 같은 자리에서 바뀝니다. 멈춰 있을 때는 남는 쪽만
   섭니다. */
.hours-was {
  display: none !important;
}

.hours-now {
  position: static !important;
}

/* 앱 화면: 세 사진이 겹치지 않고 차례로 섭니다. */
.flow-shots {
  height: auto !important;
  aspect-ratio: auto !important;
}

.flow-shot {
  position: relative !important;
  aspect-ratio: 3 / 2;
  margin-bottom: 1rem;
  opacity: 1 !important;
}

.flow-step {
  opacity: 1 !important;
}