/* 承泰首頁 11-14 V18 再優化提案的互動樣式(程式 ct-motion18.js)。--drift 等變數沒給(程式沒跑、減少動態)= 靜止的最終狀態。 */

/* ── 第 7 版:背景圖跟著捲動慢慢動 ── 從 1.08 倍縮回 1 倍,最新消息那張同時從下面 10% 往上歸位(比捲動慢)。
   最新消息圖框要裁切(往下推的那截不能露到頁尾);產品分類的背景在大框裡(大框本來就裁切、圓角 16)。 */
#top .ct-nwbg { overflow: hidden; }
#top .ct-nwbg img { transform-origin: 0 100%; will-change: transform;
  transform: translateY(calc((1 - var(--drift, 1)) * 10%)) scale(calc(1 + .08 * (1 - var(--drift, 1)))); }
#top .ctm-a__bg { transform-origin: 60% 50%;
  transform: scale(calc(1 + .08 * (1 - var(--drift, 1)))); }   /* 游標景深拿掉後回到最小 1 倍 */
@media (prefers-reduced-motion: reduce) { #top .ct-nwbg img, #top .ctm-a__bg { transform: none; } }

/* ── 第 2 版:服務圖示滑過有小動作(程式 ct-motion18.js 給每顆圖示 ct-svfx--0…4,能拆的部位標 fx-*)──
   滑過那一列(或鍵盤選到)播一次,0.8–1 秒;圖示照舊品牌紅。熱氣、水滴會跑出圖示框 → 圖示不裁切。 */
#top .ct-svfx { overflow: visible; }
#top .ct-svfx path, #top .ct-svfx g { transform-box: fill-box; }
#top .sv-tanica-ct-svlink:is(:hover, :focus-visible) .ct-svfx--0 .fx-steam { animation: ctSteam .9s ease-out var(--d, 0s); }
@keyframes ctSteam { 0% { transform: none; opacity: 1; } 45% { transform: translateY(-70%); opacity: 0; } 46% { transform: translateY(40%); opacity: 0; } 100% { transform: none; opacity: 1; } }
#top .ct-svfx--1 { transform-origin: 50% 50%; }
#top .sv-tanica-ct-svlink:is(:hover, :focus-visible) .ct-svfx--1 { animation: ctWrench .8s cubic-bezier(.3, .7, .3, 1); }
@keyframes ctWrench { 0% { transform: none; } 30% { transform: rotate(-24deg); } 62% { transform: rotate(10deg); } 100% { transform: none; } }
#top .ct-svfx--2 .fx-key { transform-origin: 50% 77%; }   /* 鑰匙圈中心(鑰匙外框 x 331–498、y 143–505 量的) */
#top .sv-tanica-ct-svlink:is(:hover, :focus-visible) .ct-svfx--2 .fx-key { animation: ctKey .8s cubic-bezier(.3, .7, .3, 1); }
@keyframes ctKey { 0% { transform: none; } 35% { transform: rotate(28deg); } 70% { transform: rotate(-6deg); } 100% { transform: none; } }   /* 往右(外側)轉:往左會蓋到合約的字(11-14 逐格看過) */
#top .sv-tanica-ct-svlink:is(:hover, :focus-visible) .ct-svfx--3 { animation: ctPress .45s ease-out; }
@keyframes ctPress { 0% { transform: none; } 25% { transform: translateY(6%); } 100% { transform: none; } }
#top .ct-svfx--3 .fx-coin { transform-origin: 50% 50%; }
#top .sv-tanica-ct-svlink:is(:hover, :focus-visible) .ct-svfx--3 .fx-coin { animation: ctFlip .7s ease-in-out .1s; }
@keyframes ctFlip { 0% { transform: none; } 25% { transform: scaleX(0); } 50% { transform: scaleX(-1); } 75% { transform: scaleX(0); } 100% { transform: none; } }
#top .ct-svfx--4 .fx-bottle { transform-origin: 50% 100%; }
#top .ct-svfx--4 .fx-star { transform-origin: 50% 50%; }
#top .ct-svfx--4 .fx-drop { opacity: 0; }
#top .sv-tanica-ct-svlink:is(:hover, :focus-visible) .ct-svfx--4 .fx-bottle { animation: ctPour 1s cubic-bezier(.3, .7, .3, 1); }
#top .sv-tanica-ct-svlink:is(:hover, :focus-visible) .ct-svfx--4 .fx-star { animation: ctStar 1s ease-in-out; }
#top .sv-tanica-ct-svlink:is(:hover, :focus-visible) .ct-svfx--4 .fx-drop { animation: ctDrop 1s ease-in; }
@keyframes ctPour { 0% { transform: none; } 35%, 70% { transform: rotate(-18deg); } 100% { transform: none; } }
@keyframes ctStar { 0%, 30% { transform: none; } 50% { transform: scale(1.3) rotate(36deg); } 70%, 100% { transform: none; } }
@keyframes ctDrop { 0%, 34% { opacity: 0; transform: none; } 40% { opacity: 1; transform: none; } 85% { opacity: 1; transform: translateY(30px); } 100% { opacity: 0; transform: translateY(36px); } }
@media (prefers-reduced-motion: reduce) { #top .ct-svfx, #top .ct-svfx * { animation: none !important; } }
/* 11-15 V20 熱鍵(標註/20261115-023000 第 3 處)「遮罩不能切得剛剛好 要不然icon動的時候 會被切邊」:
   進場遮罩(動畫池 01,ct-reveal.css 的 clip-path)原本切在圖示框邊(55×55),進場完也一直留著 →
   熱氣往上飄、鑰匙往右轉(超出 6.7px)、瓶子往左倒(左 4.1px、下 2.6px)都被切掉。
   → 圖示的遮罩上、左、右各多留半個框(-50% = 27px),下緣多留 15%(8px):進場時下緣從框底慢慢放到 8px,往上滑出來的樣子幾乎不變。 */
html.rv #top .ct-svfx.rv-a { clip-path: inset(-50% -50% 100% -50%); }
html.rv #top .rv-in .ct-svfx.rv-a, html.rv #top .ct-svfx.rv-a.rv-in { clip-path: inset(-50% -50% -15% -50%); }

/* ── 第 5 版:游標手感(程式 ct-motion18.js;手機不跑,這些值都停在 0)── */
#top .ct-pill { transition: background-color .3s, border-color .3s, color .3s, translate .5s cubic-bezier(.2, .8, .2, 1); }   /* 吸過去用 translate,進場動畫會把這串抄進 --rvo */
#top .c-pageTop-circle { transition: background-color .3s, border-color .3s, translate .5s cubic-bezier(.2, .8, .2, 1); }
#top .ct-nw__arw { transition: background-color .3s, border-color .3s, color .3s, translate .45s cubic-bezier(.2, .8, .2, 1); }
/* 服務清單的箭頭在對標搬來的元件裡,它的規則是雙 id(#ctp-sv-tanica#ctp-sv-tanica),要同等才蓋得過(11-14 量到 translate 沒生效) */
#ctp-sv-tanica#ctp-sv-tanica .sv-tanica-linkrectarrow__rect .ct-svarw { transition: background-color .3s, border-color .3s, color .3s, translate .45s cubic-bezier(.2, .8, .2, 1); }   /* 11-15 V20 補:原本少一個 class 輸給 ct-sv.css,右推一直是瞬間跳 */
@media (hover: hover) and (pointer: fine) {
  #top .ct-nw__row:hover .ct-nw__arw, #ctp-sv-tanica#ctp-sv-tanica .sv-tanica-ct-svlink:hover .ct-svarw { translate: 6px 0; }
}
/* 產品分類游標景深(機器 translate、背景反方向):11-14 Eric 說拿掉 */
/* ④ 服務項目滑過整塊換模糊大圖:11-15 V20 Eric 熱鍵「hover的時候整個區塊的半透明放大背景 拿掉 維持靜態」→ 樣式整段拿掉 */

/* 第 6 版展間打光:11-14 V18 Eric「打光拿掉」→ 樣式整段拿掉。 */