/* 不兼容瀏覽器提示框，默認隱藏 */
#browserTip{
    display:none;
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    background:#fff;
    z-index:99999;
    display:flex;
    align-items:center;
    justify-content:center;
}
.tip-box{
    width:500px;
    padding:30px;
    border:1px solid #eee;
    border-radius:8px;
    box-shadow:0 2px 12px rgba(0,0,0,0.1);
    text-align:center;
}
.tip-box h3{
    color:#f56c6c;
}
.tip-box p{
    margin:12px 0;
    font-size:15px;
    color:#666;
    line-height:1.6;
}
/* 正常頁面內容，不兼容時隱藏 */
#mainContent{
}
/*結束*/

:root {
  --canvas-w: 2281.4065;
  --canvas-h: 1168.8134;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --font-sans: "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Noto Sans SC",
    "Source Han Sans CN", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --bar-w: 12.63px;   /* 左緣色條寬(畫布單位) */
  --card-h: 473px;    /* 卡片高(畫布單位) */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: #000;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  overflow: hidden;           /* PC: 鎖定一屏, 不滾動 */
}

/* ---------- 舞臺 ---------- */
.page {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}

.stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 2281.4065px;
  height: 1168.8134px;
  transform-origin: 0 0;
}

/* ---------- 頂部標題塊 ---------- */
.intro {
  position: absolute;
  left: 184.2px;
  top: 57px;
  color: #fff;
}

.intro-en {
  font-size: 19px;
  line-height: 23.7px;
  font-weight: 700;
  letter-spacing: 0;
}

.intro-zh {
  font-size: 21px;
  line-height: 1;
  font-weight: 700;
  margin-top: 4.5px;
  letter-spacing: 0;
}

/* ---------- 品牌區 (大 Logo + 字標) ---------- */
.brand {
  position: absolute;
  left: 1047.4628px;
  top: 11.6499px;
  width: 191.2616px;
  height: 451.9133px;
  pointer-events: none;
}

.mark {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  /* 閃爍優化①: 把整個 svg 提升爲獨立合成層,
     卷軸每幀重繪被限制在本圖層內, 不再與卡片等周圍圖層互相干擾 */
  will-change: transform;
}

/* ---------- 卡片 ---------- */
.card-wrap {
  position: absolute;
  top: 557px;
}

.w1 { left: 171.37px; width: 748.63px; }   /* 12.63 + 736 */
.w2 { left: 842.37px; width: 582.63px; }   /* 12.63 + 570 */
.w3 { left: 1514.37px; width: 582.63px; }

.card {
  position: absolute;
  left: 12.63px;
  top: 0;
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  will-change: transform;
  transition: transform 0.55s var(--ease-out), box-shadow 0.55s var(--ease-out);
  outline: none;
}

.c1 { width: 736px; }
.c2 { width: 570px; }
.c3 { width: 570px; }
.card { height: 473px; }

.card-bg {
  position: absolute;
  inset: 0;
  
  height: 100%;
  object-fit: fill;
  display: block;
  transform: scale(1.001);
  transition: transform 0.7s var(--ease-out), filter 0.7s var(--ease-out);
  user-select: none;
}

/* 卡片內小 Logo (原稿矢量) */
.mark-lc {
  position: absolute;
  height: auto;
  z-index: 2;
  transition: transform 0.5s var(--ease-out);
}

.c1 .mark-lc { left: 69.79px;  top: 49.51px; width: 44.20px; }
.c2 .mark-lc { left: 91.71px;  top: 46.45px; width: 44.20px; }
.c3 .mark-lc { left: 77.07px;  top: 30.89px; width: 44.90px; }

/* 卡片文字 */
.card-zh,
.card-en {
  position: absolute;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  z-index: 2;
}

.card-zh { font-size: 42px; line-height: 1; letter-spacing: 0; }
.card-en { font-size: 36px; line-height: 43.2px; letter-spacing: 0; }

.c1 .card-zh { left: 68.5px; top: 145px; }
.c1 .card-en { left: 68.6px; top: 201px; }

.c2 .card-zh { left: 81.6px; top: 146px; }
.c2 .card-en { left: 80.8px; top: 201px; }

.c3 .card-zh { left: 69.2px; top: 146px; }
.c3 .card-en { left: 71.3px; top: 200.6px; }

/* ---------- 左緣色條 ---------- */
.bar {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--bar-w);
  height: 115.19px;
  transform-origin: 50% 0;
  transition: transform 0.55s var(--ease-out);
}

.b1 { background: #9b53d4; }
.b2 { background: #fece00; }
.b3 { background: #0eef07; }

/* ---------- 交互: 卡片懸停 ---------- */
.w1:hover .card { transform: translateY(-10px); box-shadow: 0 30px 90px rgba(155, 83, 212, 0.35), 0 8px 30px rgba(0, 0, 0, 0.6); }
.w2:hover .card { transform: translateY(-10px); box-shadow: 0 30px 90px rgba(254, 206, 0, 0.28), 0 8px 30px rgba(0, 0, 0, 0.6); }
.w3:hover .card { transform: translateY(-10px); box-shadow: 0 30px 90px rgba(14, 239, 7, 0.30), 0 8px 30px rgba(0, 0, 0, 0.6); }

.card:hover .card-bg,
.card:focus-visible .card-bg {
  transform: scale(1.045);
  filter: brightness(1.12);
}

/* 懸停聯動: 色條延展 + 小 Logo 上浮 */
.card-wrap:hover .bar { transform: scaleY(1.32); }
.card:hover .mark-lc { transform: translateY(-6px); }

/* ---------- 入場動效 ---------- */
.anim {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.9s var(--ease-out) var(--d, 0s),
    transform 0.9s var(--ease-out) var(--d, 0s);
}

/* 只作用於 svg 的直接子組(#fg-logo / #fg-word / #fg-lc1~3),
   不能寫成 .mark g —— 否則會命中 .lg-slot / .lg-reel,
   用 CSS transform 覆蓋掉它們的 SVG transform 與捲動動畫 */
.mark > g {
  opacity: 0;
  transform: translateY(26px);
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition:
    opacity 0.9s var(--ease-out) var(--fd, 0.15s),
    transform 0.9s var(--ease-out) var(--fd, 0.15s);
}

/* ---------- 彩色字母: 垂直無縫捲動 ----------
   結構: .lg-slot(裁切窗口) > .lg-reel(卷軸) > 字母 ×2 份
   --lg-shift : 一個完整循環的位移(= 字母數 × 步距), 由 HTML 內聯
   --lg-dur   : 循環時長, 每個字母 3s
   --lg-delay : 右列整體錯開半個週期(左 6s / 右錯開 3s)            */
@keyframes lg-roll {
  from { transform: translateY(0); }
  to   { transform: translateY(var(--lg-shift, 0px)); }
}

.lg-reel {
  animation-name: lg-roll;
  animation-duration: var(--lg-dur, 6s);
  animation-timing-function: linear;
  animation-delay: var(--lg-delay, 0s);
  animation-iteration-count: infinite;
  /* 閃爍優化②: 刪掉 will-change —— SVG 內部 <g> 不參與合成器加速,
     這條只會引發額外柵格化抖動, 與 clip-path 疊加是已知的閃爍源;
     合成層提升已改放到 svg 根節點(.mark)上 */
}

/* 獨立 SVG 文件 logo(<img>) 的入場動效 —— 動效從 svg 內部組移到 img 元素上 */
.mark-img {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.9s var(--ease-out) var(--fd, 0.15s),
    transform 0.9s var(--ease-out) var(--fd, 0.15s);
}
body.loaded .mark-img { opacity: 1; transform: translateY(0); }
/* 入場結束後交還給各自的基礎過渡(卡片 hover 上浮 0.5s / 品牌 0.45s) */
body.loaded .mark-brand { transition: transform 0.45s var(--ease-out); }
body.loaded .mark-lc    { transition: transform 0.5s var(--ease-out); }

.mark-brand { --fd: 0.15s; }
.lc1 { --fd: 0.42s; }
.lc2 { --fd: 0.52s; }
.lc3 { --fd: 0.62s; }


#fg-logo { --fd: 0.15s; }
#fg-word { --fd: 0.28s; }
#fg-lc1  { --fd: 0.42s; }
#fg-lc2  { --fd: 0.52s; }
#fg-lc3  { --fd: 0.62s; }

body.loaded .anim { opacity: 1; transform: translateY(0); }
body.loaded .mark > g { opacity: 1; transform: translateY(0); }

/* 入場結束後切爲快速過渡, 懸停更跟手 */
body.loaded .card { transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out); }
body.loaded .bar,
body.loaded .mark > g { transition: transform 0.45s var(--ease-out); }

/* ============================================================
   小屏: 豎向流式重排 (由 JS 統一判定並加 body.stack)
   ============================================================ */
body.stack { overflow-x: hidden; overflow-y: auto; height: auto; }

body.stack .page {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  min-height: 100%;
  overflow: visible;
}

body.stack .stage {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  height: auto;
  transform: none !important;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 30px 18px calc(40px + env(safe-area-inset-bottom));
}

/* 標題塊 */
body.stack .intro {
  position: relative;
  left: auto;
  top: auto;
  margin-bottom: 22px;
}

body.stack .intro-en {
  font-size: 13.5px;
  font-size: clamp(12.5px, 3.5vw, 19px);
  line-height: 1.32;
}

body.stack .intro-zh {
  font-size: 15.5px;
  font-size: clamp(14px, 4.05vw, 21px);
  margin-top: 6px;
}

/* 品牌區: 居中, 按原寬高比縮放 */
body.stack .brand {
  position: relative;
  left: auto;
  top: auto;
  width: 46%;
  max-width: 230px;
  height: auto;
  aspect-ratio: 191.2616 / 451.9133;
  align-self: center;
  margin: 0 0 30px;
}

/* 卡片: 豎排, 寬度撐滿, 高度按原比例 */
body.stack .card-wrap {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  padding-left: 10px;
}

body.stack .card-wrap + .card-wrap { margin-top: 16px; }

body.stack .card {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  height: auto;
  container-type: inline-size;
}

body.stack .c1 { aspect-ratio: 736 / 473; }
body.stack .c2,
body.stack .c3 { aspect-ratio: 570 / 473; }

body.stack .bar {
  left: 0;
  top: 6px;
  width: 5px;
  height: 30%;
  border-radius: 2px;
}

/* 卡片內元素: 用容器查詢單位隨卡片寬度縮放 */
body.stack .card-zh {
  font-size: 24px;            /* 老瀏覽器兜底 */
  font-size: 5.7cqw;
  line-height: 1;
}
body.stack .card-en {
  font-size: 20px;
  font-size: 4.89cqw;
  line-height: 1.2;
}

body.stack .c1 .card-zh { left: 9.31%;  top: 30.66%; }
body.stack .c1 .card-en { left: 9.32%;  top: 42.49%; }

body.stack .c2 .card-zh { left: 14.32%; top: 30.87%; }
body.stack .c2 .card-en { left: 14.18%; top: 42.49%; }

body.stack .c3 .card-zh { left: 12.14%; top: 30.87%; }
body.stack .c3 .card-en { left: 12.51%; top: 42.41%; }

body.stack .mark-lc {
  width: 7.2%;
  height: auto;
  top: 7%;
  left: auto;
}
body.stack .c1 .mark-lc { left: 9.3%; }
body.stack .c2 .mark-lc { left: 14.3%; }
body.stack .c3 .mark-lc { left: 12.1%; }

body.stack .card-wrap:hover .card { transform: none; }
body.stack .card:active { transform: scale(0.985); }

/* 超窄屏: 文字整體再收一檔, 防溢出 */
@media (max-width: 360px) {
  body.stack .stage { padding-left: 14px; padding-right: 14px; }
  body.stack .card-zh { font-size: 5.35cqw; }
  body.stack .card-en { font-size: 4.55cqw; }
}

/* ---------- 無障礙: 減弱動態效果 ---------- */
@media (prefers-reduced-motion: reduce) {
  .anim, .mark > g { opacity: 1 !important; transform: none !important; transition: none !important; }
  /* 卷軸停轉: 停在原稿那一幀(translateY(0)) */
  .lg-reel { animation: none !important; transform: none !important; }
  .card, .card-bg, .bar { transition: none !important; }
  .card-wrap:hover .card { transform: none; }
  .card:hover .card-bg { transform: none; filter: none; }
  .card-wrap:hover .bar { transform: none; }
}
@media (max-width: 900px) {
.card-bg {

    width: 100%;}


}