/**
 * Academy Content Protection — 課程頁體驗修正
 * 2026-07-31
 *
 * 與「內容保護」分開：這支是所有人（含管理員）都會載入的視覺修正。
 *   1) 文字選取色＝重點色 60% + 深色字
 *   2) 相關課程／章節小知識輪播的載入閃爍（卡片寬度由 JS 計算，算完前版面是散的）
 * 只作用於帶 body.academy-cp-page 的課程頁，不影響站上其他頁面。
 */

/* ───────── 1) 選取色 ───────── */

body.academy-cp-page ::selection {
	background: rgba(57, 255, 245, 0.6);
	color: #202020;
}

body.academy-cp-page ::-moz-selection {
	background: rgba(57, 255, 245, 0.6);
	color: #202020;
}

/* ───────── 2) 輪播載入閃爍 ─────────
 * 卡片寬度是 course-page.js 算完才寫進 inline style，
 * 在那之前卡片沒有寬度、版面會散開。這裡先讓輪播保持不可見，
 * 由 course-ux.js 在寬度就緒後加上 is-ready 淡入（另有 2 秒保險，
 * 萬一 JS 沒跑完也一定會顯示，不會整區消失）。
 */

body.academy-cp-page .related-courses__carousel,
body.academy-cp-page .related-articles__carousel {
	opacity: 0;
	transition: opacity 0.25s ease;
	/* 純 CSS 保險：即使 JS 完全沒載入（例如被快取擋住），
	   2.5 秒後也一定會顯示，不可能出現輪播永久消失的情況。 */
	animation: acad-ux-failsafe 0s linear 2.5s forwards;
}

body.academy-cp-page .related-courses__carousel.acad-ux-ready,
body.academy-cp-page .related-articles__carousel.acad-ux-ready {
	opacity: 1;
	animation: none;
}

@keyframes acad-ux-failsafe {
	to { opacity: 1; }
}

/* 使用者若偏好減少動態，直接顯示不做淡入 */
@media (prefers-reduced-motion: reduce) {
	body.academy-cp-page .related-courses__carousel,
	body.academy-cp-page .related-articles__carousel {
		opacity: 1;
		animation: none;
		transition: none;
	}
}

/* 保留輪播區高度，避免淡入時頁面高度跳動 */
body.academy-cp-page .related-carousel-viewport {
	min-height: 1px;
}