/* ================================================================
   home-motion.css — 首頁動態層（第十輪 · 2026-11-11）
   只有 index.html 載入。品牌：黑／白／製造黃 #FFFF00、Helvetica＋蘋方。
   原則：只動 transform／opacity／clip-path；prefers-reduced-motion 全部關掉；
         JS 沒載入時 3 秒後自動全部顯示（html.mo-fallback），內容永遠不會被藏住。
   ================================================================ */

/* ─── 導覽列：首頁在主視覺上半透明，捲動後變實心 ─── */
body.home #main-nav { transition: background .45s ease, border-color .45s ease, backdrop-filter .45s ease; }
body.home:not(.nav-solid) #main-nav {
  background: rgba(0,0,0,.28); border-bottom-color: rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
}
@media (max-width: 1100px) { body.home:not(.nav-solid) #main-nav { background: rgba(0,0,0,.55); } }

/* 捲動進度條 */
#mo-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 1001;
  background: #FFFF00; transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
}

/* ─── 主視覺 ─── */
.hx { min-height: 100vh; min-height: 100svh; align-items: flex-end; padding-bottom: 0; isolation: isolate; }
.hx-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #000; }
.hx-media video, .hx-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.08); animation: hx-kb 14s ease-out forwards;
}
@keyframes hx-kb { to { transform: scale(1); } }
.hx-shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.62) 38%, rgba(0,0,0,.18) 72%, rgba(0,0,0,.30) 100%),
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 62%, #000 100%);
}
/* 建築感細線：四條直線由上往下畫出 */
.hx-lines { position: absolute; inset: 0; z-index: -1; pointer-events: none; display: flex; justify-content: space-evenly; }
.hx-lines i { width: 1px; height: 100%; background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.07) 30%, rgba(255,255,255,.07) 70%, rgba(255,255,255,0));
  transform-origin: 50% 0; transform: scaleY(0); animation: hx-line 1.6s cubic-bezier(.7,0,.2,1) forwards; }
.hx-lines i:nth-child(2) { animation-delay: .12s; } .hx-lines i:nth-child(3) { animation-delay: .24s; } .hx-lines i:nth-child(4) { animation-delay: .36s; }
@keyframes hx-line { to { transform: scaleY(1); } }

.hx .hero-content { max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 48px 14vh; }
.hx .hero-eyebrow { display: flex; align-items: center; gap: 14px; letter-spacing: 5px; font-size: 12px; margin-bottom: 28px; }
.hx .hero-eyebrow::before { content: ''; width: 48px; height: 1px; background: #FFFF00; flex: none; transform-origin: 0 50%; }
.hx h1 { font-size: clamp(42px, 6.6vw, 100px); line-height: 1.04; letter-spacing: -.02em; max-width: 7.4em; margin-bottom: 30px; }
/* 中文：「工業製造」不拆開 → 固定斷成「重新定義／工業製造的未來」 */
html[lang="zh-TW"] .hx h1 em { white-space: nowrap; }
html[lang="en"] .hx h1 { font-size: clamp(38px, 5.2vw, 80px); max-width: 13em; }
.hx h1 em { background: linear-gradient(#FFFF00,#FFFF00) 0 96% / 0% 4px no-repeat; padding-bottom: .04em; }
.hx p { color: #cfcfcf; font-size: clamp(15px, 1.35vw, 19px); max-width: 600px; margin-bottom: 40px; }
.hx .hero-buttons a { min-width: 148px; text-align: center; }

/* 進場：遮罩上推 */
.mo .hx .hero-eyebrow, .mo .hx h1, .mo .hx p, .mo .hx .hero-buttons {
  opacity: 0; transform: translateY(36px); clip-path: inset(0 0 100% 0);
  animation: hx-in 1.15s cubic-bezier(.16,1,.3,1) forwards;
}
.mo .hx .hero-eyebrow { animation-delay: .35s; }
.mo .hx h1 { animation-delay: .5s; }
.mo .hx p { animation-delay: .78s; }
.mo .hx .hero-buttons { animation-delay: .95s; }
.mo .hx .hero-eyebrow::before { transform: scaleX(0); animation: hx-grow .9s 1.0s cubic-bezier(.7,0,.2,1) forwards; }
.hx h1 em { animation: hx-ul 1s 1.55s cubic-bezier(.7,0,.2,1) forwards; }
@keyframes hx-in { to { opacity: 1; transform: none; clip-path: inset(-20% -5% -20% -5%); } }
@keyframes hx-grow { to { transform: scaleX(1); } }
@keyframes hx-ul { to { background-size: 100% 4px; } }

/* 向下捲動提示 */
.hx-scroll {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: rgba(255,255,255,.62); font-size: 10px; letter-spacing: 4px; text-transform: uppercase; text-decoration: none;
  opacity: 0; animation: hx-fade 1s 1.8s forwards;
}
.hx-scroll i { position: relative; width: 1px; height: 46px; background: rgba(255,255,255,.18); overflow: hidden; }
.hx-scroll i::after { content: ''; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: #FFFF00; animation: hx-drop 2s 2.2s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes hx-drop { to { top: 100%; } }
@keyframes hx-fade { to { opacity: 1; } }
.hx-scroll:hover { color: #fff; text-decoration: none; }

@media (max-width: 900px) {
  .hx-shade { background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 35%, rgba(0,0,0,.78) 72%, #000 100%); }
  .hx .hero-content { padding: 0 24px 15vh; }
  .hx-lines i:nth-child(2), .hx-lines i:nth-child(3) { display: none; }
}
@media (max-width: 480px) {
  .hx .hero-content { padding: 0 18px 13vh; }
  .hx .hero-eyebrow { letter-spacing: 3px; font-size: 11px; }
  .hx-scroll { display: none; }
}

/* ─── 數字帶 ─── */
.stat-item { position: relative; overflow: hidden; }
.stat-item::before { content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: #FFFF00; transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s cubic-bezier(.7,0,.2,1); }
.stat-item.in::before { transform: scaleX(1); }
.stat-number { font-variant-numeric: tabular-nums; }

/* ─── 標語跑馬（原廠 FX 系列活動標語） ─── */
.mq { background: #000; border-top: 1px solid #141414; border-bottom: 1px solid #141414; overflow: hidden; padding: 26px 0; }
.mq-track { display: flex; width: max-content; animation: mq 46s linear infinite; }
.mq-track span { font-size: clamp(26px, 3.6vw, 52px); font-weight: 900; letter-spacing: -.01em; white-space: nowrap; padding: 0 .55em;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.34); }
.mq-track span:nth-child(4n+1) { color: #fff; -webkit-text-stroke: 0; }
.mq-track i { font-style: normal; font-size: clamp(26px, 3.6vw, 52px); font-weight: 300; color: #FFFF00; align-self: center; }
@keyframes mq { to { transform: translateX(-50%); } }
.mq:hover .mq-track { animation-play-state: paused; }

/* ─── FX10 展示區（原廠爆炸圖） ─── */
.sx { position: relative; overflow: hidden; background: #0b1217; padding: 140px 32px; color: #fff; isolation: isolate; }
.sx-bg { position: absolute; inset: -8% -4% -8% 30%; z-index: -2; }
.sx-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; transform: scale(1.12); will-change: transform; }
.sx::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, #0b1217 0%, #0b1217 34%, rgba(11,18,23,.82) 48%, rgba(11,18,23,.15) 72%, rgba(11,18,23,.35) 100%),
              linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 16%, rgba(0,0,0,0) 84%, #000 100%); }
.sx-inner { max-width: 1200px; margin: 0 auto; }
.sx-copy { max-width: 600px; }
.sx .section-label { color: #FFFF00; }
.sx-title { font-size: clamp(34px, 5vw, 72px); font-weight: 900; line-height: 1.08; letter-spacing: -.015em; color: #fff; margin-bottom: 26px; }
.sx-title .hl { color: #FFFF00; }
.sx-lead { color: #c9ced2; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.8; margin-bottom: 44px; }
.sx-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,.14); margin-bottom: 44px; }
.sx-feats > div { padding: 22px 22px 0 0; }
.sx-feats > div + div { padding-left: 22px; border-left: 1px solid rgba(255,255,255,.14); }
.sx-feats b { display: block; color: #fff; font-size: 16px; margin-bottom: 8px; }
.sx-feats b::before { content: ''; display: block; width: 18px; height: 2px; background: #FFFF00; margin-bottom: 14px; }
.sx-feats span { display: block; color: #9aa3aa; font-size: 13.5px; line-height: 1.7; }
.sx-btns { display: flex; flex-wrap: wrap; gap: 14px; }
@media (max-width: 900px) {
  .sx { padding: 96px 20px 88px; }
  .sx-bg { inset: 0 -30% 52% -10%; opacity: .55; }
  .sx::before { background: linear-gradient(180deg, #000 0%, rgba(11,18,23,.2) 18%, rgba(11,18,23,.75) 40%, #0b1217 56%, #0b1217 100%); }
  .sx-copy { padding-top: 34vw; }
  .sx-feats { grid-template-columns: 1fr; }
  .sx-feats > div, .sx-feats > div + div { padding: 18px 0; border-left: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
}
@media (max-width: 480px) { .sx-btns { flex-direction: column; } .sx-btns a { text-align: center; } }

/* ─── 通用進場：data-mo ─── */
.mo [data-mo] { opacity: 0; transform: translateY(40px); transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i, 0) * 110ms); }
.mo [data-mo="fade"] { transform: none; }
.mo [data-mo="mask"] { transform: translateY(28px); clip-path: inset(0 0 100% 0); transition-property: opacity, transform, clip-path; }
.mo [data-mo].in { opacity: 1; transform: none; clip-path: inset(-20% -5% -20% -5%); }
/* 黃色短線畫出 */
.mo .yellow-bar { transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s .25s cubic-bezier(.7,0,.2,1); }
.mo .yellow-bar.center { transform-origin: 50% 50%; }
.mo .yellow-bar.in { transform: scaleX(1); }

/* 卡片細節 */
.feature-card, .product-card, .solution-card, .oc-card, .vc { transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease, opacity 1s cubic-bezier(.16,1,.3,1); }
.product-card:hover, .feature-card:hover, .oc-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -24px rgba(0,0,0,.35); }
.solution-card:hover { transform: translateY(-6px); }
.product-card-img { overflow: hidden; }
.product-card-img img { transition: transform .8s cubic-bezier(.16,1,.3,1); }
.product-card:hover .product-card-img img { transform: scale(1.06); }
.mo .oc-img img, .mo .product-card-img img { clip-path: inset(100% 0 0 0); transition: clip-path 1.2s cubic-bezier(.7,0,.2,1), transform .8s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i, 0) * 110ms + .15s); }
.mo .in .oc-img img, .mo .in .product-card-img img, .mo .in.product-card .product-card-img img { clip-path: inset(0 0 0 0); }

/* VIP 斜紋緩慢移動 */
.vip-stripes { animation: vip-slide 30s linear infinite; background-size: 113px 113px !important; }
@keyframes vip-slide { to { background-position: 113px 0; } }

/* CTA 黃帶光澤 */
.cta-band { position: relative; overflow: hidden; }
.cta-band::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.45), rgba(255,255,255,0)); transform: skewX(-18deg);
  animation: cta-sheen 7s 2s ease-in-out infinite; }
@keyframes cta-sheen { 0% { left: -40%; } 38%, 100% { left: 130%; } }
.cta-band > * { position: relative; z-index: 1; }

/* JS 沒載入的保險：3 秒後全部顯示 */
.mo-fallback [data-mo], .mo-fallback .yellow-bar, .mo-fallback .oc-img img, .mo-fallback .product-card-img img { opacity: 1 !important; transform: none !important; clip-path: none !important; }

/* 減少動態：全部關掉 */
@media (prefers-reduced-motion: reduce) {
  .hx-media video, .hx-media img, .hx-lines i, .mq-track, .vip-stripes, .cta-band::after, .hx-scroll i::after { animation: none !important; }
  .hx-media video, .hx-media img { transform: none; }
  .hx-lines i { transform: none; }
  .hx h1 em { background-size: 100% 4px; }
}