/* ============================================================
   sections.css — 各段疊圖、輪播 Slider、skymap、分隔帶、進場淡入
   ============================================================ */

/* ---- bg + 標題層 疊圖容器 ---- */
.section__art {
  position: relative;
  width: 100%;
  line-height: 0;
}

.section__art .section__title {
  position: absolute;
  inset: 0;
}

/* ---- 進場淡入（取代原 GSAP 文字動畫）---- */
.reveal {
  opacity: 0;
  transform: translateY(calc(-1 * var(--reveal-distance)));
  transition:
    opacity var(--reveal-duration) ease,
    transform var(--reveal-duration) ease;
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   Slider 輪播（s2–s8）— 使用 Swiper
   slide 緊接背景下緣；背景切圖已含適當間距，故「不加任何位移」
   （margin-top: 0，不重疊也不留縫）
   ============================================================ */
.section--slider .s-slider {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: 0;

  /* Swiper 主題色（沿用品牌金）*/
  --swiper-navigation-size: 28px;
  --swiper-navigation-color: var(--gold);
  --swiper-pagination-color: var(--gold);
  --swiper-pagination-bullet-inactive-color: #cbc7c7;
  --swiper-pagination-bullet-inactive-opacity: 0.5;
}

.s-slider .swiper-slide {
  line-height: 0;
}

.s-slider .swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
}

/* 箭頭加陰影，提高在亮圖上的可讀性 */
.s-slider .swiper-button-prev,
.s-slider .swiper-button-next {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}

/* ============================================================
   skymap 橫向全景空拍圖（接在 s9 之後）
   ============================================================ */
.skymap {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--navy-deep);
  scrollbar-width: none; /* Firefox 隱藏捲軸 */
  cursor: grab; /* 桌機：可拖曳平移的提示 */
}
.skymap.is-grabbing {
  cursor: grabbing;
}
.skymap.is-grabbing .skymap__img {
  pointer-events: none; /* 拖曳時不選取圖片 */
}
.skymap::-webkit-scrollbar {
  display: none;
}

.skymap__img {
  height: var(--skymap-h, 64vh);
  width: auto;
  max-width: none;
}

/* 拖曳提示：置於圖下方、置中、小字；位於捲動容器之外，
   所以橫向拖曳時不會跟著圖被捲出視窗 */
.skymap__hint {
  margin: 0;
  padding: 9px 0 11px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.6);
  background: var(--navy-deep);
  pointer-events: none;
  transition: opacity 0.4s ease;
  animation: skymap-hint-pulse 1.8s ease-in-out infinite;
}

/* 拖曳後淡出（reveal.js 會在 .skymap 加上 is-touched）*/
.skymap.is-touched + .skymap__hint {
  opacity: 0;
}

@keyframes skymap-hint-pulse {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.95;
  }
}

/* ============================================================
   s10 分隔帶（1441×96 細條）
   ============================================================ */
.section--strip {
  font-size: 0;
}
.section--strip .section__bg {
  width: 100%;
  height: auto;
}

/* ============================================================
   影片段（S1 與 S2 之間）
   ============================================================ */
.section--video {
  background: var(--navy-deep);
  line-height: 0;
}

.video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* 影片為 1920×1920 正方形，用 1:1 才不會裁切 */
  background: #000;
  overflow: hidden;
}

.custom-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 聲音開關（右下角圓鈕）*/
.video-sound-toggle {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: background 0.2s ease, transform 0.15s ease;
}
.video-sound-toggle:hover {
  background: rgba(0, 0, 0, 0.72);
  transform: scale(1.06);
}
.video-sound-toggle svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* 依靜音狀態切換顯示哪一顆 icon（靜音→顯示靜音圖；有聲→顯示喇叭圖）*/
.video-wrapper.is-muted .icon-sound {
  display: none;
}
.video-wrapper:not(.is-muted) .icon-muted {
  display: none;
}