/* /lp 필름의 정지 화면.

   움직임을 줄이도록 설정한 환경과 스크립트가 없는 환경이 같이
   씁니다(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,
.lp-hero-photo,
.reel-list,
.reel-item,
.reel-shot,
.grow-frame,
.flow-shot,
.flow-step {
  opacity: 1 !important;
  transform: none !important;
}

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

.lp-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 #e5e5e2;
}

.reel-shot {
  display: none !important;
}

.grow-frame {
  position: relative !important;
  inset: auto !important;
  aspect-ratio: 4 / 3;
}

.flow-shots {
  height: auto !important;
  aspect-ratio: auto !important;
}

@media (max-width: 1023px) {
  .flow-shots {
    display: none !important;
  }
}

/* 멈춰 있을 때는 첫 단계의 사진 한 장만 섭니다. 넷을 다 쌓으면 글보다
   사진이 세 배 깁니다. */
.flow-shot {
  position: relative !important;
  aspect-ratio: 4 / 5;
}

.flow-shot:not(:first-child) {
  display: none !important;
}