/* =========================================================
   首頁互動加強 home-fx.css（2026.09）
   只在首頁載入；搭配 assets/js/home-fx.js。不改動 home.css 原有設定。
   ========================================================= */

/* ---------- 捲動進度條（頁面最上方的金色細線） ---------- */
.hx-progress { position: fixed; left: 0; top: 0; z-index: 1200; height: 2px; width: 100%; background: linear-gradient(90deg, var(--gold, #a8864f), #e7cf9c); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

/* ---------- 區塊標題：金線畫出、強調字底線 ---------- */
.home .h-head .h-mono::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s cubic-bezier(.2, .8, .2, 1) .2s; }
.home .h-head.in .h-mono::before { transform: scaleX(1); }
.home .h-head h2 em { position: relative; }
.home .h-head h2 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .12em; background: rgba(168, 134, 79, .28); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s cubic-bezier(.7, 0, .2, 1) .5s; z-index: -1; }
.home .h-head.in h2 em::after { transform: scaleX(1); }

/* ---------- 亮點數字：底線與懸停 ---------- */
.h-stat { position: relative; transition: background .4s; }
.h-stat::after { content: ""; position: absolute; left: 28px; bottom: 0; width: 36px; height: 2px; background: var(--gold-l); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.h-stat:first-child::after { left: 0; }
.h-stat:hover { background: rgba(255, 255, 255, .03); }
.h-stat:hover::after { transform: scaleX(1); }
.h-stat:hover b .num { color: var(--gold-l); }
.h-stat b .num { transition: color .3s; }

/* ---------- 你最想知道的 4 件事：黑／金交錯＋聚光燈 ---------- */
.h-faq { perspective: 1200px; }
.h-q { transition: color .45s, transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s; }
.h-q::before { transform-origin: bottom; }
.h-q:nth-child(even)::before { background: var(--gold); transform-origin: top; }
.h-q:nth-child(even):hover { color: #fff !important; }
.h-q:nth-child(even):hover p { color: rgba(255, 255, 255, .88); }
.h-q:nth-child(even):hover .n { color: #fff; }
.h-q::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s; pointer-events: none;
	background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(231, 207, 156, .22), transparent 60%); }
.h-q:nth-child(even)::after { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .35), transparent 60%); }
.h-q:hover::after { opacity: 1; }
.h-q:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -28px rgba(18, 19, 22, .6); z-index: 1; }
/* 大號數字：滑過時上捲換成下一個顏色 */
.h-q .n { position: relative; display: inline-block; overflow: hidden; }
.h-q .n::after { content: attr(data-n); position: absolute; left: 0; top: 100%; color: var(--gold-l); transition: transform .5s cubic-bezier(.7, 0, .2, 1); }
.h-q:nth-child(even) .n::after { color: #fff; }
.h-q .n-in { display: inline-block; transition: transform .5s cubic-bezier(.7, 0, .2, 1); }
.h-q:hover .n-in, .h-q:hover .n::after { transform: translateY(-100%); }
/* 圖示從右上角轉進來 */
.h-q .ic { display: grid !important; place-items: center; position: absolute; right: 22px; top: 26px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid currentColor; font-size: 17px; opacity: 0; transform: rotate(-90deg) scale(.6); transition: opacity .4s, transform .6s cubic-bezier(.2, .8, .2, 1); }
.h-q:hover .ic { opacity: 1; transform: none; }
.h-q:nth-child(odd) .ic { color: var(--gold-l); }
.h-q .go { position: relative; }
.h-q .go::after { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 1px; background: currentColor; opacity: .25; transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s cubic-bezier(.2, .8, .2, 1) .1s; }
.h-q:hover .go::after { transform: scaleX(1); }

/* ---------- 四年時間軸：進度線畫出、各年可點 ---------- */
.h-years { position: relative; }
.h-years::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--ink) 0 62.5%, var(--gold) 62.5% 75%, rgba(0, 0, 0, 0) 75%); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.8s cubic-bezier(.7, 0, .2, 1) .2s; margin-top: -1px; }
.h-years.in::after { transform: scaleX(1); }
.h-yr { cursor: default; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.h-yr::before { z-index: 1; transition: transform .4s, background .3s, box-shadow .3s; }
.h-yr:hover { transform: translateY(-4px); }
.h-yr:hover::before { background: var(--gold); transform: scale(1.5); box-shadow: 0 0 0 5px rgba(168, 134, 79, .18); }
.h-yr:hover h3 { color: var(--gold); }
.h-yr h3 { transition: color .3s; }
.h-yr.hi::before { animation: hxPulse 2.4s ease-out infinite; }
@keyframes hxPulse { 0% { box-shadow: 0 0 0 0 rgba(168, 134, 79, .45); } 70% { box-shadow: 0 0 0 12px rgba(168, 134, 79, 0); } 100% { box-shadow: 0 0 0 0 rgba(168, 134, 79, 0); } }

/* ---------- 三大模組：微動態（不展開） ---------- */
.h-mod { transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s, background .5s; }
.h-mod::before { content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 3px; background: var(--c); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s cubic-bezier(.7, 0, .2, 1); z-index: 1; }
.h-mod::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 9%, transparent), transparent 55%); opacity: 0; transition: opacity .5s; pointer-events: none; }
.h-mod > * { position: relative; z-index: 1; }
.h-mod:hover { transform: translateY(-6px); box-shadow: 0 26px 44px -30px rgba(18, 19, 22, .45); }
.h-mod:hover::before { transform: scaleX(1); height: 5px; top: -5px; }
.h-mod:hover::after { opacity: 1; }
.h-mod .big { position: absolute; transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .5s; }
.h-mod:hover .big { transform: translateY(-6px) scale(1.12); opacity: .4; }
.h-mod h3 { transition: color .4s; }
.h-mod:hover h3 { color: var(--c); }
.h-mod.craft:hover h3 { color: #8a6a2c; }
.h-mod li { transition: transform .4s cubic-bezier(.2, .8, .2, 1), color .3s; transition-delay: calc(var(--i, 0) * .04s); }
.h-mod:hover li { transform: translateX(4px); }
.h-mod li::before { transition: width .4s; }
.h-mod:hover li::before { width: 8px; }
.h-mod .job { position: relative; }
.h-mod .job::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: var(--c); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s cubic-bezier(.7, 0, .2, 1) .1s; }
.h-mod:hover .job::before { transform: scaleX(1); }

/* ---------- 紅點焦點：圖片滾動視差、Best of the Best 閃光 ---------- */
.h-rd figure img { transform: scale(1.12) translateY(var(--py, 0px)); transition: none; will-change: transform; }
.h-rd figure:hover img { transform: scale(1.16) translateY(var(--py, 0px)); transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.h-rd .bob { overflow: hidden; }
.h-rd .bob::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(231, 207, 156, .45), transparent); animation: hxShine 3.6s ease-in-out infinite; }
@keyframes hxShine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.h-rd .bob i { animation: hxBlink 1.6s ease-in-out infinite; }
@keyframes hxBlink { 50% { opacity: .35; } }
.h-rd .nums div { transition: transform .4s; }
.h-rd .nums div:hover { transform: translateY(-4px); }
.h-rd .nums div:hover b { color: var(--gold-l); }
.h-rd .nums b { transition: color .3s; }

/* ---------- 跑馬燈：滑過放慢、字變金 ---------- */
.h-marquee:hover .h-marquee-track { animation-play-state: paused; }
.h-marquee span { transition: color .3s; }
.h-marquee span:hover { color: var(--gold); }


/* ---------- 影片：播放鈕脈動 ---------- */
.h-vid .ply i::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .7); animation: hxRing 2.2s ease-out infinite; }
@keyframes hxRing { from { transform: scale(1); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }

/* ---------- 走進視傳系：微動態（不展開）、實驗室輪播 ---------- */
.h-tile p { transition: transform .5s cubic-bezier(.2, .8, .2, 1) .05s; }
.h-tile:hover p { transform: translateX(6px); }
.h-tile .arr { transition: transform .5s cubic-bezier(.2, .8, .2, 1), background .3s, color .3s; }
.h-tile:hover .arr { transform: rotate(-45deg); }
.h-tile .t h3 { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.h-tile:hover .t h3 { transform: translateX(6px); }
/* 實驗室卡：四張調色過的照片交叉淡入淡出＋底部場景名稱 */
.h-tile.hx-labs > img:first-of-type { opacity: 0; }
.hx-slides { position: absolute; inset: 0; z-index: -2; }
.hx-slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 1.4s ease, transform 6s linear; }
.hx-slides img.on { opacity: 1; transform: scale(1); }
.h-tile.hx-labs::after { background: linear-gradient(180deg, rgba(12, 12, 14, .15) 0%, rgba(12, 12, 14, 0) 30%, rgba(12, 12, 14, .88) 100%); }
.hx-lab-name { position: absolute; left: 24px; top: 24px; z-index: 1; display: flex; align-items: center; gap: 10px; font: 600 11px/1 ui-monospace, Menlo, monospace; letter-spacing: .16em; color: #fff; }
.hx-lab-name i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-l); box-shadow: 0 0 0 4px rgba(205, 176, 122, .25); }
.hx-lab-name span { transition: opacity .5s; }
.hx-dots { position: absolute; left: 24px; right: 24px; top: 48px; z-index: 1; display: flex; gap: 4px; }
.hx-dots b { flex: 1; height: 2px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.hx-dots b::after { content: ""; display: block; height: 100%; background: var(--gold-l); transform: scaleX(0); transform-origin: 0 50%; }
.hx-dots b.done::after { transform: scaleX(1); }
.hx-dots b.run::after { animation: hxBar var(--dur, 3.6s) linear forwards; }
@keyframes hxBar { to { transform: scaleX(1); } }

/* ---------- 加入我們：金色圓環旋轉、按鈕磁吸 ---------- */
.h-join .ring { display: block !important; position: absolute; right: -140px; top: -180px; width: 520px; height: 520px; border-radius: 50%; border: 1px dashed rgba(205, 176, 122, .45); box-shadow: 0 0 0 46px rgba(205, 176, 122, .04), 0 0 0 47px rgba(205, 176, 122, .16); animation: hxSpin 50s linear infinite; pointer-events: none; }
@keyframes hxSpin { to { transform: rotate(360deg); } }
.hx-mag { transition: transform .35s cubic-bezier(.2, .8, .2, 1), background .3s, color .3s, border-color .3s !important; }

@media (prefers-reduced-motion: reduce) {
	.hx-progress, .h-join .ring, .h-rd .bob::after, .h-rd .bob i, .h-vid .ply i::after, .h-yr.hi::before { animation: none !important; }
	.hx-slides img { transition: none; }
	.h-rd figure img { transform: scale(1.04); }
}
@media (max-width: 1100px) { .h-years::after { display: none; } }

/* =========================================================
   v3：動態更明顯（不加框）
   ========================================================= */
/* 進場：卡片由下往上錯落浮現、圖片由左往右掀開 */
.home .h-faq .h-q.rv, .home .h-mod.rv, .home .h-tile.rv, .home .h-vid.rv { transform: translateY(60px); transition: opacity .9s cubic-bezier(.2, .8, .2, 1), transform 1.1s cubic-bezier(.2, .8, .2, 1); }
.home .h-faq .h-q.rv.in, .home .h-mod.rv.in, .home .h-tile.rv.in, .home .h-vid.rv.in { transform: none; }
.home .h-tile.rv::before { content: ""; position: absolute; inset: 0; z-index: 3; background: var(--bg); transform-origin: 50% 0; pointer-events: none; }
.home .h-tile.rv::before { transition: transform 1.2s cubic-bezier(.7, 0, .2, 1); transition-delay: inherit; }
.home .h-tile.rv.in::before { transform: scaleY(0); }
.home .h-tile.rv.d1 { transition-delay: .12s; } .home .h-tile.rv.d2 { transition-delay: .24s; } .home .h-tile.rv.d3 { transition-delay: .36s; }
.home .h-rd figure.rv::before { content: ""; position: absolute; inset: 0; z-index: 3; background: #121315; transform-origin: 100% 50%; transition: transform 1.4s cubic-bezier(.7, 0, .2, 1) .1s; pointer-events: none; }
.home .h-rd figure.rv.in::before { transform: scaleX(0); }
.home .h-card .th { clip-path: inset(0 0 100% 0); transition: clip-path 1s cubic-bezier(.7, 0, .2, 1); }
.home .h-card.hx-in .th, .home.no-io .h-card .th { clip-path: inset(0 0 0 0); }

/* 四件事：浮起更多、數字放大 */
.h-q:hover { transform: translateY(-12px); box-shadow: 0 34px 50px -30px rgba(18, 19, 22, .7); }
.h-q .n { transition: color .45s, transform .6s cubic-bezier(.2, .8, .2, 1); transform-origin: 0 100%; }
.h-q:hover .n { transform: scale(1.25); }
.h-q h3 { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.h-q:hover h3 { transform: translateX(6px); }

/* 三大模組：浮起更多、色塊從上往下漫開 */
.h-mod:hover { transform: translateY(-12px); box-shadow: 0 36px 56px -32px rgba(18, 19, 22, .55); }
.h-mod::after { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%); transform: scaleY(0); transform-origin: top; transition: transform .7s cubic-bezier(.7, 0, .2, 1), opacity .4s; }
.h-mod:hover::after { transform: scaleY(1); }
.h-mod:hover .big { transform: translateY(-10px) scale(1.35) rotate(-4deg); opacity: .55; }
.h-mod:hover li { transform: translateX(8px); }
.h-mod h3 { transition: color .4s, transform .5s cubic-bezier(.2, .8, .2, 1); }
.h-mod:hover h3 { transform: translateX(4px); }

/* 走進視傳系：浮起、照片放大、文字上移 */
.h-tile { transition: transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .6s; }
.h-tile:hover { transform: translateY(-10px); box-shadow: 0 30px 50px -28px rgba(18, 19, 22, .6); }
.h-tile:hover img, .h-tile:hover .hx-slides img.on { transform: scale(1.12); }
.h-tile .t { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.h-tile:hover .t { transform: translateY(-10px); }
.h-tile:hover .arr { transform: rotate(-45deg) scale(1.15); background: var(--gold-l); border-color: var(--gold-l); color: var(--ink); }

/* 最新消息：卡片浮起、圖片放大、標題變金 */
.h-card { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.h-card:hover { transform: translateY(-8px); }
.h-card:hover .th img { transform: scale(1.1); }
.h-card h3 { transition: color .3s; }
.h-card:hover h3 { color: var(--gold); }

/* 影片：浮起、播放鈕放大 */
.h-vid { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.h-vid:hover { transform: translateY(-8px); }
.h-vid .ply i { transition: background .3s, color .3s, transform .5s cubic-bezier(.2, .8, .2, 1); }
.h-vid .ply:hover i { transform: scale(1.25); }

/* 亮點數字：滑過放大 */
.h-stat b { transition: transform .5s cubic-bezier(.2, .8, .2, 1); transform-origin: 0 100%; }
.h-stat:hover b { transform: scale(1.08); }

@media (hover: none) { .h-q:hover, .h-mod:hover, .h-tile:hover, .h-card:hover, .h-vid:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.home .h-card .th { clip-path: none !important; }
	.home .h-tile.rv::before, .home .h-rd figure.rv::before { display: none; }
	.home .h-faq .h-q.rv, .home .h-mod.rv, .home .h-tile.rv, .home .h-vid.rv { transform: none !important; }
}