/* 깔끔한친구들은? — 시네마틱 스토리텔링 About 페이지.
   theme.css(브랜드 토큰·Nav·Footer) + wash.css(모바일 햄버거·phero) 위에 얹는 장면 전용 레이어.
   각 장면 = 한 화면(풀 뷰포트). 밝은 배경(네이비 글씨)과 어두운 사진 배경(흰 글씨)을 번갈아 리듬을 만든다. */

/* 스냅 비활성: 스토리는 자유롭게 흐르도록 (theme.css의 proximity 스냅은 .snap에만 적용되므로 별도 처리 불필요) */

/* ---- 공통 장면 ---- */
.scene {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: clamp(96px, 14vh, 160px) 0 clamp(72px, 12vh, 140px);
}
.scene-inner { position: relative; z-index: 2; width: 100%; }
.scene-copy { max-width: 40ch; }

/* 장면 번호(작은 챕터 표식) */
.scene-no {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-brand); font-weight: 800; letter-spacing: .12em;
  font-size: 13px; margin-bottom: clamp(20px, 3vh, 34px);
}
.scene-no::after { content: ""; width: 40px; height: 1px; display: inline-block; }

/* 헤드라인(그 장면의 핵심 문장) */
.scene-head {
  font-family: var(--font-brand);
  font-weight: 800; letter-spacing: -0.035em;
  font-size: clamp(30px, 5.2vw, 58px); line-height: 1.28;
  margin: 0; text-wrap: balance; word-break: keep-all;
}
/* 본문 라인 */
.scene-body { margin: clamp(22px, 3.4vh, 40px) 0 0; display: flex; flex-direction: column; gap: clamp(12px, 1.6vh, 20px); }
.scene-body .line {
  font-size: clamp(17px, 2.15vw, 25px); line-height: 1.75; letter-spacing: -0.015em;
  margin: 0; text-wrap: pretty; word-break: keep-all; font-weight: 500;
}

/* 라인별 시네마틱 등장 — theme.css의 .reveal 재사용 + 조금 더 큰 이동감 */
.scene .reveal { transform: translateY(26px); transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1); }
.scene .reveal.in { transform: none; }
.scene .reveal[data-d="1"] { transition-delay: .12s; }
.scene .reveal[data-d="2"] { transition-delay: .24s; }
.scene .reveal[data-d="3"] { transition-delay: .36s; }
.scene .reveal[data-d="4"] { transition-delay: .48s; }
.scene .reveal[data-d="5"] { transition-delay: .60s; }
@media (prefers-reduced-motion: reduce) {
  .scene .reveal { transform: none !important; }
}

/* ---- 어두운 장면(풀블리드 사진 + 흰 글씨) ---- */
.scene--dark { background: var(--navy-900); color: #fff; }
.scene--dark .scene-bg { position: absolute; inset: 0; z-index: 0; }
.scene--dark .scene-bg image-slot { width: 100%; height: 100%; display: block; }
.scene--dark .scene-bg .scene-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block;
}

/* ---- 오프닝 장면(영상 배경) — 텍스트가 인물/피사체를 가리지 않게 하단 정렬 ---- */
.scene--intro { align-items: flex-end; }
.scene--intro .scene-scrim {
  background:
    linear-gradient(180deg, rgba(7,27,46,.28) 0%, rgba(7,27,46,.16) 38%, rgba(7,27,46,.72) 76%, rgba(7,27,46,.94) 100%),
    radial-gradient(130% 80% at 18% 34%, rgba(7,27,46,.30), rgba(7,27,46,.55)) !important;
}
.scene--intro .scene-inner { padding-bottom: clamp(16px, 4vh, 48px); }

.scene--dark .scene-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(7,27,46,.62) 0%, rgba(7,27,46,.34) 42%, rgba(7,27,46,.80) 100%),
    radial-gradient(120% 100% at 14% 30%, rgba(7,27,46,.72), rgba(7,27,46,.30) 60%, transparent);
}
.scene--dark .scene-head { color: #fff; text-shadow: 0 2px 40px rgba(0,0,0,.35); }
.scene--dark .scene-body .line { color: rgba(255,255,255,.90); text-shadow: 0 1px 24px rgba(0,0,0,.3); }
.scene--dark .scene-no { color: var(--mint-400); }
.scene--dark .scene-no::after { background: rgba(255,255,255,.35); }
.scene--dark .hi { color: var(--mint-400); }

/* ---- 밝은 장면(네이비 글씨) ---- */
.scene--light { background: #fff; color: var(--ink); }
.scene--tint { background: var(--mint-tint); }
.scene--light .scene-head { color: var(--navy-800); }
.scene--light .scene-body .line { color: var(--label-neutral); }
.scene--light .scene-no { color: var(--mint-600); }
.scene--light .scene-no::after { background: var(--line-normal-strong); }
.scene--light .hi { color: var(--mint-500); }

/* ---- 밝은 분할 장면(텍스트 + 프레임 사진) ---- */
.scene--split .scene-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: center;
}
.scene--split.rev .scene-figure { order: -1; }
.scene-figure {
  width: 100%; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(7,27,46,.16), inset 0 0 0 1px var(--line-normal-neutral);
  background: var(--mint-soft);
}
.scene-figure image-slot { width: 100%; height: 100%; display: block; }
.scene--split .scene-copy { max-width: 34ch; }

/* ---- 두 단어 장면(깐깐하게, 꼼꼼하게) — 큰 대비 타이포 ---- */
.scene-duo {
  font-family: var(--font-brand); font-weight: 800; letter-spacing: -0.04em;
  font-size: clamp(44px, 9vw, 116px); line-height: 1.02; margin: 0;
}
.scene-duo span { display: block; }
.scene--dark .scene-duo .a { color: #fff; }
.scene--dark .scene-duo .b { color: var(--mint-400); }

/* ---- 마지막 장면 인용 ---- */
.scene-quote {
  font-family: var(--font-brand); font-weight: 800; letter-spacing: -0.035em;
  font-size: clamp(30px, 6vw, 66px); line-height: 1.24; margin: 0; text-wrap: balance; word-break: keep-all;
}
.scene-quote .qm { color: var(--mint-400); }

/* ---- 첫 장면 스크롤 힌트 ---- */
.scene-scroll {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 3;
  color: rgba(255,255,255,.72); font-size: 12px; font-weight: 700; letter-spacing: .14em;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.scene-scroll .line { width: 1px; height: 40px; background: linear-gradient(rgba(255,255,255,.7), transparent); animation: aboutScroll 2s ease-in-out infinite; transform-origin: top; }
@keyframes aboutScroll { 0%,100% { transform: scaleY(.35); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

/* ---- 반응형 ---- */
@media (max-width: 860px) {
  .scene--split .scene-inner { grid-template-columns: 1fr; gap: clamp(28px, 5vh, 44px); }
  .scene--split .scene-figure { aspect-ratio: 16 / 11; order: -1; }
  .scene--split .scene-copy { max-width: 100%; }
  .scene-copy { max-width: 100%; }
}
@media (max-width: 720px) {
  .scene { padding-bottom: calc(clamp(72px, 12vh, 140px) + 76px); } /* 하단 모바일 액션바 여백 */
  .scene-body .line { font-size: clamp(16px, 4.4vw, 21px); }
  /* 장면 3 영상: 모바일에서 피사체가 중앙에 오도록 크롭 위치 조정 */
  .scene--vid3 .scene-video { object-position: 50% 50%; }
  /* 장면 5 영상: 모바일에서 피사체가 중앙에 오도록 크롭 위치 조정 */
  .scene--vid5 .scene-video { object-position: 50% 50%; }
  /* 장면 7 영상: 모바일에서 피사체가 중앙에 오도록 크롭 위치 조정 */
  .scene--vid7 .scene-video { object-position: 50% 50%; }
}