/* =========================================================
   首頁主視覺 v5 試做（2026.10）「Cinematic Showcase」
   全螢幕得獎作品＋開場快門＋切片轉場＋Ken Burns＋光影顆粒
   只用在 index-hero-v5.html；搭配 assets/js/home-hero-v5.js
   ========================================================= */
.h5 { --au1: #F7EBCD; --au2: #DCBC7E; --au3: #A98447; --dur: 6500ms;
	position: relative; min-height: 100vh; min-height: 100svh; background: #0b0c0e; color: #fff; overflow: hidden; isolation: isolate; display: flex; align-items: center; }

/* ---------- 舞台：作品大圖 ---------- */
.h5-stage { position: absolute; inset: -10px; z-index: -3; translate: var(--px, 0) var(--py, 0); transition: translate 1.4s cubic-bezier(.2, .8, .2, 1); }
.h5-slide { position: absolute; inset: 0; opacity: 0; }
.h5-slide.on { opacity: 1; z-index: 1; }
.h5-slide img, .h5-sl img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.h5-slide.on img { animation: h5Kb calc(var(--dur) + 1800ms) linear both; }
@keyframes h5Kb { from { transform: scale(1.06) translate3d(.8%, .4%, 0); } to { transform: scale(1) translate3d(0, 0, 0); } }
/* 轉場切片 */
.h5-slices { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: flex; }
.h5-sl { position: relative; flex: 1; height: 100%; overflow: hidden; clip-path: inset(0 0 100% 0); }
.h5-sl:nth-child(even) { clip-path: inset(100% 0 0 0); }
.h5-sl img { width: var(--sw); max-width: none; left: var(--sx); transform: scale(1.06) translate3d(.8%, .4%, 0); }
.h5-sl::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; top: 0; background: linear-gradient(90deg, transparent, var(--au2), transparent); opacity: 0; }
.h5-sl:nth-child(even)::after { top: auto; bottom: 0; }
.h5-slices.go .h5-sl { animation: h5SlDown 1.05s cubic-bezier(.77, 0, .18, 1) both; animation-delay: calc(var(--i) * 70ms); }
.h5-slices.go .h5-sl:nth-child(even) { animation-name: h5SlUp; }
.h5-slices.go .h5-sl::after { animation: h5Edge 1.05s cubic-bezier(.77, 0, .18, 1) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes h5SlDown { to { clip-path: inset(0 0 0 0); } }
@keyframes h5SlUp { to { clip-path: inset(0 0 0 0); } }
@keyframes h5Edge { 0% { opacity: 1; transform: translateY(0); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(var(--edge, 100vh)); } }
.h5-sl:nth-child(even)::after { --edge: -100vh; }

/* 光影：左側壓暗確保文字、暗角、游標聚光、顆粒 */
.h5-shade { position: absolute; inset: 0; z-index: -2; pointer-events: none;
	background: linear-gradient(90deg, rgba(11, 12, 14, .92) 0%, rgba(11, 12, 14, .78) 30%, rgba(11, 12, 14, .25) 58%, rgba(11, 12, 14, .05) 78%),
	linear-gradient(0deg, rgba(11, 12, 14, .85) 0%, rgba(11, 12, 14, 0) 34%),
	linear-gradient(180deg, rgba(11, 12, 14, .55) 0%, rgba(11, 12, 14, 0) 22%),
	radial-gradient(120% 90% at 70% 45%, transparent 55%, rgba(0, 0, 0, .45) 100%); }
.h5-light { position: absolute; inset: 0; z-index: -2; pointer-events: none; mix-blend-mode: soft-light; opacity: 0; transition: opacity .6s;
	background: radial-gradient(520px circle at var(--lx, 70%) var(--ly, 40%), rgba(255, 240, 210, .55), transparent 60%); }
.h5:hover .h5-light { opacity: 1; }
.h5-grain { position: absolute; inset: -50%; z-index: -1; pointer-events: none; opacity: .08; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
	animation: h5Grain 1.2s steps(6) infinite; }
@keyframes h5Grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -2%); } 60% { transform: translate(-2%, -4%); } 80% { transform: translate(4%, 2%); } 100% { transform: translate(0, 0); } }

/* ---------- 文字 ---------- */
.h5-in { position: relative; z-index: 2; width: 100%; padding-top: 110px; padding-bottom: 170px; }
.h5-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0; font-size: 13px; letter-spacing: .14em; color: rgba(255, 255, 255, .78); }
.h5-kicker b { color: #fff; font-weight: 700; }
.h5-kicker span { width: 28px; height: 1px; background: var(--au2); }
.h5-title { margin: 26px 0 0; font-family: var(--serif, "Noto Serif TC", serif); font-weight: 900; font-size: clamp(42px, 6.6vw, 104px); line-height: 1.12; letter-spacing: .01em; color: #fff; }
.h5-title .l { display: block; overflow: hidden; padding-bottom: .06em; }
.h5-title .l > span { display: inline-block; }
.h5-word { display: inline-flex; position: relative; white-space: nowrap; }
.h5-word i { font-style: normal; display: inline-block; background: linear-gradient(105deg, var(--au2) 0%, var(--au1) 30%, var(--au2) 55%, var(--au3) 80%, var(--au2) 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: h5Ch .85s cubic-bezier(.2, .8, .2, 1) both, h5Shine 5s ease-in-out infinite; animation-delay: calc(var(--i) * 60ms), 0s; filter: drop-shadow(0 0 16px rgba(220, 188, 126, .18)); }
.h5-word.out i { animation: h5ChOut .45s cubic-bezier(.6, 0, .8, .2) both; animation-delay: calc(var(--i) * 30ms); }
@keyframes h5Ch { from { opacity: 0; transform: translateY(.45em) rotate(6deg); filter: blur(10px); } }
@keyframes h5ChOut { to { opacity: 0; transform: translateY(-.35em); filter: blur(8px); } }
@keyframes h5Shine { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.h5-word::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: 2px; background: linear-gradient(90deg, var(--au3), var(--au1), var(--au3)); transform-origin: 0 50%; transform: scaleX(var(--wp, 0)); opacity: .75; }
.h5.playing .h5-word.run::after { animation: h5Prog var(--dur) linear both; }
.h5.held .h5-word.run::after { animation-play-state: paused; }
.h5-lead { max-width: 34em; margin: 30px 0 0; font-size: clamp(15px, 1.25vw, 17.5px); line-height: 1.9; color: rgba(255, 255, 255, .82); }
.h5-lead b { color: var(--au1); font-weight: 700; }
.h5-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.h5 .h-btn.pri { background: linear-gradient(105deg, #EFDFB8, #D2B176 60%, #B8945A); color: #1c170e !important; font-weight: 700; }
.h5 .h-btn.pri:hover { background: #fff; }
.h5 .h-btn.gho { border: 1px solid rgba(255, 255, 255, .55); color: #fff !important; }
.h5 .h-btn.gho:hover { border-color: var(--au2); color: var(--au1) !important; background: rgba(255, 255, 255, .06); }

/* ---------- 作品說明卡 ---------- */
.h5-cap { position: absolute; z-index: 3; right: calc(clamp(16px, 2.4vw, 36px) + 132px); bottom: 118px; width: min(360px, 40vw); padding: 18px 20px 16px; border-left: 2px solid var(--au2);
	background: linear-gradient(90deg, rgba(11, 12, 14, .62), rgba(11, 12, 14, .18)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.h5-cap > * { transition: opacity .45s, transform .55s cubic-bezier(.2, .8, .2, 1); }
.h5-cap.swap > * { opacity: 0; transform: translateY(10px); }
.h5-cap.swap > *:nth-child(2) { transition-delay: .04s; } .h5-cap.swap > *:nth-child(3) { transition-delay: .08s; }
.h5-no { display: flex; align-items: center; gap: 10px; font: 600 11px/1 ui-monospace, Menlo, monospace; letter-spacing: .24em; color: rgba(255, 255, 255, .65); }
.h5-no b { color: var(--au1); font-weight: 700; }
.h5-aw { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 4px 10px 4px 8px; border: 1px solid rgba(220, 188, 126, .55); border-radius: 99px; font-style: normal; font-size: 12px; letter-spacing: .06em; color: var(--au1); }
.h5-aw::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #E30613; box-shadow: 0 0 0 3px rgba(227, 6, 19, .25); }
.h5-name { display: block; margin-top: 10px; font-family: var(--serif, "Noto Serif TC", serif); font-weight: 900; font-size: 28px; line-height: 1.25; }
.h5-en { display: block; margin-top: 2px; font-style: italic; font-family: Georgia, "Times New Roman", serif; font-size: 14px; color: rgba(255, 255, 255, .7); }
.h5-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.h5-meta a { color: var(--au1) !important; font-weight: 700; letter-spacing: .04em; display: inline-flex; align-items: center; gap: 6px; }
.h5-meta a i { transition: transform .3s; }
.h5-meta a:hover i { transform: translateX(4px); }

/* ---------- 右側作品列 ---------- */
.h5-rail { position: absolute; z-index: 3; right: clamp(16px, 2.4vw, 36px); top: 50%; transform: translateY(-50%); display: grid; gap: 10px; }
.h5-th { position: relative; width: 66px; height: 44px; padding: 0; border: 0; background: #111; cursor: pointer; overflow: hidden; opacity: .5; transition: opacity .35s, width .5s cubic-bezier(.2, .8, .2, 1), transform .4s; }
.h5-th img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.6); transition: filter .4s; }
.h5-th::before { content: attr(data-n); position: absolute; left: -26px; top: 50%; transform: translateY(-50%); font: 600 10px/1 ui-monospace, Menlo, monospace; letter-spacing: .1em; color: rgba(255, 255, 255, .5); }
.h5-th i { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--au2); transform: scaleX(0); transform-origin: left; }
.h5-th:hover { opacity: .85; }
.h5-th.on { opacity: 1; width: 92px; outline: 1px solid rgba(220, 188, 126, .8); outline-offset: 3px; }
.h5-th.on img { filter: none; }
.h5.playing .h5-th.on i { animation: h5Prog var(--dur) linear both; }
.h5.held .h5-th.on i { animation-play-state: paused; }
@keyframes h5Prog { to { transform: scaleX(1); } }
.h5-th:focus-visible { outline: 2px solid var(--au1); outline-offset: 3px; }

/* ---------- 底部 ---------- */
.h5 .h-news { z-index: 3; }
.h5-scroll { position: absolute; z-index: 3; left: clamp(16px, 5vw, 64px); bottom: 34px; display: flex; align-items: center; gap: 12px; font: 600 10.5px/1 ui-monospace, Menlo, monospace; letter-spacing: .28em; color: rgba(255, 255, 255, .6) !important; }
.h5-scroll i { position: relative; width: 1px; height: 46px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.h5-scroll i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--au1); animation: h5Drip 2s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes h5Drip { to { top: 100%; } }

/* ---------- 開場：金線＋快門 ---------- */
.h5-intro { position: absolute; inset: 0; z-index: 9; pointer-events: none; }
.h5-intro span { position: absolute; left: 0; right: 0; height: 50.5%; background: #0b0c0e; transition: transform 1.15s cubic-bezier(.77, 0, .18, 1); }
.h5-intro .t { top: 0; } .h5-intro .b { bottom: 0; }
.h5-intro i { position: absolute; left: 50%; top: 50%; width: 46vw; height: 1px; margin-left: -23vw; background: linear-gradient(90deg, transparent, var(--au2), var(--au1), var(--au2), transparent); transform: scaleX(0); transition: transform .8s cubic-bezier(.7, 0, .2, 1), opacity .4s .9s; }
.h5-intro em { position: absolute; left: 0; right: 0; top: calc(50% + 18px); text-align: center; font: 600 11px/1 ui-monospace, Menlo, monospace; letter-spacing: .5em; color: var(--au2); font-style: normal; opacity: 0; transition: opacity .5s .25s; }
.h5.s1 .h5-intro i { transform: scaleX(1); }
.h5.s1 .h5-intro em { opacity: 1; }
.h5.s2 .h5-intro i, .h5.s2 .h5-intro em { opacity: 0; transition-delay: 0s; }
.h5.s2 .h5-intro .t { transform: translateY(-101%); }
.h5.s2 .h5-intro .b { transform: translateY(101%); }
.h5.s3 .h5-intro { display: none; }
/* 文字依序升起 */
.h5 .h5-kicker, .h5 .h5-lead, .h5 .h5-cta, .h5 .h5-cap, .h5 .h5-rail, .h5 .h5-scroll, .h5 .h-news { opacity: 0; transition: opacity .9s ease, translate 1s cubic-bezier(.2, .8, .2, 1); translate: 0 18px; }
.h5 .h5-title .l > span { transform: translateY(105%); transition: transform 1.1s cubic-bezier(.2, .8, .2, 1); }
.h5.s2 .h5-title .l > span { transform: none; }
.h5.s2 .h5-title .l:nth-child(2) > span { transition-delay: .12s; }
.h5.s2 .h5-kicker { opacity: 1; translate: none; transition-delay: .25s; }
.h5.s2 .h5-lead { opacity: 1; translate: none; transition-delay: .4s; }
.h5.s2 .h5-cta { opacity: 1; translate: none; transition-delay: .55s; }
.h5.s2 .h5-cap, .h5.s2 .h5-rail { opacity: 1; translate: none; transition-delay: .75s; }
.h5.s2 .h5-scroll, .h5.s2 .h-news { opacity: 1; translate: none; transition-delay: .95s; }
.h5.s2 .h5-rail { translate: 0 0; }
.h5 .h-news { translate: -50% 18px; transform: none; }
.h5.s2 .h-news { translate: -50% 0; }

/* ---------- 響應式 ---------- */
@media (max-width: 1199px) { .h5-cap { width: 320px; bottom: 112px; } }
@media (max-width: 991px) {
	.h5 { flex-direction: column; align-items: stretch; justify-content: flex-end; }
	.h5-in { padding-top: 120px; padding-bottom: 22px; }
	.h5-shade { background: linear-gradient(180deg, rgba(11, 12, 14, .62) 0%, rgba(11, 12, 14, .35) 26%, rgba(11, 12, 14, .5) 52%, rgba(11, 12, 14, .9) 78%, rgba(11, 12, 14, .96) 100%); }
	.h5-cap { position: relative; left: auto; right: auto; bottom: auto; width: auto; margin: 6px 16px 112px; }
	.h5-rail { top: auto; bottom: 84px; left: 16px; right: auto; transform: none; grid-auto-flow: column; gap: 6px; }
	.h5-th, .h5-th.on { width: 28px; height: 4px; outline: 0; opacity: .4; }
	.h5-th.on { width: 44px; opacity: 1; background: rgba(255, 255, 255, .25); }
	.h5-th img, .h5-th::before { display: none; }
	.h5-th i { height: 100%; }
	.h5-scroll { display: none; }
	.h5-title { margin-top: 18px; }
	.h5-lead { margin-top: 18px; }
	.h5-cta { margin-top: 22px; }
}
@media (max-width: 575px) {
	.h5-title { font-size: clamp(36px, 11vw, 52px); }
	.h5-name { font-size: 22px; }
	.h5-cap { padding: 14px 16px 12px; }
	.h5-meta { font-size: 12px; }
	.h5-cta .h-btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.h5-intro { display: none; }
	.h5-slide.on img, .h5-grain, .h5-word i, .h5-scroll i::after { animation: none !important; }
	.h5 .h5-title .l > span, .h5 .h5-kicker, .h5 .h5-lead, .h5 .h5-cta, .h5 .h5-cap, .h5 .h5-rail, .h5 .h5-scroll, .h5 .h-news { transform: none !important; translate: none !important; opacity: 1 !important; transition: none !important; }
	.h5 .h-news { translate: -50% 0 !important; }
	.h5-slide { transition: opacity .6s; }
}
.h5-grain { display: none; } /* 2026.10.11 拿掉顆粒，避免暗色作品看起來雜訊多 */
.h5 { margin: 0; } /* 2026.10.11 去掉全站 section 的下方間距，讓主視覺直接接數字列 */