/* verse-fx v1.0 — AI VERSE LAB 各站共用的動態與質感層（契約：verse-core specs/VERSE_FX.md）。零依賴，搭配 verse-fx.js。
   全部用 .vfx- 開頭，不改各站原本的版面；只加「進場、按壓、載入、面板、標頭」這些動作與細節。
   只動 transform／opacity（不觸發版面重算）；使用者要求減少動態時全部停用，內容直接顯示。 */
:root { --vfx-fast: 140ms; --vfx-base: 240ms; --vfx-slow: 420ms; --vfx-ease: cubic-bezier(.2, .7, .2, 1); --vfx-spring: cubic-bezier(.34, 1.3, .64, 1); --vfx-out: cubic-bezier(.3, 0, .8, .15); --vfx-accent: #c9a86a; }

/* 進場：由下往上淡入，同一批依序錯開（--vfx-d 由 JS 設） */
.vfx-reveal { opacity: 0; transform: translate3d(0, 14px, 0) scale(.985); }
.vfx-reveal.vfx-in { opacity: 1; transform: none; transition: opacity var(--vfx-slow) var(--vfx-ease) var(--vfx-d, 0ms), transform var(--vfx-slow) var(--vfx-ease) var(--vfx-d, 0ms); }
.vfx-view-in { animation: vfx-view var(--vfx-base) var(--vfx-ease) both; }
@keyframes vfx-view { from { opacity: 0; transform: translate3d(0, 6px, 0); } to { opacity: 1; transform: none; } }

/* 按壓與懸停：按下縮一點；滑鼠裝置懸停時浮起、邊線帶強調色、跟著游標的柔光 */
.vfx-press { transition: transform var(--vfx-fast) var(--vfx-ease), box-shadow var(--vfx-base) var(--vfx-ease), border-color var(--vfx-base) var(--vfx-ease), background-color var(--vfx-base) var(--vfx-ease); -webkit-tap-highlight-color: transparent; }
.vfx-press:active { transform: scale(.97); transition-duration: 60ms; }
.vfx-lift { position: relative; background-image: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 42%); }
@media (hover: hover) and (pointer: fine) {
  .vfx-lift:hover { transform: translate3d(0, -2px, 0); box-shadow: 0 10px 28px rgba(0, 0, 0, .38), 0 0 0 1px color-mix(in srgb, var(--vfx-accent) 38%, transparent); }
  .vfx-lift:hover:active { transform: translate3d(0, 0, 0) scale(.985); }
  .vfx-lift::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--vfx-base) var(--vfx-ease);
    background: radial-gradient(220px circle at var(--vfx-mx, 50%) var(--vfx-my, 50%), color-mix(in srgb, var(--vfx-accent) 16%, transparent), transparent 70%); }
  .vfx-lift:hover::after { opacity: 1; }
}
.vfx-press:focus-visible { outline: 2px solid var(--vfx-accent); outline-offset: 3px; }

/* 圖片：載入完才淡入，不會一格一格跳出來 */
img.vfx-img { opacity: 0; transform: scale(1.03); }
img.vfx-img.vfx-ok { opacity: 1; transform: none; transition: opacity var(--vfx-slow) var(--vfx-ease), transform 700ms var(--vfx-ease); }

/* 底部面板：背景淡入、面板帶一點彈性滑上來 */
.vfx-sheet-bg { animation: vfx-fade var(--vfx-base) ease-out both; }
.vfx-sheet-in { animation: vfx-up 380ms var(--vfx-spring) both; }
@keyframes vfx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vfx-up { from { transform: translate3d(0, 28px, 0); opacity: .4; } to { transform: none; opacity: 1; } }

/* 標頭：捲動之後變成毛玻璃並帶陰影 */
.vfx-top { transition: box-shadow var(--vfx-base) var(--vfx-ease), background-color var(--vfx-base) var(--vfx-ease), border-color var(--vfx-base) var(--vfx-ease); }
.vfx-top.vfx-scrolled { background-color: rgba(13, 11, 9, .78); -webkit-backdrop-filter: saturate(150%) blur(12px); backdrop-filter: saturate(150%) blur(12px); box-shadow: 0 10px 28px rgba(0, 0, 0, .34); }

/* 分頁：切到的那一顆圖示彈一下 */
.vfx-tab-pop { animation: vfx-pop 320ms var(--vfx-spring); }
@keyframes vfx-pop { 0% { transform: scale(.82); } 60% { transform: scale(1.14); } 100% { transform: scale(1); } }

/* 主視覺：一道很淡的光慢慢掃過（每 9 秒一次），讓首屏不是死的 */
.vfx-sheen { position: relative; overflow: hidden; }
.vfx-sheen::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 46%; pointer-events: none; z-index: 0; opacity: .5;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--vfx-accent) 13%, transparent) 45%, rgba(255, 255, 255, .05) 50%, transparent 60%); transform: translate3d(-130%, 0, 0) skewX(-12deg); animation: vfx-sheen 9s var(--vfx-ease) 1.2s infinite; }
@keyframes vfx-sheen { 0% { transform: translate3d(-130%, 0, 0) skewX(-12deg); } 26%, 100% { transform: translate3d(340%, 0, 0) skewX(-12deg); } }

/* 提示訊息：從下面彈上來 */
.vfx-toast-in { animation: vfx-toast 280ms var(--vfx-spring) both; }
@keyframes vfx-toast { from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.96); } to { opacity: 1; transform: none; } }

/* 數字：等寬數字，跳動時不會左右晃 */
.vfx-num { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .vfx-reveal, .vfx-reveal.vfx-in, img.vfx-img, img.vfx-img.vfx-ok { opacity: 1; transform: none; transition: none; }
  .vfx-view-in, .vfx-sheet-bg, .vfx-sheet-in, .vfx-tab-pop, .vfx-toast-in { animation: none; }
  .vfx-sheen::before { display: none; }
  .vfx-press, .vfx-press:active, .vfx-lift:hover { transform: none; transition: none; }
}