/* ============================================================
   시네마틱 자동재생 배너 — 메인 페이지 최상단
   장면 5개(제주 → 중국 → 몽골 → 베트남 → 맞춤여행)를 사진 레이어로 겹쳐 두고,
   js/cinema.js가 넣어 주는 변수(--op-*, --zoom-*, --split)로 나타났다 사라지게 한다.

   쌓임 순서(z-index)가 곧 장면 순서다 — 아래에서 위로:
     몽골(바탕) → 중국 → 베트남 → 피날레 → 제주(인트로, 좌우로 갈라짐)
   그래서 "중국이 사라지면 몽골이 드러나고", "베트남·피날레는 위에 얹히며 나타난다".
   ============================================================ */
@font-face {
  font-family: "GmarketSans";
  src: url("../fonts/GmarketSansBold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

.cinema-scroll {
  /* --banner-ratio: 메뉴 아래 남은 화면 높이 중 배너가 차지할 비율 (1 = 꽉 채움) */
  --chrome-h: 122px; --banner-ratio: 0.78;
  --op-intro: 1; --op-china: 1; --op-vietnam: 0; --op-final: 0;
  --zoom-intro: 1.04; --zoom-china: 1.10; --zoom-mongolia: 1.10; --zoom-vietnam: 1.10; --zoom-final: 1.10;
  --split: 0; --loop-fade: 0; --mx: 0; --my: 0;
  --cin-ink: #111411; --cin-paper: #ffffff; --cin-shadow: rgba(0, 0, 0, 0.32);
  position: relative; height: calc((100vh - var(--chrome-h)) * var(--banner-ratio));
  min-height: 420px; color: var(--cin-paper); padding: 0;
}
.cinema-scroll section { padding: 0; }   /* site.css의 section 기본 패딩 무력화 */

.cinema-scroll .stage { position: relative; height: 100%; overflow: hidden; isolation: isolate; background: #16324a; }
.cinema-scroll .stage::after {   /* 루프 이음매를 가리는 하얀 번짐 */
  content: ""; position: absolute; inset: 0; z-index: 20; pointer-events: none;
  background: #ffffff; opacity: var(--loop-fade);
}
.cinema-scroll .world {
  position: absolute; inset: 0; overflow: hidden;
  transform: translate3d(calc(var(--mx) * -14px), calc(var(--my) * -8px), 0);
}

/* ---------- 장면 사진 공통 ---------- */
.cinema-scroll .scene-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  display: block; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none;
  transform-origin: 50% 50%; will-change: transform, opacity;
}
.cinema-scroll .sc-mongolia { z-index: 1; transform: scale(var(--zoom-mongolia)); }
.cinema-scroll .sc-china    { z-index: 2; opacity: var(--op-china);   transform: scale(var(--zoom-china)); }
.cinema-scroll .sc-vietnam  { z-index: 3; opacity: var(--op-vietnam); transform: scale(var(--zoom-vietnam)); }
.cinema-scroll .sc-final    { z-index: 4; opacity: var(--op-final);   transform: scale(var(--zoom-final)); }

/* 인트로 — 같은 제주 사진을 왼쪽 절반·오른쪽 절반으로 잘라 두고 좌우로 밀어 연다 */
.cinema-scroll .sc-jeju { z-index: 5; opacity: var(--op-intro); }
.cinema-scroll .sc-jeju-left {
  clip-path: inset(0 50% 0 0);
  transform: translate3d(calc(var(--split) * -58%), 0, 0) scale(var(--zoom-intro));
}
.cinema-scroll .sc-jeju-right {
  clip-path: inset(0 0 0 50%);
  transform: translate3d(calc(var(--split) * 58%), 0, 0) scale(var(--zoom-intro));
}

/* 사진 위 글이 어떤 사진에서도 읽히도록 깔아 두는 옅은 그늘 */
.cinema-scroll .shade {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 11, 8, 0.30) 0%, rgba(14, 11, 8, 0.10) 45%, rgba(14, 11, 8, 0.34) 100%);
}

/* ---------- 장면별 글 (z 10) ---------- */
.cinema-scroll .intro-copy,
.cinema-scroll .story-panel {
  position: absolute; left: 50%; top: 45%; z-index: 10;
  text-align: center; pointer-events: none;
  transform: translate3d(-50%, calc(-50% + var(--panel-y, 0px)), 0);
  will-change: transform, opacity;
}
.cinema-scroll .intro-copy  { width: min(860px, calc(100vw - 40px)); }
.cinema-scroll .story-panel { width: min(760px, calc(100vw - 42px)); }

/* 밝은 사진 위에서도 글이 묻히지 않게 하는 비네트 */
.cinema-scroll .intro-copy::before,
.cinema-scroll .story-panel::before {
  content: ""; position: absolute; inset: -40% -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(28, 18, 8, 0.46), rgba(28, 18, 8, 0.24) 55%, transparent 100%);
}

/* 보이지 않는 장면의 버튼이 클릭을 가로채지 않게 — JS가 is-live로 켜 준다 */
.cinema-scroll .note-button { pointer-events: none; }
.cinema-scroll .is-live .note-button { pointer-events: auto; }

/* 큰 제목 — 다섯 장면 모두 같은 규격 */
.cinema-scroll .intro-copy h1,
.cinema-scroll .story-panel h2 {
  margin: 0; color: #ffffff;
  font-family: "GmarketSans", var(--font); font-size: clamp(1.5rem, 4.4vw, 4rem); font-weight: 700; line-height: 1.2;
  letter-spacing: -0.02em; word-break: keep-all;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 16px 38px var(--cin-shadow);
}
/* 제목 위 작은 한 줄 */
.cinema-scroll .intro-eyebrow {
  margin: 0 0 18px; font-size: 1.05rem; font-weight: 500; letter-spacing: 0.01em; opacity: 0.94;
}
.cinema-scroll .intro-copy p,
.cinema-scroll .story-panel p {
  color: #ffffff; font-size: 1.14rem; font-weight: 500; line-height: 1.5; word-break: keep-all;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55), 0 2px 18px rgba(0, 0, 0, 0.5);
}
.cinema-scroll .story-panel p { width: min(520px, 100%); margin: 26px auto 0; }

.cinema-scroll .note-button {
  min-height: 50px; margin-top: 28px; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 0 28px; border-radius: 999px; color: var(--cin-ink); background: #fdf1e1;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18); cursor: pointer;
  font-weight: 600; font-size: 15px;
}
.cinema-scroll .intro-copy .note-button { margin-top: 26px; }
.cinema-scroll .note-button span:first-child { font-size: 1.25rem; line-height: 1; }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 640px) {
  .cinema-scroll .intro-copy p, .cinema-scroll .story-panel p { font-size: 1rem; }
  .cinema-scroll .intro-eyebrow { font-size: 0.92rem; margin-bottom: 12px; }
  .cinema-scroll .note-button { min-height: 46px; padding: 0 22px; font-size: 14px; margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .cinema-scroll .scene-img, .cinema-scroll .intro-copy, .cinema-scroll .story-panel { transition: none; }
}