/* ==========================================================================
   v12 — 지도 각도(고정 사영) (v11 의 포인트·연결선·반응형 위에 이 파일만 더 얹는다)
   각도 자체는 js/lp-korea-map-v12.js 가 SVG 좌표와 별 위치에 직접 적용한다 (CSS 회전 없음 → 애니메이션·되돌림 없음).
   ========================================================================== */

/* 사영으로 육지가 1000×1000 박스 밖으로 살짝 나가도 잘리지 않도록 */
html[data-map-variant="v12"] .korea-mosaic-svg,
html[data-map-variant="v13"] .korea-mosaic-svg,
html[data-map-variant="v14"] .korea-mosaic-svg {
  overflow: visible;
}

/* 도시 불빛 레이어 (알파 이미지, SVG 밖 별도 <img>) — 두 단계, 모두 기존 연출의 장면 클래스에 묶여 있다
   성능 원칙: 불투명도(컴포지터)와 clip-path 만 움직인다. filter 는 쓰지 않는다 (매 프레임 재래스터 → 끊김).
   1) 예열: 별자리가 완성되어 홀드에 들어가면(.is-constellation-hold) 대치를 중심으로 원형 범위가
      천천히 퍼지며 불빛이 은은하게(0.42) 배어나온다 — 약 1.6초 뒤 수렴이 시작될 때까지
   2) 스플래시: 별들이 골드별로 모이는 scene 05 에서 폭죽(0.42s)에 맞춰 최고 밝기로 올랐다가,
      지도 소멸 페이드(0.37~1.45s)와 같은 박자로 사라진다 (지도 래퍼 밖 SVG 페이드에 실리지 않으므로 직접 지운다) */
.korea-citylights {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;              /* 육지 윤곽선(SVG, z 1)과 별(z 5) 아래 */
  opacity: 0.001;          /* 0 이면 아예 칠하지 않아 첫 등장 순간 래스터 비용이 튄다 → 미리 그려 둔다 */
  pointer-events: none;
  user-select: none;
  will-change: opacity;
  transform-style: flat;
  backface-visibility: hidden;
}

/* 1) 예열 — 불투명도만 움직인다 (컴포지터 전용, 재래스터 없음) */
.korea-story-map-wrap.is-constellation-hold .korea-citylights {
  animation: cityLightsPreglow 2s ease-out forwards;
}
@keyframes cityLightsPreglow {
  from { opacity: 0.001; }
  to   { opacity: 0.42; }
}

/* 2) 스플래시 — 홀드 클래스는 scene 05 진입 때 제거되므로 여기서 다시 상태를 정의한다 */
.korea-story-map-wrap.is-scene-05 .korea-citylights {
  animation: cityLightsSplash 1.45s ease-in-out forwards;
}
@keyframes cityLightsSplash {
  0%   { opacity: 0.42; }
  28%  { opacity: 1; }     /* ≈0.4s — 폭죽(mergeAt 0.42s) 직전 최고 */
  55%  { opacity: 0.85; }
  100% { opacity: 0.001; } /* 1.45s — 지도 소멸 페이드 종료(1.45s)와 같은 시점 */
}
.korea-story-map-wrap.is-map-gone .korea-citylights {
  opacity: 0.001;
  animation: none;
}

/* 홀드 구간의 별자리 선 반짝임(stroke 색 keyframe + drop-shadow 필터)은 사영된 1.8MB SVG 전체를
   매 프레임 다시 칠하게 만든다 → v12 에서는 정적 밝기로 고정한다 (넓은 반투명 선이 글로우를 대신한다) */
html[data-map-variant="v12"] .korea-story-map-wrap.is-scene-04:not(.is-scene-05) .const-network-line,
html[data-map-variant="v13"] .korea-story-map-wrap.is-scene-04:not(.is-scene-05) .const-network-line,
html[data-map-variant="v14"] .korea-story-map-wrap.is-scene-04:not(.is-scene-05) .const-network-line {
  animation: none;
  filter: none;
  stroke: rgba(241, 245, 249, 0.8);
}
html[data-map-variant="v12"] .korea-story-map-wrap.is-scene-04:not(.is-scene-05) .const-network-line.const-link-trunk,
html[data-map-variant="v13"] .korea-story-map-wrap.is-scene-04:not(.is-scene-05) .const-network-line.const-link-trunk,
html[data-map-variant="v14"] .korea-story-map-wrap.is-scene-04:not(.is-scene-05) .const-network-line.const-link-trunk {
  stroke: rgba(255, 252, 240, 0.92);
}

@media (prefers-reduced-motion: reduce) {
  .korea-story-map-wrap.is-constellation-hold .korea-citylights { animation: none; opacity: 0.5; }
  .korea-story-map-wrap.is-scene-05 .korea-citylights { animation: none; opacity: 0.001; }
}