/* ============================================================
   intro.css —— 進站短片的樣式。跟 intro.js 成對，缺一不可。

       <link rel="stylesheet" href="/shared/intro.css">

   ── 為什麼不用各站的設計 token ──────────────────────────────────────

   八個站共用同一組 token 名稱（--bg-void / --ink / --surface-scrim…），
   但**不保證每一站都定義齊全**，而且有些站的首頁在 token 載入前就繪製。
   一個拿不到值的 var() 會讓遮罩變成透明 —— 影片就這樣浮在內容上、
   底下的字還看得見，而那個畫面很難看。

   所以這裡的顏色全部自己帶，只用 prefers-color-scheme 分明暗。
   代價是跟各站的主題切換鈕不同步（使用者手動選了淺色、系統是深色時，
   遮罩會是深的）—— 那是八秒的覆蓋層，不是常駐介面，可以接受。
   ============================================================ */

.sop-intro {
  position: fixed;
  inset: 0;
  z-index: 2147483000; /* 蓋過各站自己的 header / sticky / cookie 條 */
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  padding: 24px;

  /* 深色是這一家族的預設主題 */
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  /* 預設看不見。影片在這個狀態下已經在載、在播了 ——
     「載好了才顯示」靠的就是這個，而不是等 JS 決定要不要掛上去。
     順帶一提，opacity 0 的元素不列入 LCP 計算，載入期間不會污染指標。 */
  opacity: 0;
  pointer-events: none;
  transition: opacity 450ms cubic-bezier(0.16, 1, 0.3, 1);
}

.sop-intro.is-in {
  opacity: 1;
  pointer-events: auto;
}

.sop-intro-video {
  width: 520px;
  max-width: 84vw;
  max-height: 62vh;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  background: #f2f4f8;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
  display: block;
  object-fit: cover;
}

/* aspect-ratio 在較舊的 Safari 沒有 —— 給一個等寬高的後備，
   否則影片會被拉長成一條。 */
@supports not (aspect-ratio: 1 / 1) {
  .sop-intro-video { height: 520px; max-height: 62vh; }
}

/* inset-inline-end 而不是 right —— 阿拉伯文與希伯來文的版面是翻轉的，
   關閉鍵要跟著跑到另一邊，否則它會落在使用者視線的相反側。 */
.sop-intro-close {
  position: absolute;
  top: 16px;
  right: 16px;
  inset-inline-end: 16px;
  width: 40px;
  height: 40px;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

/* 有 inset-inline-end 的瀏覽器要把上面那行 right 讓開，
   否則 RTL 時兩個屬性會打架。 */
@supports (inset-inline-end: 0) {
  .sop-intro-close { right: auto; }
}

.sop-intro-close:hover {
  border-color: rgba(255, 255, 255, 0.5);
}

.sop-intro-close:focus-visible {
  outline: 2px solid #22e4ff;
  outline-offset: 2px;
}

@media (prefers-color-scheme: light) {
  .sop-intro {
    background: rgba(20, 26, 40, 0.34);
  }
  .sop-intro-video {
    box-shadow: 0 16px 48px rgba(12, 18, 32, 0.16);
  }
  .sop-intro-close {
    border-color: rgba(10, 20, 40, 0.2);
    background: rgba(255, 255, 255, 0.95);
    color: rgba(12, 18, 32, 0.94);
  }
  .sop-intro-close:hover {
    border-color: rgba(10, 20, 40, 0.45);
  }
}

/* 要求減少動態的人根本不會看到這個覆蓋層（intro.js 直接不播），
   這一段是為了萬一有人只引了 CSS：至少不要有動畫。 */
@media (prefers-reduced-motion: reduce) {
  .sop-intro { transition-duration: 0.01ms; }
}