/* 承泰首頁「動效加強版」共用樣式(N3 產品換場、N1 光掃過、N2 景深、2A 釘住掀蓋、4A 開門、4B 面板、3A 溫度窗格、
   3B 三排斜流、6A 年份橫移、6B 服務範圍、6C 圖示小動作)。各版在自己的 ct.css 改下面的 --ctp-* 變數換成自己的樣子。 */
@property --lx { syntax: "<percentage>"; inherits: true; initial-value: 70%; }
@property --ly { syntax: "<percentage>"; inherits: true; initial-value: 28%; }
@property --la { syntax: "<number>"; inherits: true; initial-value: .55; }
html {   /* 預設值(各版 ct.css 的 :root 會蓋過) */
  --ctp-bg: #121212; --ctp-fg: #f3ede3; --ctp-mute: rgba(243, 237, 227, .66); --ctp-line: rgba(243, 237, 227, .22);
  --ctp-head: var(--ct-zh); --ctp-num: "Inter", var(--ct-zh); --ctp-side: clamp(20px, 4vw, 64px); --ctp-r: 0px;
  --ctp-ease: cubic-bezier(.19, 1, .22, 1); --ctp-io: cubic-bezier(.65, 0, .35, 1);
}

/* ── N1 光掃過(一道斜的光從左掃到右)───────────────────────────────────── */
.ct-sweep { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; mix-blend-mode: soft-light; }
.ct-sweep::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 34%; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 246, 230, .0) 20%, rgba(255, 246, 230, .95) 50%, rgba(255, 246, 230, 0) 80%); transform: translateX(-120%) skewX(-16deg); opacity: 0; }
.ct-sweep.is-go::before, [data-ct-sweep].is-in .ct-sweep::before { animation: ctSweep 2.1s var(--ctp-io) .15s both; }
@keyframes ctSweep { 0% { transform: translateX(-120%) skewX(-16deg); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(330%) skewX(-16deg); opacity: 0; } }

/* ── N3 產品換場(釘住;場景一台換一台)+ N2 三層景深 ───────────────────────────── */
.ct-ps { position: relative; height: calc((var(--n) + 1.2) * 100vh); background: var(--ctp-bg); color: var(--ctp-fg); }
.ct-ps__stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.ct-ps__scenes { position: absolute; inset: -3%; will-change: transform; }
.ct-ps__scene { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.06); transition: opacity 1.1s var(--ctp-io), transform 2.4s var(--ctp-ease), filter 1.4s; filter: brightness(.7); }
.ct-ps__scene.is-on { opacity: 1; transform: scale(calc(1 + var(--z, 0) * .05)); filter: none; transition: opacity 1.1s var(--ctp-io), transform .6s linear, filter 1.4s; }
.ct-ps__scene img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
/* 燈光跟著換:暖色光圈換位置、換強弱 */
.ct-ps__light { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: soft-light; background: radial-gradient(42% 60% at var(--lx, 70%) var(--ly, 28%), rgba(255, 196, 120, var(--la, .55)), rgba(255, 196, 120, 0) 70%); transition: --lx 1.6s var(--ctp-io), --ly 1.6s var(--ctp-io), --la 1.6s; }
.ct-ps[data-cur="0"] .ct-ps__light { --lx: 64%; --ly: 22%; --la: .6; }
.ct-ps[data-cur="1"] .ct-ps__light { --lx: 74%; --ly: 30%; --la: .5; }
.ct-ps[data-cur="2"] .ct-ps__light { --lx: 68%; --ly: 18%; --la: .7; }
.ct-ps[data-cur="3"] .ct-ps__light { --lx: 60%; --ly: 34%; --la: .45; }
.ct-ps[data-cur="4"] .ct-ps__light { --lx: 70%; --ly: 26%; --la: .55; }
.ct-ps__fx { position: absolute; right: 2%; top: -6%; z-index: 3; width: 58%; opacity: 0; pointer-events: none; transition: opacity 1.2s; animation: ctDrift 9s ease-in-out infinite alternate; }
.ct-ps.is-steam .ct-ps__fx { opacity: .5; }
@keyframes ctDrift { from { translate: 0 0; } to { translate: -3% -5%; } }
.ct-ps__shade { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(90deg, var(--ctp-shade, rgba(10, 10, 10, .82)) 0%, var(--ctp-shade2, rgba(10, 10, 10, .45)) 34%, rgba(10, 10, 10, 0) 58%); }
.ct-ps__text { position: absolute; left: var(--ctp-side); top: 50%; z-index: 4; width: min(40vw, 560px); transform: translateY(-50%); }
.ct-ps__eyebrow { margin: 0 0 clamp(18px, 2.2vw, 32px); font: 500 12px/1 var(--ctp-num); letter-spacing: .24em; text-transform: uppercase; color: var(--ctp-mute); }
.ct-ps__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ctp-line); }
.ct-ps__item { border-bottom: 1px solid var(--ctp-line); }
.ct-ps__item a { position: relative; display: grid; grid-template-columns: 3.2em 1fr 28px; align-items: center; column-gap: 12px; padding: clamp(12px, 1.6vh, 18px) 0; color: inherit; text-decoration: none; }
.ct-ps__no { font: 500 13px/1 var(--ctp-num); letter-spacing: .08em; color: var(--ctp-mute); transition: color .5s; }
.ct-ps__name { font: 500 clamp(17px, 1.35vw, 22px)/1.35 var(--ctp-head); letter-spacing: .1em; color: var(--ctp-mute); transition: color .5s, font-size .6s var(--ctp-ease); }
.ct-ps__desc { grid-column: 2 / 3; display: grid; grid-template-rows: 0fr; overflow: hidden; font: 400 max(15px, .98vw)/1.85 var(--ct-zh); letter-spacing: .04em; color: var(--ctp-mute); opacity: 0; transition: grid-template-rows .8s var(--ctp-ease), opacity .6s, margin .6s; }
.ct-ps__go { grid-column: 3; grid-row: 1; justify-self: end; width: 22px; height: 22px; color: var(--ctp-mute); opacity: 0; transform: translateX(-8px); transition: opacity .5s, transform .6s var(--ctp-ease); }
.ct-ps__go .ct-i { width: 100%; height: 100%; }
.ct-ps__item.is-on .ct-ps__no, .ct-ps__item.is-on .ct-ps__name { color: var(--ctp-fg); }
.ct-ps__item.is-on .ct-ps__name { font-size: clamp(26px, 2.5vw, 40px); }
.ct-ps__item.is-on .ct-ps__desc { grid-template-rows: 1fr; opacity: 1; margin-top: 8px; }
.ct-ps__item.is-on .ct-ps__go, .ct-ps__item a:hover .ct-ps__go { opacity: 1; transform: none; color: var(--ctp-fg); }
.ct-ps__desc { min-height: 0; }
.ct-ps__meter { position: absolute; right: var(--ctp-side); bottom: clamp(24px, 4vh, 44px); z-index: 4; display: flex; align-items: center; gap: 18px; font: 500 13px/1 var(--ctp-num); letter-spacing: .08em; color: var(--ctp-mute); }
.ct-ps__num b { font-weight: 500; color: var(--ctp-fg); }
.ct-ps__ticks { display: flex; gap: 6px; }
.ct-ps__ticks i { width: 26px; height: 2px; background: var(--ctp-line); transition: background .5s, width .6s var(--ctp-ease); }
.ct-ps__ticks i.is-on { width: 48px; background: var(--ct-yel); }

/* ── C 版整條場景(N1 + N2)────────────────────────────────────────────── */
.ct-strip { position: absolute; inset: 0; overflow: hidden; }
.ct-strip__bg { position: absolute; inset: -4%; will-change: transform; }
.ct-strip__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 50%; transition: transform 1.6s var(--ctp-ease); }
.ct-strip__fx { position: absolute; right: 4%; top: -10%; z-index: 2; width: 50%; opacity: .42; pointer-events: none; animation: ctDrift 9s ease-in-out infinite alternate; }

/* ── 2A 釘住掀蓋(開蓋照拆成「蓋子」「機身」兩層,蓋子跟著捲動往上升)─────────────────── */
.ct-hs { position: relative; height: 280vh; background: var(--ctp-bg); color: var(--ctp-fg); --lift: 0; --st: 0; --rack: 0; }
.ct-hs__stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 72px); padding: 0 var(--ctp-side); }
.ct-hs__text { align-self: center; max-width: 420px; }
.ct-hs__no { display: block; margin-bottom: 16px; font: 500 13px/1 var(--ctp-num); letter-spacing: .1em; color: var(--ctp-mute); }
.ct-hs__name { margin: 0; font: 500 clamp(28px, 2.6vw, 44px)/1.3 var(--ctp-head); letter-spacing: .1em; }
.ct-hs__desc { margin: 18px 0 0; font: 400 max(15px, 1vw)/1.9 var(--ct-zh); letter-spacing: .04em; color: var(--ctp-mute); }
.ct-hs__more { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; color: inherit; font: 500 14px/1 var(--ctp-num); letter-spacing: .16em; text-decoration: none; }
.ct-hs__more .ct-i { width: 20px; height: 20px; transition: transform .6s var(--ctp-ease); }
.ct-hs__more:hover .ct-i { transform: translateX(6px); }
.ct-hs__m { position: relative; height: min(84vh, 62vw); aspect-ratio: 638 / 1347; transform: translateX(calc(var(--rack) * -6vw)); }
.ct-hs__m img { position: absolute; left: 0; bottom: 0; width: 100%; }
.ct-hs__closed, .ct-hs__box { height: calc(100% * 1187 / 1347); width: 100%; }
.ct-hs__box { clip-path: inset(0 0 91.2% 0); }
.ct-hs__body, .ct-hs__lid { height: 100%; }
.ct-hs__body { clip-path: inset(calc(35.6% + (1 - var(--lift)) * 19.7%) 0 0 0); }
.ct-hs__lid { clip-path: inset(0 0 64.4% 0); transform: translateY(calc((1 - var(--lift)) * 19.7%)); }
.ct-hs__closed { opacity: calc(1 - var(--lift) * 7); }
.ct-hs__steam { left: 50% !important; bottom: auto !important; top: 46%; width: 200% !important; max-width: none; opacity: var(--st); transform: translate(-50%, calc(-50% - var(--st) * 14%)) scale(calc(.7 + var(--st) * .5)); pointer-events: none; }
.ct-hs__rack { justify-self: start; width: min(30vw, 440px); aspect-ratio: 900 / 1037; margin: 0; overflow: hidden; border-radius: var(--ctp-r); clip-path: inset(0 0 0 calc((1 - var(--rack)) * 100%)); }
.ct-hs__rack img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.15 - var(--rack) * .15)); }
.ct-hs__bar { position: absolute; left: var(--ctp-side); right: var(--ctp-side); bottom: clamp(24px, 4vh, 44px); height: 1px; background: var(--ctp-line); }
.ct-hs__bar i { position: absolute; inset: 0; background: var(--ct-yel); transform-origin: left; transform: scaleX(var(--hp, 0)); }

/* ── 4A 開門冒熱氣 + 4B 面板亮起 ─────────────────────────────────────────── */
.ct-of { padding: clamp(80px, 9vw, 160px) var(--ctp-side); background: var(--ctp-bg); color: var(--ctp-fg); }
.ct-of__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, .9fr); align-items: center; gap: clamp(24px, 4vw, 72px); max-width: 1680px; margin: 0 auto; }
.ct-door { position: relative; margin: 0; }
.ct-door__in { position: relative; aspect-ratio: 9 / 14; overflow: hidden; border-radius: var(--ctp-r); background: #0d0d0d; clip-path: inset(0 0 0 100%); transition: clip-path 1.5s var(--ctp-io); }
.ct-door--scene .ct-door__in { aspect-ratio: 4 / 5; }
.ct-door__in video, .ct-door__in img { width: 100%; height: 100%; object-fit: cover; }
.ct-door.is-in .ct-door__in, .ct-door--scene.is-in .ct-door__in { clip-path: inset(0 0 0 0); }
.ct-door__heat, .ct-door__steam { position: absolute; pointer-events: none; opacity: 0; }
.ct-door__heat { left: 18%; top: -26%; width: 64%; }
.ct-door__steam { left: -10%; top: -18%; width: 120%; }
.ct-door.is-steam .ct-door__heat { animation: ctHeat 4.8s ease-out .2s both; }
.ct-door.is-steam .ct-door__steam { animation: ctPuff 3.4s ease-out both; }
@keyframes ctPuff { 0% { opacity: 0; transform: translateY(20%) scale(.7); } 25% { opacity: .85; } 100% { opacity: 0; transform: translateY(-22%) scale(1.25); } }
@keyframes ctHeat { 0% { opacity: 0; transform: translateY(14%); } 30% { opacity: .9; } 100% { opacity: .25; transform: translateY(-8%); } }
.ct-of__mid { display: flex; justify-content: center; }
.ct-panel2 { position: relative; width: min(100%, 520px); aspect-ratio: 916 / 1109; }
.ct-panel2 > img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .35)); }
.ct-panel2__screen { position: absolute; left: 9.6%; top: 15.8%; width: 16.1%; height: 21.3%; overflow: hidden; border-radius: 2px; background: #05080d; }
.ct-scr { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 5%; padding: 7% 6%; opacity: 0; }
.ct-scr__top { display: flex; justify-content: space-between; gap: 4%; height: 9%; }
.ct-scr__top i { flex: 1; border-radius: 1px; background: #e9eef5; opacity: 0; transform: scale(.3); }
.ct-scr__top i:nth-child(2) { background: #f2b42c; } .ct-scr__top i:nth-child(3) { background: #f07a2a; } .ct-scr__top i:nth-child(4) { background: #3fc3e8; }
.ct-scr__top i:nth-child(6) { background: #8ad16b; }
.ct-scr__body { flex: 1; display: flex; gap: 6%; }
.ct-scr__side { display: flex; flex-direction: column; gap: 9%; width: 10%; }
.ct-scr__side u { height: 9%; border-radius: 1px; background: rgba(233, 238, 245, .8); opacity: 0; }
.ct-scr__tiles { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 14%; gap: 6% 6%; align-content: start; }
.ct-scr__tiles b { border-radius: 1px; background: linear-gradient(90deg, #3a8fd0 0 22%, #1f5d93 22%); opacity: 0; transform: translateY(40%); }
.ct-panel2.is-panel .ct-panel2__screen { animation: ctFlash .9s steps(1, end) .3s both; box-shadow: 0 0 22px 3px rgba(110, 190, 255, .4); transition: box-shadow 1.2s 1s; }
@keyframes ctFlash { 0% { background: #05080d; } 15% { background: #cfe7ff; } 30% { background: #05080d; } 48% { background: #9fcfff; } 64% { background: #0b1a2c; } 100% { background: #0b1a2c; } }
.ct-panel2.is-panel .ct-scr { opacity: 1; transition: opacity .2s .95s; }
.ct-panel2.is-panel .ct-scr__top i { opacity: 1; transform: none; transition: opacity .25s, transform .45s var(--ctp-ease); transition-delay: calc(1.05s + var(--j) * .09s); }
.ct-panel2.is-panel .ct-scr__side u { opacity: 1; transition: opacity .3s calc(1.6s + var(--j) * .06s); }
.ct-panel2.is-panel .ct-scr__tiles b { opacity: 1; transform: none; transition: opacity .3s, transform .5s var(--ctp-ease); transition-delay: calc(1.75s + var(--j) * .12s); }
.ct-of__no { display: block; margin-bottom: 16px; font: 500 13px/1 var(--ctp-num); letter-spacing: .1em; color: var(--ctp-mute); }
.ct-of__name { margin: 0; font: 500 clamp(28px, 2.6vw, 44px)/1.3 var(--ctp-head); letter-spacing: .1em; }
.ct-of__desc { margin: 18px 0 0; font: 400 max(15px, 1vw)/1.9 var(--ct-zh); letter-spacing: .04em; color: var(--ctp-mute); }
.ct-of__more { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; color: inherit; font: 500 14px/1 var(--ctp-num); letter-spacing: .16em; text-decoration: none; }
.ct-of__more .ct-i { width: 20px; height: 20px; transition: transform .6s var(--ctp-ease); }
.ct-of__more:hover .ct-i { transform: translateX(6px); }

/* ── 3A 蒸烤箱窗格 + 溫度(溫度數字是我們加的裝飾)──────────────────────────── */
.ct-ow { position: relative; display: flex; align-items: flex-end; gap: clamp(16px, 2vw, 32px); --heat: 0; }
.ct-ow__door { flex: 1; padding: clamp(10px, 1.1vw, 18px); border-radius: calc(var(--ctp-r) + 10px); background: linear-gradient(145deg, #3b3d40, #1b1c1e 55%, #2b2c2f); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 24px 50px rgba(0, 0, 0, .3); }
.ct-ow__glass { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--ctp-r); background: #000; }
.ct-ow__glass img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ct-ow__raw { filter: brightness(calc(.62 + var(--heat) * .3)) saturate(.85); }
.ct-ow__baked { opacity: 0; transition: opacity 1.6s var(--ctp-io); }
.ct-ow.is-baked .ct-ow__baked { opacity: 1; }
.ct-ow__glow { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(80% 70% at 50% 100%, rgba(255, 140, 40, calc(var(--heat) * .55)), rgba(255, 140, 40, 0) 70%); }
.ct-ow.is-baked .ct-ow__glow { opacity: .45; transition: opacity 2s; }
.ct-ow__glare { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .16) 0 18%, rgba(255, 255, 255, 0) 30% 62%, rgba(255, 255, 255, .07) 74%, rgba(255, 255, 255, 0) 86%); }
.ct-ow__temp { flex: none; margin: 0; font: 300 clamp(44px, 4.6vw, 84px)/.9 var(--ctp-num); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ctp-fg); }
.ct-ow__temp i { margin-left: .06em; font-style: normal; font-size: .38em; letter-spacing: 0; vertical-align: top; color: #f07a2a; }

/* ── 3B 料理照三排斜流 ────────────────────────────────────────────────── */
.ct-f3 { position: relative; overflow: hidden; padding: clamp(40px, 5vw, 90px) 0; }
.ct-f3__tilt { display: flex; flex-direction: column; gap: clamp(10px, 1.2vw, 20px); transform: rotate(-5deg) scale(1.12); transform-origin: center; }
.ct-f3__row { display: flex; gap: clamp(10px, 1.2vw, 20px); width: max-content; margin: 0; padding: 0; list-style: none; will-change: transform; }
.ct-f3__tile { position: relative; flex: none; width: clamp(200px, 19vw, 340px); aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--ctp-r); background: #1b1c22; transition: opacity .6s, filter .6s, transform .8s var(--ctp-ease); }
.ct-f3__tile a { display: block; width: 100%; height: 100%; }
.ct-f3__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ctp-ease); }
.ct-f3.is-hover .ct-f3__tile { opacity: .38; filter: grayscale(.6); }
.ct-f3.is-hover .ct-f3__tile:hover { z-index: 2; opacity: 1; filter: none; transform: scale(1.12); box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }

/* ── 6A 年份大字橫移(數字後面;我們加的裝飾)──────────────────────────────── */
.ct-years { position: absolute; left: 0; right: 0; top: 50%; z-index: 0; overflow: hidden; transform: translateY(-50%); pointer-events: none; }
.ct-years__run { display: flex; width: max-content; animation: ctYears 90s linear infinite; }
.ct-years span { padding-right: .5em; font: 700 clamp(90px, 13vw, 240px)/1 var(--ctp-num); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px var(--ctp-years, rgba(127, 127, 127, .28)); }
@keyframes ctYears { to { transform: translateX(-50%); } }
.ct-years-host { position: relative; isolation: isolate; }
.ct-years-host > :not(.ct-years) { position: relative; z-index: 1; }

/* ── 6B 服務範圍圈 ────────────────────────────────────────────────────── */
.ct-map__area { fill: var(--ct-red); fill-opacity: .1; stroke: var(--ct-red); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0; }
.ct-map.is-in .ct-map__area { opacity: 1; transform: scale(1); transition: transform 1.6s var(--ctp-ease) calc(2.3s + var(--i) * .45s), opacity .6s calc(2.3s + var(--i) * .45s); }

/* ── 6C 服務圖示畫完後,滑過有小動作 ───────────────────────────────────────── */
[data-ct-ico] .ct-ico, [data-ct-ico] .ct-ico path { transform-box: view-box; }
[data-ct-ico="0"].is-hov .ct-ico path:nth-child(n+2):nth-child(-n+4) { animation: ctIcoSteam 1.2s ease-out; }
[data-ct-ico="0"].is-hov .ct-ico path:nth-child(3) { animation-delay: .12s; }
[data-ct-ico="0"].is-hov .ct-ico path:nth-child(4) { animation-delay: .24s; }
@keyframes ctIcoSteam { 0% { transform: translateY(0); opacity: 1; } 45% { transform: translateY(-4px); opacity: .1; } 46% { transform: translateY(3px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
[data-ct-ico="1"].is-hov .ct-ico { transform-origin: 31px 17px; animation: ctIcoWrench .9s var(--ctp-ease); }
@keyframes ctIcoWrench { 0% { transform: rotate(0); } 35% { transform: rotate(-32deg); } 70% { transform: rotate(6deg); } 100% { transform: rotate(0); } }
[data-ct-ico="2"].is-hov .ct-ico { transform-origin: 24px 24px; animation: ctIcoKey 1s var(--ctp-io); }
@keyframes ctIcoKey { 0% { transform: scaleY(1); } 50% { transform: scaleY(-1); } 100% { transform: scaleY(1); } }
[data-ct-ico="3"].is-hov .ct-ico { transform-origin: 18px 17px; animation: ctIcoTag 1.4s ease-out; }
@keyframes ctIcoTag { 0% { transform: rotate(0); } 20% { transform: rotate(14deg); } 45% { transform: rotate(-9deg); } 70% { transform: rotate(4deg); } 100% { transform: rotate(0); } }
[data-ct-ico="4"].is-hov .ct-ico path:nth-child(3) { animation: ctIcoDrop 1.1s ease-in; }
@keyframes ctIcoDrop { 0% { transform: translateY(0); opacity: 1; } 55% { transform: translateY(7px); opacity: 0; } 56% { transform: translateY(-5px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }

/* ── 2D 加強:倒影、尺寸刻度線、滑過哪台哪台往前站一步 ─────────────────────────── */
[data-ct-lineup2] .ct-lineup__item > img, [data-ct-lineup2] .ct-hood { -webkit-box-reflect: below 2px linear-gradient(transparent 64%, rgba(255, 255, 255, var(--ctp-refl, .2))); }
[data-ct-lineup2].is-settled .ct-lineup__item { transition: opacity .5s, transform .8s var(--ctp-ease), filter .5s; transition-delay: 0s; cursor: pointer; }
[data-ct-lineup2].is-settled:hover .ct-lineup__item { opacity: .42; filter: grayscale(.4); }
[data-ct-lineup2].is-settled .ct-lineup__item:hover { opacity: 1; filter: none; transform: translateY(-12px) scale(1.06); }
.ct-ruler { position: relative; height: 22px; margin-top: clamp(40px, 5vw, 80px); color: var(--ctp-rule, currentColor); }
.ct-ruler__line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: currentColor; opacity: .5; transform-origin: left; transform: scaleX(0); transition: transform 1.6s var(--ctp-io) .4s; }
.ct-ruler i { position: absolute; left: var(--x); top: 0; width: 1px; height: calc(6px + var(--t) * 10px); background: currentColor; opacity: 0; transition: opacity .4s calc(.6s + var(--x) * .012s); }
.is-in + .ct-ruler .ct-ruler__line { transform: scaleX(1); }
.is-in + .ct-ruler i { opacity: .5; }

/* ── 1A 加強(B 版):三格合一,中間那格撐滿框、兩邊往外滑出,最後換成橫式情境大圖 ──────────── */
.ct-tri--merge { position: relative; --m: 0; }
.ct-tri--merge > video:nth-of-type(1), .ct-tri--merge > video:nth-of-type(3) { flex: calc(1 - var(--m)) 1 0 !important; opacity: calc(1 - var(--m) * 1.6); }
.ct-tri--merge > video:nth-of-type(1) { transform: translateX(calc(var(--m) * -30%)); }
.ct-tri--merge > video:nth-of-type(3) { transform: translateX(calc(var(--m) * 30%)); }
.ct-tri__scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: calc((var(--m) - .62) * 3); pointer-events: none; }

/* ── 1A 加強(C 版):三格依序換成同一張橫式情境大圖的三段,最後縫合 ───────────────── */
.ct-tri--slice { --g: 2px; gap: var(--g) !important; }
.ct-tri__cell { position: relative; flex: 1 1 0; min-width: 0; height: 100%; overflow: hidden; }
.ct-tri__cell video { width: 100%; height: 100% !important; object-fit: cover; }
.ct-tri__slice { position: absolute; inset: 0; overflow: hidden; clip-path: inset(calc((1 - var(--s, 0)) * 100%) 0 0 0); }
.ct-tri__slice img { position: absolute; top: 0; left: calc(var(--k) * (-100% - var(--g))); width: calc(300% + var(--g) * 2); max-width: none; height: 100%; object-fit: cover; transform: scale(calc(1.08 - var(--s, 0) * .08)); }

@media (max-width: 767px) {
  .ct-ps { height: calc((var(--n) + .8) * 100vh); }
  .ct-ps__scenes { inset: 0; }
  .ct-ps__scene img { object-position: 74% 50%; }
  .ct-ps__shade { background: linear-gradient(0deg, var(--ctp-shade, rgba(10, 10, 10, .9)) 0%, var(--ctp-shade2, rgba(10, 10, 10, .5)) 46%, rgba(10, 10, 10, 0) 70%); }
  .ct-ps__text { top: auto; bottom: 72px; width: auto; right: var(--ctp-side); transform: none; }
  .ct-ps__item:not(.is-on) .ct-ps__name { font-size: 15px; }
  .ct-ps__fx { width: 110%; right: -20%; }
  .ct-hs { height: 240vh; }
  .ct-hs__stick { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: end; gap: 12px; padding-top: 84px; padding-bottom: 40px; }
  .ct-hs__text { grid-row: 1; }
  .ct-hs__desc, .ct-hs__more { display: none; }
  .ct-hs__m { grid-row: 2; justify-self: center; height: 58vh; transform: none; }
  .ct-hs__rack { position: absolute; right: var(--ctp-side); bottom: 60px; width: 44vw; }
  .ct-of__grid { grid-template-columns: 1fr 1fr; }
  .ct-of__text { grid-column: 1 / 3; }
  .ct-ow { flex-direction: column; align-items: stretch; }
  .ct-ow__temp { align-self: flex-end; }
  .ct-f3__tile { width: 46vw; }
}
@media (prefers-reduced-motion: reduce) {
  .ct-years__run, .ct-ps__fx, .ct-strip__fx { animation: none; }
}