/* ==========================================================================
   聖揚 樂晴空 EDM — 影片區塊（2026-09-03）
   位置：s1（首屏）與 s2 之間。
   載入順序必須在 v-2026-08-10.css 之後，才能覆蓋 .v2-sec 的米白底色。

   為什麼用 aspect-ratio 而不是等影片自己撐高：
     影片是外部網址、又設了 preload="none"，載入前瀏覽器不知道尺寸，
     區塊高度會是 0，等中繼資料回來才突然撐開，把下方所有區塊往下推、
     並讓 ScrollTrigger 既有的觸發點全部算錯位。先用 16:9 把高度定死，
     版面從第一幀就是最終樣子。

   為什麼 video 一定要明寫 position + z-index：
     頁面有一層 .global-body-wrapper 是 position:fixed 且 z-index:1，整片蓋住視窗。
     .v2-sec 雖然是 position:relative，但 z-index 是 auto、不會建立堆疊脈絡，
     所以區塊裡沒有指定層級的元素會被那層蓋掉。這也是既有的 .v2-bg 寫 z-index:1、
     .v2-slider 寫 2、.v2-txt 寫 3 的原因。影片一開始漏了這件事，畫面整片變成
     那層的天空底圖（fullscreen-022x-100.jpg），看起來就像「影片沒畫面」。
     這裡沿用同一套層級：影片 2，開聲音的點擊層 4。
   ========================================================================== */

.v2-sec.v2-video {
  background-color: var(--v2-dark);
}

/* 影片與點擊層共用的框。桌機展開動畫改的就是這一層的寬度。 */
.v2-video-frame {
  position: relative;
  z-index: 2;
  width: 100%;
}

.v2-video-el {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background-color: var(--v2-dark);
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   開聲音的點擊層
   刻意不畫任何東西：整層透明，點影片畫面任何地方就開聲音，開完就移除，
   之後點畫面即是原生的播放／暫停。底部讓開原生控制列的高度，免得使用者想按
   播放或拉時間軸卻被這層吃掉；控制列高度隨播放器寬度變，所以用 clamp 夾在
   40～64px 之間（手機取下限、加寬後的桌機取上限）。
   -------------------------------------------------------------------------- */

.v2-video-unmute {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  top: 0;
  bottom: clamp(40px, 13%, 64px);
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* 這層在 HTML 裡帶著 hidden，由 JS 拿掉才顯示 ——
   沒有 JS 時它點下去也不會有作用，就不該擋在原生控制列前面。
   display:block 的優先度比 [hidden] 的預設 display:none 高，必須明寫覆蓋。 */
.v2-video-unmute[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   捲動指示器
   只在桌機、且影片正被釘住的那段出現。基礎樣式先關掉：手機沒有釘住，
   畫面本來就會隨捲動移動，不需要這個提示。
   -------------------------------------------------------------------------- */

.v2-video-scrollcue {
  display: none;
}

.v2-video-scrollcue[hidden] {
  display: none !important;
}

/* ==========================================================================
   桌機加寬
   捲到影片區時，影片突破 720px 內容欄、兩側的 CTA 黃欄同步往外滑，
   整個版面「打開」讓影片放大；捲出視窗之後收回原本大小。

   為什麼 CTA 欄必須跟著動：
     那兩條 80px 的黃欄不是貼在視窗邊緣，而是緊貼 720px 內容欄的左右
     （body 是 flex 置中，實際排列是 [CTA 80][內容 720][CTA 80]）。
     影片單純加寬會直接鑽到黃欄底下——黃欄 z-index 10 蓋在最上面，
     畫面上就變成兩條黃色直條橫壓在影片上。讓黃欄同步外移剛好把空間讓出來，
     而且外移量正好是 (加寬後 - 720) / 2，配合下面的寬度公式，
     黃欄最後會落在視窗左右邊緣、不會被推出畫面。

   為什麼區塊高度永遠保留「展開後」的高度：
     高度若跟著寬度一起變，收合時區塊在視窗上方縮短，整個頁面會往上跳一大段。
     改成高度固定不動、只有裡面的框在縮放，捲動位置全程不受影響。
     代價是收合狀態影片上下會露出深藍底色，但收合只發生在區塊完全離開視窗之後，
     使用者看不到那一刻。

   加寬到多少：
     取「視窗寬減去兩側 80px 黃欄」與「視窗高放得下的 16:9」兩者較小值，上限 1440px，
     下限 720px（不小於原本欄寬）。這樣影片永遠完整在一屏內，不必捲動才看得完。
       1920×1080 → 1440×810     1440×900 → 1280×720     1280×800 → 1120×630
   ========================================================================== */

@media screen and (min-width: 992px) {
  .v2-sec.v2-video {
    --v2-video-wide: max(720px, min(1440px, calc(100vw - 160px), calc((100vh - 120px) * 16 / 9)));
    --v2-video-h: calc(var(--v2-video-wide) * 9 / 16);
    /* 影片上下各留的空白帶高度。同時是 sticky 的 top（＝影片垂直置中），
       也是捲動指示器的容身之處，所以抽成一個變數只算一次。 */
    --v2-video-band: calc((100vh - var(--v2-video-h)) / 2);
    /* 影片被釘住的捲動距離。這個值就等於「釘住期間使用者要捲多少像素」，
       是 1:1 的關係（推導見下方「釘住」說明），所以要調長短只改這一個數字。
       換算成時間感受（以 1080 高的視窗、200vh = 2160px 為例）：
         滑鼠滾輪一格約 100px、連續捲約 400px/秒  → 約 5.4 秒
         觸控板慢推約 800px/秒                    → 約 2.7 秒
         觸控板一次帶慣性的快甩約 2000～4000px    → 一次甩不完，要甩兩次
       60vh 時滾輪只有 1.6 秒、觸控板快甩幾乎瞬間就過，所以改成 200vh。
       再往上加到 300vh 以上，使用者會開始覺得頁面卡住，不建議。 */
    --v2-video-pin: 200vh;

    /* 突破 720px 內容欄：.section-wrapper 是 align-items:center 的 flex 容器，
       但子項一旦寬過容器，實測是靠左溢出而不是左右等量溢出，所以要自己拉回來。
       margin 的百分比是相對容器寬（＝欄寬 720px）算的，50% 就是欄的中心，
       減掉自身一半即左右等量溢出，剛好落在視窗中央。
       align-self 明寫 flex-start，讓起點不受 align-items 影響、行為可預期。 */
    align-self: flex-start;
    width: var(--v2-video-wide);
    max-width: none;
    margin-left: calc(50% - var(--v2-video-wide) / 2);
    margin-right: 0;

    /* 高度＝影片高度＋釘住距離，固定不動（不隨展開／收合改變） */
    height: calc(var(--v2-video-h) + var(--v2-video-pin));

    /* position:sticky 會以「最近的捲動容器」為基準；.v2-sec 繼承來的
       overflow:hidden 本身就是一個捲動容器，會讓裡面的 sticky 失效，必須解除。
       這一區沒有需要裁切的東西（底圖與輪播都沒用到），解除是安全的。 */
    overflow: visible;
    display: block;
  }

  .v2-sec.v2-video > .v2-video-frame {
    /* 釘住：影片捲到視窗垂直中央就黏住不動，等使用者又捲了 --v2-video-pin
       這麼長一段之後才隨版面往上走。用原生 sticky 而不是 ScrollTrigger 的 pin，
       是因為 pin 會在 DOM 插一層 pin-spacer 當父層，上面那句
       margin-left:calc(50% - …) 的 50% 就會改成相對 spacer（＝1440px）計算，
       置中直接跑掉。sticky 不動 DOM 結構，也沒有這個副作用。 */
    position: sticky;
    top: var(--v2-video-band);

    /* 版面尺寸永遠是「展開後」的大小，收合是靠 transform 縮小，不是改 width。
       為什麼不改 width：展開程度是逐幀跟著捲動走的，每幀改 width 就等於每幀
       重新排版影片元素與它的原生控制列；而這支影片是 3840×2160，瀏覽器還得
       跟著重建縮放後的圖層，捲動立刻開始掉幀。transform 只在合成階段處理，
       不觸發排版、也不重建圖層，捲動才會順。
       縮放值由 JS 寫進 inline 的 transform（只在桌機斷點寫），
       所以沒有 JS 時就是「固定全寬」，也是合理的樣子。 */
    width: 100%;
    transform-origin: 50% 50%;
    /* 這裡刻意不加 will-change:transform。影片元素本來就會拿到自己的合成圖層，
       在外框再宣告一次只是多開一張 1440×810 的紋理常駐記憶體；
       MDN 也明確建議不要對大面積元素長期掛 will-change。
       縮放只在展開那 900 多像素的區間內變動，其餘時間是靜態的。 */
  }

  /* CTA 黃欄外移用 transform，不動版面、不觸發重排 */
  .desktop-cta-wrapper.left,
  .desktop-cta-wrapper.right {
    will-change: transform;
  }

  /* ------------------------------------------------------------------------
     捲動指示器（桌機）
     位置：影片下緣到視窗底部之間那條空白帶的正中央。
       那條帶的高度就是 sticky 的 top 值，也就是 (100vh - 影片高) / 2，
       1920×1080 時是 135px、1280×800 時是 85px，放一個 44px 的圓環剛好。
       放在影片下方而不是壓在影片上，是為了不遮畫面、也不撞到原生控制列。
     為什麼用圓環而不是橫條：橫條會跟影片自己的時間軸長得太像，
       使用者會誤以為那是播放進度。圓環在視覺上明確區隔。
     ------------------------------------------------------------------------ */

  .v2-video-scrollcue {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: calc(100% + (var(--v2-video-band) - 44px) / 2);
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* 純提示，不吃點擊，開聲音的點擊層照樣運作 */
  }

  .v2-video-scrollcue.is-on {
    opacity: 1;
  }

  .v2-video-scrollcue-dial {
    position: relative;
    display: block;
    width: 44px;
    height: 44px;
    flex: none;
  }

  .v2-video-scrollcue-dial > svg {
    display: block;
    width: 44px;
    height: 44px;
    /* 從正上方開始填，順時針 */
    transform: rotate(-90deg);
  }

  .v2-video-scrollcue-track,
  .v2-video-scrollcue-prog {
    fill: none;
    stroke-width: 2.5;
  }

  .v2-video-scrollcue-track {
    stroke: rgba(62, 73, 93, 0.18);
  }

  /* dasharray 是圓周長 2πr（r=19），dashoffset 由 JS 逐幀寫入。
     這裡刻意不用品牌的黃綠 --v2-lime：這條空白帶的底是頁面的淡藍天空圖，
     黃綠與淡藍的亮度幾乎相同（兩者都很亮），環填到哪裡根本看不出來。
     改用深藍灰，跟箭頭與文字同色，在淡底上對比明確、整組也更安靜。 */
  .v2-video-scrollcue-prog {
    stroke: var(--v2-dark);
    stroke-linecap: round;
    stroke-dasharray: 119.38;
    stroke-dashoffset: 119.38;
  }

  .v2-video-scrollcue-arrow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    fill: none;
    stroke: var(--v2-dark);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: v2-video-cue-bob 1.6s ease-in-out infinite;
  }

  .v2-video-scrollcue-text {
    font-family: "Noto Sans TC", "PingFang TC", sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 1px;
    color: var(--v2-dark);
    white-space: nowrap;
  }

  @keyframes v2-video-cue-bob {
    0%,
    100% {
      transform: translateY(-2px);
    }
    50% {
      transform: translateY(2px);
    }
  }

  /* 使用者偏好減少動態效果時，箭頭不跳動；圓環照樣跟著捲動，
     因為那是捲動的直接回饋、不是裝飾動畫。 */
  @media (prefers-reduced-motion: reduce) {
    .v2-video-scrollcue-arrow {
      animation: none;
    }
  }
}