/* Cosmos 子頁設計系統 — 深色宇宙底、各宇宙主色與共用元件
   用法：<body class="cosmos cosmos-page" data-universe="estate|design|brand|enterprise|origin">（依客群分宇宙）
   依序載入 shared/layout.css → shared/cosmos.css → shared/cosmos-page.css → 頁面自己的 CSS，
   並在 </body> 前載入 shared/cosmos-bg.js（星空背景、進場動畫、卡片傾斜） */

html:has(> body.cosmos-page) { background: #03040b; }

body.cosmos-page {
  --c: var(--u0);
  --glass: rgba(10, 14, 32, 0.62);
  --glass-hi: rgba(255, 255, 255, 0.05);
  --line-2: rgba(255, 255, 255, 0.1);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  /* body 必須透明，fixed 星空 (z-index:-1) 才看得到 */
  background: transparent !important;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
body.cosmos-page[data-universe="estate"]     { --c: var(--u-estate); }
body.cosmos-page[data-universe="design"]     { --c: var(--u-design); }
body.cosmos-page[data-universe="brand"]      { --c: var(--u-brand); }
body.cosmos-page[data-universe="enterprise"] { --c: var(--u-enterprise); }

body.cosmos-page ::selection { background: color-mix(in srgb, var(--c) 45%, transparent); color: #fff; }
:where(body.cosmos-page) :where(h1, h2, h3, h4, h5, h6) { color: #fff; }

/* ── 背景層（由 cosmos-bg.js 注入） ── */
#cx-sky { position: fixed; inset: 0; width: 100%; height: 100vh; z-index: -1; pointer-events: none; display: block; }
.cx-cursor {
  position: fixed; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px;
  border-radius: 50%; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .6s;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 14%, transparent) 0%, transparent 62%);
}
.cx-cursor.on { opacity: 1; }

/* ── 文字元件 ── */
.cx-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  background: color-mix(in srgb, var(--c) 10%, rgba(3, 4, 11, .45));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .18em; line-height: 1.4;
  color: color-mix(in srgb, var(--c) 80%, #fff); text-transform: uppercase; white-space: nowrap;
}
.cx-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); flex: none; }
.cx-badge b { font-family: 'Noto Sans TC', sans-serif; font-weight: 500; letter-spacing: .12em; color: #fff; }
.cx-label { font-family: var(--f-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.cx-label::before { content: '// '; color: var(--c); }
.cx-grad {
  background: linear-gradient(95deg, #fff 0%, color-mix(in srgb, var(--c) 65%, #fff) 55%, var(--c) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cx-accent { color: var(--c); }
/* 「走進真實作品」：通往該宇宙沉浸式展示頁的入口（放在方案頁、作品頁的開場區） */
.cx-immersive {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; padding: 8px 18px 8px 8px; border-radius: 999px;
  font-size: 14.5px; font-weight: 600; line-height: 1.4; color: #fff; text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 10%, rgba(3, 4, 11, .45));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: gap .3s, background .3s, border-color .3s;
}
.cx-immersive:hover { gap: 16px; border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, rgba(3, 4, 11, .45)); }
.cx-immersive i { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--c); box-shadow: 0 0 16px var(--c); }
.cx-immersive i::after { /* 播放鍵 */
  content: ''; position: absolute; left: 12px; top: 10px;
  border-left: 9px solid #08090f; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.cx-immersive small { font-size: 12.5px; font-weight: 400; color: rgba(232, 236, 255, .6); }

/* ── 表面 ── */
.cx-glass {
  background: var(--glass); border: 1px solid var(--line-2); border-radius: 18px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.cx-hover { transition: border-color .35s, box-shadow .35s, transform .35s var(--ease-out); }
.cx-hover:hover { border-color: color-mix(in srgb, var(--c) 55%, transparent); box-shadow: 0 24px 70px -30px var(--c); }

/* ── 按鈕（與首頁一致） ── */
.cx-btn, .cx-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 26px; border-radius: 999px;
  font-family: inherit; font-size: 15px; font-weight: 500; letter-spacing: .04em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .25s, box-shadow .25s, background .25s, border-color .25s;
}
.cx-btn {
  color: #050714; font-weight: 700; border: 0;
  background: linear-gradient(100deg, #7fe3ff 0%, #7aa2ff 45%, #c9a2ff 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 10px 40px -10px rgba(122,162,255,.85);
}
.cx-btn:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 18px 54px -8px rgba(122,162,255,1); }
.cx-btn-ghost {
  color: #fff; border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.04);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.cx-btn-ghost:hover { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.09); transform: translateY(-2px); }

/* ── 宇宙星球（Hero 裝飾） ──
   <div class="cx-planet" aria-hidden="true"><span class="p-orbit"></span><span class="p-ring back"></span><span class="p-core"></span><span class="p-ring front"></span></div> */
.cx-planet { --size: 340px; position: relative; width: var(--size); height: var(--size); flex: none; pointer-events: none; }
.cx-planet .p-core {
  position: absolute; inset: 20%; border-radius: 50%; z-index: 1; overflow: hidden;
  background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--c) 35%, #fff) 0%, var(--c) 24%, color-mix(in srgb, var(--c) 42%, #050816) 56%, #03040b 90%);
  box-shadow: 0 0 90px 12px color-mix(in srgb, var(--c) 38%, transparent), inset -18px -24px 50px rgba(0,0,0,.6);
  animation: cx-breathe 6s ease-in-out infinite;
}
.cx-planet .p-core::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: overlay; opacity: .9;
  background: repeating-linear-gradient(-14deg, rgba(255,255,255,.09) 0 7px, transparent 7px 19px, rgba(0,0,0,.16) 19px 27px, transparent 27px 42px);
  background-size: 200% 100%;
  animation: cx-bands 36s linear infinite;
}
.cx-planet .p-ring { position: absolute; left: -2%; right: -2%; top: 39%; height: 22%; border-radius: 50%; border: 2px solid transparent; transform: rotate(-20deg); }
.cx-planet .p-ring.back { border-top-color: color-mix(in srgb, var(--c) 45%, transparent); z-index: 0; }
.cx-planet .p-ring.front { border-bottom-color: color-mix(in srgb, var(--c) 85%, #fff); z-index: 2; filter: drop-shadow(0 0 6px var(--c)); }
.cx-planet .p-orbit { position: absolute; inset: 2%; border-radius: 50%; border: 1px dashed rgba(255,255,255,.14); animation: cx-spin 46s linear infinite; }
.cx-planet .p-orbit::after { content: ''; position: absolute; top: -3px; left: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 2px var(--c); }

/* ── 預約諮詢 CTA 帶（參考樣式，頁面可直接沿用） ── */
.cx-cta { position: relative; padding: 110px 0; text-align: center; overflow: hidden; isolation: isolate; }
.cx-cta::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 50% 70% at 50% 120%, color-mix(in srgb, var(--c) 30%, transparent), transparent 70%),
    linear-gradient(180deg, transparent, rgba(255,255,255,.02));
  border-top: 1px solid var(--line);
}

/* 全站頁尾前的預約諮詢帶統一上下留白（延續舊版「CTA 高度統一」；高度只隨內容多寡微調） */
body.cosmos-page :is(.foot-cta, .guide-cta, .geo-cta, .believe-cta, .contact-page-cta, .cases3d-soft-cta, .cases-sys-soft-cta, .pt-cta, .lx-cta, .he-cta, .rc-cta, .wf-cta, .pe-cta, .se-cta) {
  padding-top: 100px !important;
  padding-bottom: 100px !important;
}
@media (max-width: 1100px) {
  body.cosmos-page :is(.foot-cta, .guide-cta, .geo-cta, .believe-cta, .contact-page-cta, .cases3d-soft-cta, .cases-sys-soft-cta, .pt-cta, .lx-cta, .he-cta, .rc-cta, .wf-cta, .pe-cta, .se-cta) {
    padding-top: 84px !important;
    padding-bottom: 84px !important;
  }
}
@media (max-width: 720px) {
  body.cosmos-page :is(.foot-cta, .guide-cta, .geo-cta, .believe-cta, .contact-page-cta, .cases3d-soft-cta, .cases-sys-soft-cta, .pt-cta, .lx-cta, .he-cta, .rc-cta, .wf-cta, .pe-cta, .se-cta) {
    padding-top: 68px !important;
    padding-bottom: 68px !important;
  }
}

/* ── 進場動畫（cosmos-bg.js 只會隱藏還沒進入畫面的元素） ── */
/* 延伸閱讀：CTA 前一排連結（指南、案例、沉浸式展示）。導覽列與頁尾是 JS 載入的，
   不跑 JS 的爬蟲看不到，這排寫在頁面裡才找得到相關頁；▶ 的是沉浸式展示 */
.cx-related { position: relative; z-index: 1; width: min(1100px, 100% - 48px); margin: 0 auto; padding: 64px 0 12px; text-align: center; }
.cx-related > p { margin: 0 0 16px; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .22em; color: var(--ink-2); }
.cx-related ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin: 0; padding: 0; list-style: none; }
.cx-related a {
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border-radius: 999px; font-size: 14.5px; line-height: 1.3;
  color: #fff; text-decoration: none; background: rgba(255, 255, 255, .04); border: 1px solid rgba(160, 180, 255, .22);
  transition: border-color .25s, background .25s, transform .25s;
}
.cx-related a::after { content: '→'; color: rgba(232, 236, 255, .55); transition: transform .25s; }
.cx-related a.is-exp::before { content: ''; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; border-left: 7px solid var(--c, var(--u0)); }
.cx-related a:hover { border-color: var(--c, var(--u0)); background: rgba(122, 162, 255, .08); transform: translateY(-2px); }
.cx-related a:hover::after { transform: translateX(3px); }
@media (max-width: 720px) {
  .cx-related { padding-top: 48px; }
  .cx-related a { padding: 9px 15px; font-size: 14px; }
}

.cx-rv.cx-pending { opacity: 0; translate: 0 28px; }
.cx-rv { transition: opacity .9s var(--ease-out), translate .9s var(--ease-out); transition-delay: var(--d, 0s); }

/* ── 卡片傾斜（.cx-tilt，滑鼠裝置） ── */
.cx-tilt { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }

@keyframes cx-breathe { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }
@keyframes cx-bands { to { background-position: -200% 0; } }
@keyframes cx-spin { to { transform: rotate(360deg); } }

@media (max-width: 720px) {
  .cx-planet { --size: 220px; }
  .cx-badge { font-size: 10.5px; letter-spacing: .14em; padding: 6px 12px; }
  .cx-btn, .cx-btn-ghost { min-height: 46px; padding: 0 20px; font-size: 14px; }
  .cx-cta { padding: 80px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cx-planet .p-core, .cx-planet .p-core::after, .cx-planet .p-orbit { animation: none; }
  .cx-rv { transition: none; }
}