/* ===== YouTube 點了才載入（facade）— 搭配 /assets/js/ytfacade.js =====
 * 為什麼（2026-10-26）：作品頁的 YouTube iframe 一進頁就載 0.5–1 MB 的 YouTube 腳本，
 * 但多數訪客根本不按播放。改成「縮圖＋播放鈕」，點了才建立真正的 iframe。
 *
 * 佔位與 style.css 的 `.video-container iframe` 完全一致：絕對定位鋪滿 16:9 容器。
 * 容器本身（尺寸、圓角、邊框、陰影）仍由 style.css 的 .video-container 決定，這裡不動。
 * 色票全部取 tokens.css，不寫死色碼。 */

.yt-facade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* style.css 的 a:hover 會把連結變 --primary，這裡鎖死，播放鈕顏色自己管 */
    color: var(--text-white);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.yt-facade:hover { color: var(--text-white); }

/* 焦點框畫在容器內側：.video-container 是 overflow:hidden＋大圓角，往外畫的 outline 會被裁掉。
 * 也不能用 outline 本身往內畫：縮圖是絕對定位的子層，會蓋住父層的 outline（實測看不到），
 * 所以改用排在縮圖之後的 ::after 畫框。 */
.yt-facade:focus-visible { outline: none; }
.yt-facade:focus-visible:not(.is-loading)::after {
    content: '';
    position: absolute;
    top: var(--space-1);
    left: var(--space-1);
    right: var(--space-1);
    bottom: var(--space-1);
    border: 3px solid var(--primary);
    border-radius: var(--radius-md);   /* 容器圓角 24px 內縮 8px ＝ 16px，弧度才同心 */
    pointer-events: none;
}

/* sd／hq 縮圖是 4:3 且上下帶黑邊（黑邊高度剛好等於 4:3 裁成 16:9 要切掉的量），
 * cover 把黑邊裁掉；maxres 本來就是 16:9，cover 不會動到它 */
.yt-facade img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;           /* style.css 的全域 img 規則是 max-width:100%; height:auto */
    object-fit: cover;
    transition: transform 0.4s ease;
}
.yt-facade:hover img,
.yt-facade:focus-visible img { transform: scale(1.03); }

/* 播放鈕：深色玻璃圓盤（同地圖上浮動工具列的語言），hover／focus 時換成暖色漸層實心 */
.yt-facade__play {
    position: relative;        /* 蓋在絕對定位的縮圖之上 */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--bar-glass-bg);
    border: 1px solid var(--hairline);
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    color: var(--text-white);
    transition: transform 0.25s ease, opacity 0.2s ease, color 0.25s ease;
}
/* 暖色漸層用疊一層、淡入的方式切換——漸層本身不能做 background 轉場 */
.yt-facade__play::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 50%;
    background: var(--primary-gradient);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.yt-facade__play svg {
    position: relative;        /* 疊在漸層層之上 */
    width: 32px;
    height: 32px;
    fill: currentColor;
    stroke: currentColor;      /* 配合 stroke-linejoin 把三角形的角磨圓 */
    stroke-width: 2;
    stroke-linejoin: round;
}
.yt-facade:hover .yt-facade__play,
.yt-facade:focus-visible .yt-facade__play {
    color: var(--on-accent);   /* 亮底上的字禁白 */
    transform: scale(1.08);
}
.yt-facade:hover .yt-facade__play::before,
.yt-facade:focus-visible .yt-facade__play::before { opacity: 1; }

/* 載入中：已點擊、iframe 已建立但 YouTube 播放器還沒畫出來——縮圖留著，播放鈕換成轉圈，
 * 避免中間閃一塊黑底。iframe 載完後 JS 會把整個 facade 移除。 */
.yt-facade.is-loading { cursor: progress; }
.yt-facade.is-loading .yt-facade__play {
    opacity: 0;
    transform: scale(0.85);
}
.yt-facade.is-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    height: 40px;
    margin: auto;              /* 絕對定位＋四邊 0＋auto：置中，不必用負 margin（動畫還要留給 transform） */
    border-radius: 50%;
    border: 3px solid var(--text-decorative);   /* 轉圈的軌道：純裝飾 */
    border-top-color: var(--primary);
    animation: yt-facade-spin 0.8s linear infinite;
}
@keyframes yt-facade-spin { to { transform: rotate(360deg); } }

/* 手機：圓盤縮小，免得蓋掉太多縮圖 */
@media (max-width: 575px) {
    .yt-facade__play { width: 56px; height: 56px; }
    .yt-facade__play svg { width: 24px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .yt-facade img,
    .yt-facade__play,
    .yt-facade__play::before { transition: none; }
    .yt-facade:hover img,
    .yt-facade:focus-visible img,
    .yt-facade:hover .yt-facade__play,
    .yt-facade:focus-visible .yt-facade__play { transform: none; }
    .yt-facade.is-loading::after { animation: none; }   /* 靜態半圈仍看得出「處理中」 */
}