/* 承泰首頁 11-15 V21「動效更豐富」提案:Eric 勾的 5 版 + 4 個野點子(提案頁 參考/動效加強V21/,答案 -答案.json)。
   程式 ct-v21.js(段落編號跟這裡一樣)。系統開了「減少動態」:程式不跑、這裡的變數都沒給 = 跟原本一樣靜止。
   新名字一律 ct21- / --c21- 開頭(11-15 全站搜過沒撞名)。 */

/* ── 1 首屏:三支影片交錯捲開(第 7 版)+ 往下捲三支往上的速度不一樣(野點子,左右快、中間慢)──
   每支影片包一格 .ct21-kvc(build.py):格子管「捲開」的遮罩,影片在格子裡往上移。
   影片比格子高 --c21-kvA(往上移的最大距離),移動量 = 首屏捲動進度 --c21-kvp(0 → 1,程式算)× 每格自己的距離。 */
#top .ct-tri .ct21-kvc { position: relative; flex: 1 1 0; min-width: 0; height: 100%; overflow: hidden; }
#top .ct-tri .ct21-kvc video { display: block; width: 100%; object-fit: cover;
  height: calc(100% + var(--c21-kvA, 0px)) !important;   /* ct.css 的 .ct-tri video 有 height 100% !important,要同樣加 */
  transform: translate3d(0, calc(var(--c21-kvp, 0) * var(--c21-kvd, 0px) * -1), 0); }
html.ct21 #top .ct-tri { --c21-kvA: 36vh; }
html.ct21 #top .ct21-kvc { --c21-kvd: var(--c21-kvA); }                       /* 左右兩支:整段捲完往上 36vh */
html.ct21 #top .ct21-kvc:nth-child(2) { --c21-kvd: calc(var(--c21-kvA) * .3); }   /* 中間那支:只走三成 */
html.ct21 #top .ct21-kvc video { will-change: transform; }
/* 捲開:載入畫面開始淡掉的那一刻(程式偵測)左 → 中 → 右錯開 .15 秒,左右從上往下、中間從下往上;整段 1 秒收完 */
html.ct21-kvwait #top .ct21-kvc { clip-path: inset(0 0 100% 0); }
html.ct21-kvwait #top .ct21-kvc:nth-child(2) { clip-path: inset(100% 0 0 0); }
html.ct21-kvgo #top .ct21-kvc { clip-path: inset(0); transition: clip-path .7s cubic-bezier(.7, 0, .2, 1); }
html.ct21-kvgo #top .ct21-kvc:nth-child(2) { transition-delay: .15s; }
html.ct21-kvgo #top .ct21-kvc:nth-child(3) { transition-delay: .3s; }

/* ── 2 服務項目:五列捲過時,每列圖示依序自己做一次小動作(野點子)──
   動作就是 ct-motion18.css「第 2 版」滑過的那套;程式依序給每列加 .ct21-go 一次(滑過照舊會動)。 */
#top .sv-tanica-ct-svlink.ct21-go .ct-svfx--0 .fx-steam { animation: ctSteam .9s ease-out var(--d, 0s); }
#top .sv-tanica-ct-svlink.ct21-go .ct-svfx--1 { animation: ctWrench .8s cubic-bezier(.3, .7, .3, 1); }
#top .sv-tanica-ct-svlink.ct21-go .ct-svfx--2 .fx-key { animation: ctKey .8s cubic-bezier(.3, .7, .3, 1); }
#top .sv-tanica-ct-svlink.ct21-go .ct-svfx--3 { animation: ctPress .45s ease-out; }
#top .sv-tanica-ct-svlink.ct21-go .ct-svfx--3 .fx-coin { animation: ctFlip .7s ease-in-out .1s; }
#top .sv-tanica-ct-svlink.ct21-go .ct-svfx--4 .fx-bottle { animation: ctPour 1s cubic-bezier(.3, .7, .3, 1); }
#top .sv-tanica-ct-svlink.ct21-go .ct-svfx--4 .fx-star { animation: ctStar 1s ease-in-out; }
#top .sv-tanica-ct-svlink.ct21-go .ct-svfx--4 .fx-drop { animation: ctDrop 1s ease-in; }

/* 跑馬燈外面的舞台(build.py .ct21-stage):高度 = 牆高 + 釘住那段(程式算);牆跟 MORE 的距離照舊 --ct-gap,改由舞台給 */
#top .ct21-stage { margin-top: var(--ct-gap); }
#top .ct21-stage > .ct-abwall { margin-top: 0; }

/* ── 3 料理牆:跟著捲動跑(第 6 版)+ 滑到某格放大浮起、其他格變暗、整排慢下來(野點子)+ 一格放大接進產品分類影片(第 1 版)──
   程式接手跑馬燈(.ct21-wall):原本的 CSS 無限捲動關掉,改每一幀算位置(基本速度照原本 90 秒 / 110 秒一圈)。
   牆左右照舊裁掉、上下不裁(浮起、放大那格要超出牆)。 */
#top .ct-abwall.ct21-wall { overflow-x: clip; overflow-y: visible; }
#top .ct21-wall .ct-abwall__track { animation: none !important; will-change: transform; }
#top .ct21-wall .ct-abwall__tile { position: relative; transition: transform .5s cubic-bezier(.2, .8, .2, 1), filter .45s, opacity .45s; }
@media (hover: hover) and (pointer: fine) {
  #top .ct21-wall.is-hov .ct-abwall__tile:not(.is-hov) { filter: brightness(.5); }
  #top .ct21-wall .ct-abwall__tile.is-hov { z-index: 2; transform: translateY(-6px) scale(1.07); }
}
/* 第 1 版:牆釘在畫面正中間那段(.is-lock)由程式一幀一幀算,過場關掉 */
#top .ct21-wall.is-lock .ct-abwall__tile { transition: none; filter: none; }
#top .ct21-wall .ct-abwall__tile.ct21-zoom { z-index: 3; }
/* 放大那格蓋滿畫面之後,關於我們的白底拿掉(被那格蓋著,看不到這一下),那格淡掉就露出底下 5B 固定層的暗底 */
html.ct21-abclear #top .ct-ab { background: transparent; }
/* 5B 暗底:同一張倒湯停格、同樣滿版裁法、跟放大那格最後一樣壓暗;平常藏著 */
#top .ct21-b5base { position: absolute; inset: 0; visibility: hidden; }
#top .ct21-b5base img { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(.22) saturate(.6); }
html.ct21-b5on #top .ct21-b5base { visibility: visible; }

/* ── 4 產品分類:換台時機器從旁邊推進來、背景跟著平移(第 3 版)+ 膠囊底色像水滴流到下一顆(野點子)──
   原本:機器淡出往上、新的從下面淡入往上。改成:往後捲 = 舊的往左滑出、新的從右邊滑進來(往回捲反過來),停住時有一點點慣性。
   位移放在裡面那層 .ctm-m(用 translate,不碰它原本的 transform);外層 .ctm-a__fig 只管淡入淡出,換台那一秒舞台左緣加一段漸層遮罩(不滑過左邊的字)。
   背景:影片 / 照片在框裡往左平移(用 object-position,框比圖窄,不會露邊),約機器的五分之一 → 有前後景深。 */
#top .ctm-a.ct21-pm .ctm-a__fig, #top .ctm-a.ct21-pm .ctm-a__fig.is-past { transform: none; transition: opacity .45s cubic-bezier(.55, 0, .9, .45); }   /* 舊的先滑一段才淡(原本一換就淡,看不出往左走) */
#top .ctm-a.ct21-pm .ctm-a__fig.is-on { transition: opacity .5s .08s; }
#top .ctm-a.ct21-pm .ctm-a__fig .ctm-m { translate: 55cqw 0; transition: translate .65s cubic-bezier(.4, 0, .2, 1); }
#top .ctm-a.ct21-pm .ctm-a__fig.is-past .ctm-m { translate: -55cqw 0; }
#top .ctm-a.ct21-pm .ctm-a__fig.is-on .ctm-m { translate: 0 0; transition: translate .95s cubic-bezier(.2, 1.3, .4, 1); }   /* 1.3 = 停住前多走一點點(約 10px)再收回 */
/* 換台那一秒:舞台左緣往右 22% 漸漸透明、左緣以外不畫 → 舊的那台滑到字那邊之前就淡掉,看不到硬切的邊 */
#top .ctm-a.ct21-pm.ct21-sw .ctm-a__fig { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
#top .ctm-a.ct21-pm .ctm-a__bg { object-position: 30% 50%; transition: opacity .8s, object-position 1.1s cubic-bezier(.3, .7, .3, 1); }
#top .ctm-a.ct21-pm .ctm-a__bg.is-past { object-position: 70% 50%; }
#top .ctm-a.ct21-pm .ctm-a__bg.is-on { object-position: 50% 50%; }
/* 膠囊:選中的黑底改成一層會流動的底(.ct21-ink,程式算位置)。
   11-15 V23 Eric「流過去會看到灰框,像沒接好」:這層蓋在膠囊上面(黑底 + 同位置白字,clip-path 只露出水滴那塊),
   蓋到的地方灰框被蓋掉、字變白;膠囊本身一律畫成沒選中的樣子(灰框灰字),選中的黑底白字全由這層畫。 */
#top .ct21-pm .ctm-a__tabs { position: relative; }
#top .ct21-pm .ctm-a__tab.is-on { background: transparent; border: var(--ct-rule); color: rgba(0, 0, 0, .55); }
#top .ct21-ink { position: absolute; left: 0; top: 0; z-index: 2; margin: 0; padding: 0; list-style: none; background: #000; pointer-events: none; clip-path: inset(0 100% 100% 0); }   /* 外形由程式畫(path),兩顆膠囊中間凹成脖子 */
#top .ct21-ink__t { position: absolute; display: flex; align-items: center; justify-content: center; color: #fff; white-space: nowrap; }

/* ── 5 頁尾掀蓋(第 2 版):整頁像盒蓋往上掀走,頁尾早就在底下等著 ──
   只在 1024 以上、頁尾一屏放得下時(.ct21-lid,程式判斷):頁尾跟著捲動往回推,看起來停在畫面最底,最新消息那段(蓋子)往上捲走露出它;
   蓋子下緣圓角 16(全站大面板圓角),不加陰影。Cheng Tai 大字跟著蓋子掀開的高度一個字母一個字母升起,全開剛好到位,i 的圓點到位後照舊彈一下。 */
html.ct21-lid #top .c-footer { z-index: 0; }
html.ct21-lid #top .ctm { z-index: 1; }   /* 產品段原本沒有 z-index:1024×768 最新消息比頁尾矮,頁尾往回推時會蓋到產品段最下面 36px */
html.ct21-lid #top .ct-nw { border-radius: 0 0 16px 16px; }
html.ct21-lid .ct-ftword .ct-ftl { transition: none !important; }
html.ct21-lid .ct-ftword.is-in .ct-ftdot { animation: none; }
html.ct21-lid .ct-ftword.ct21-up .ct-ftdot { animation: ctDotBounce 1s cubic-bezier(.3, 0, .3, 1) .05s both; }

@media (prefers-reduced-motion: reduce) {
  #top .ct21-kvc { clip-path: none !important; }
  #top .ct21-kvc video { transform: none !important; height: 100% !important; }
}