/* assets/brand/splash.css
 * Responsive Homepage Entry Splash — 共用元件，只切換 image source。
 *
 * 純 CSS 動畫 + fill-mode:forwards 是 FAIL_OPEN 的核心保證：
 * 就算 splash.js 完全沒執行（被封鎖/例外/尚未載入），這支 CSS
 * 動畫本身也會在 2.4s 後自動把 splash 淡出、設 pointer-events:none，
 * 首頁底下永遠正常可見，不依賴 JS 才能顯示首頁。
 *
 * 時間軸（總長 2400ms）
 *   Desktop
 *     0–350ms      Whole Entrance（opacity 0→1，scale 1.01→1.00，不使用 blur）
 *     350–1550ms   Diagonal Soft Wipe（斜向柔性漸層遮罩，左→右）
 *     1550–1800ms  Full Hold
 *     1800–2400ms  Fade Out → Homepage 自然顯露
 *   Mobile
 *     0–300ms      Soft Reveal
 *     300–1800ms   Full Display
 *     1800–2400ms  Fade Out
 *
 * Wipe 實作說明：
 *   使用 ::after 偽元素做柔性白霧遮罩，不新增任何 markup，
 *   index.html 零異動。遮罩寬 300vw，以 105deg 漸層貼近圖上斜切方向，
 *   靠 translateX 由左往右退場。刻意不做精準貼合四條分界線
 *   （規格已確認採 B 案：斜向 wipe，非四格 polygon mask）。
 *   邊界使用 soft feather，不使用 sharp clip edge / 強光掃描 / 發光線條。
 *   不使用 CSS blur 動畫——全螢幕 blur 在低階裝置會掉幀，
 *   效果增益不足以換取效能風險。
 *
 * Breakpoint 768px：規格沒有給明確的 desktop/mobile 分界值，
 * 依驗收清單列出的行動裝置寬度（360/390/430）與桌面寬度
 * （1366 以上）之間有很大間隙，768px 是常見慣例斷點，
 * 安全涵蓋所有驗收尺寸，這是依驗收清單反推的假設，非規格明講。
 */

.yt-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #fff;
  overflow: hidden;
  animation: yt-splash-seq 2400ms ease forwards;
}

/* 已於本 session 播放過，或 JS 判斷應跳過 → 立即隱藏，零閃爍 */
.yt-splash-skip .yt-splash {
  display: none !important;
}

.yt-splash-picture,
.yt-splash-img {
  width: 100%;
  height: 100%;
  display: block;
}

.yt-splash-img {
  object-fit: cover;
  object-position: center;
}

/* Diagonal Soft Wipe（僅 Desktop） */
.yt-splash::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 300vw;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 33.3%,
    rgba(255, 255, 255, 0.30) 38.5%,
    rgba(255, 255, 255, 0.66) 45%,
    rgba(255, 255, 255, 0.66) 100%
  );
  transform: translateX(-66.6%);
  animation: yt-splash-wipe 1200ms ease-out 350ms forwards;
}

@keyframes yt-splash-wipe {
  to {
    transform: translateX(0);
  }
}

@keyframes yt-splash-seq {
  0% {
    opacity: 0;
    transform: scale(1.01);
  }
  14.58% {
    /* 350ms：Whole Entrance 完成 */
    opacity: 1;
    transform: scale(1);
  }
  75% {
    /* 1800ms：Wipe 與 Full Hold 都已結束，開始退場 */
    opacity: 1;
    transform: scale(1);
  }
  100% {
    /* 2400ms：Splash 淡出完成，Homepage 底下自然顯露 */
    opacity: 0;
    transform: scale(1.01);
    visibility: hidden;
    pointer-events: none;
  }
}

/* Mobile：SINGLE_IMAGE_SPLASH，無 wipe，enter 300ms */
@media (max-width: 767px) {
  .yt-splash::after {
    display: none;
  }

  .yt-splash {
    animation-name: yt-splash-seq-mobile;
  }
}

@keyframes yt-splash-seq-mobile {
  0% {
    opacity: 0;
    transform: scale(1.01);
  }
  12.5% {
    /* 300ms：Soft Reveal 完成 */
    opacity: 1;
    transform: scale(1);
  }
  75% {
    /* 1800ms：Full Display 結束 */
    opacity: 1;
    transform: scale(1);
  }
  100% {
    /* 2400ms */
    opacity: 0;
    transform: scale(1.01);
    visibility: hidden;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yt-splash,
  .yt-splash::after {
    animation-duration: .01ms;
    animation-delay: 0ms;
    animation-iteration-count: 1;
  }
}