/* 滑鼠移到卡片上:卡片浮起來、朝滑鼠的方向傾斜,卡片裡的圖示和色塊前後錯開(搭配 tilt.js)。

   開關:所有規則都掛在 html.tilt 底下,而且只作用在帶 .tilt-hot 的那一張卡(tilt.js 看到滑鼠才會加)。
        手機、平板(沒有滑鼠)、開了「減少動態效果」→ 這個檔等於沒載,頁面和原本一樣。
   tilt.js 每一格寫進卡片的三個數字:
     --tx / --ty  滑鼠在卡片的哪裡(-1 … 1,正中間是 0)
     --th         浮起來多少(0 … 1;滑鼠離開後慢慢回到 0)
     --tilt-max   這張卡最多轉幾度(大卡片角度小)
   規矩:只動 transform / translate / box-shadow,不影響排版;字不藏、不裁。
        陰影跟著 --th 算,不用轉場(滑鼠離開時才不會「啪」一下跳回去)。 */

/* 貼著畫面邊的大卡片(比較表)翹起來時會多出一兩個像素,別讓它撐出橫向捲軸。clip 不會變成捲動容器,釘住的欄位照常 */
html.tilt main { overflow-x: clip; }

html.tilt .tilt-hot {
  transform: var(--tilt-base, translateY(0)) perspective(900px)
    rotateX(calc(var(--ty, 0) * var(--tilt-max, 5deg) * -1)) rotateY(calc(var(--tx, 0) * var(--tilt-max, 5deg)))
    translateZ(calc(var(--th, 0) * 14px));
  transition: none;
  z-index: 3;            /* 浮起來的那一張要蓋在隔壁卡片上面(格線裡的卡片不用另外定位就吃得到) */
}
/* 舞台上的步驟卡:寬螢幕原本就靠 transform 垂直置中,要接在前面 */
@media (min-width: 861px) { html.tilt .s3d-live .s3d-step { --tilt-base: translateY(-50%); } }
html.tilt .s3d-live .s3d-step.is-active.tilt-hot { transform: var(--tilt-base, translateY(0)) perspective(900px) rotateX(calc(var(--ty, 0) * var(--tilt-max, 5deg) * -1)) rotateY(calc(var(--tx, 0) * var(--tilt-max, 5deg))) translateZ(calc(var(--th, 0) * 14px)); transition: opacity .42s cubic-bezier(.22,1,.36,1) .16s; }      /* 和 story.css 換章節的淡入同一組數字 */

/* ---------- 浮起來的影子 ----------
   柔的影子:--th 是 0 的時候大小、位移都是 0,等於沒有;實心的影子(3D 版的文字盒那種):浮起來時影子拉長。 */
html.tilt .course-card.tilt-hot { box-shadow: 0 10px 0 rgba(19,43,39,.08), 0 calc(var(--th, 0) * 30px) calc(var(--th, 0) * 38px) calc(var(--th, 0) * -20px) rgba(19,43,39,.34); }
html.tilt .evidence-card.tilt-hot, html.tilt .story-proof.tilt-hot { box-shadow: 0 calc(var(--th, 0) * 28px) calc(var(--th, 0) * 36px) calc(var(--th, 0) * -20px) rgba(19,43,39,.3); }
html.tilt .parent-note.tilt-hot { box-shadow: 0 12px 0 var(--mint), 0 calc(var(--th, 0) * 30px) calc(var(--th, 0) * 38px) calc(var(--th, 0) * -20px) rgba(19,43,39,.3); }
html.tilt .photo-figure > img.tilt-hot { box-shadow: var(--shadow), 0 calc(var(--th, 0) * 32px) calc(var(--th, 0) * 42px) calc(var(--th, 0) * -20px) rgba(24,55,48,.36); }
html.tilt .contact-box.tilt-hot { box-shadow: 0 calc(var(--th, 0) * 26px) calc(var(--th, 0) * 36px) calc(var(--th, 0) * -18px) rgba(0,0,0,.45); }
html.tilt .comparison.tilt-hot { box-shadow: 0 calc(var(--th, 0) * 30px) calc(var(--th, 0) * 40px) calc(var(--th, 0) * -20px) rgba(0,0,0,.45); }
html.tilt .s3d-step.tilt-hot { --tilt-hard: 5px; box-shadow: calc(var(--tilt-hard) + var(--th, 0) * 5px) calc(var(--tilt-hard) + var(--th, 0) * 5px) 0 var(--ink); }
@media (min-width: 861px) {
  html.tilt .s3d-live .s3d-step.tilt-hot { --tilt-hard: 7px; }
  html.tilt.s3d-world .comparison.tilt-hot { box-shadow: calc(9px + var(--th, 0) * 5px) calc(9px + var(--th, 0) * 5px) 0 var(--ink); }
  html.tilt.s3d-world .section-head.tilt-hot.tilt-hot { box-shadow: calc(8px + var(--th, 0) * 5px) calc(8px + var(--th, 0) * 5px) 0 var(--ink); }
}
/* 3D 版的小卡是墨邊、平時沒有影子(story.css):浮起來時長出來的也要是實心影,不是上面那種灰色柔影(多一個 .s3d-world 就贏) */
html.tilt.s3d-world .course-card.tilt-hot, html.tilt.s3d-world .evidence-card.tilt-hot, html.tilt.s3d-world .story-proof.tilt-hot, html.tilt.s3d-world .contact-box.tilt-hot, html.tilt.s3d-world .photo-figure > img.tilt-hot { box-shadow: calc(var(--th, 0) * 6px) calc(var(--th, 0) * 6px) 0 var(--ink); }
html.tilt.s3d-world .parent-note.tilt-hot { box-shadow: calc(6px + var(--th, 0) * 4px) calc(6px + var(--th, 0) * 4px) 0 var(--mint); }

/* ---------- 卡片裡面再分前後:前面的東西跟著滑鼠走,後面的色塊往反方向,看起來就有深度 ----------
   用 translate(獨立的屬性),不會蓋掉它們原本自己的 transform(圖示本來就歪歪的)。 */
html.tilt .course-card.tilt-hot::after { translate: calc(var(--tx, 0) * -12px) calc(var(--ty, 0) * -10px); }
html.tilt .tilt-hot .course-icon { translate: calc(var(--tx, 0) * 8px) calc(var(--ty, 0) * 7px); }
html.tilt .tilt-hot .course-number { translate: calc(var(--tx, 0) * 4px) calc(var(--ty, 0) * 3px); }
html.tilt .story-proof.tilt-hot > span { translate: calc(var(--tx, 0) * 6px) calc(var(--ty, 0) * 5px); }
html.tilt .parent-note.tilt-hot .note-label { translate: calc(var(--tx, 0) * 5px) calc(var(--ty, 0) * 4px); }
html.tilt .tilt-hot .web-preview span { translate: calc(var(--tx, 0) * -10px) calc(var(--ty, 0) * -8px); }
html.tilt .tilt-hot .web-preview b { translate: calc(var(--tx, 0) * 6px) calc(var(--ty, 0) * 4px); }
html.tilt .tilt-hot .web-preview i { translate: calc(var(--tx, 0) * 9px) calc(var(--ty, 0) * 6px); }
html.tilt .tilt-hot .test-preview span { translate: calc(var(--tx, 0) * 7px) calc(var(--ty, 0) * 5px); }
html.tilt .tilt-hot .debug-preview code { translate: calc(var(--tx, 0) * 5px) calc(var(--ty, 0) * 4px); }
html.tilt .comparison.tilt-hot .comparison-vs { translate: calc(var(--tx, 0) * 8px) calc(var(--ty, 0) * 6px); }
html.tilt .s3d-step.tilt-hot .s3d-emoji { translate: calc(var(--tx, 0) * 5px) calc(var(--ty, 0) * 4px); }
html.tilt .s3d-step.tilt-hot .s3d-art { translate: calc(var(--tx, 0) * 6px) calc(var(--ty, 0) * 5px); }