/* ============================================================
   base.css — Reset + 全站基礎排版
   創巢數位 Nest Digital | 版本 redesign-v1
   ============================================================ */

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    /* overflow-x: clip（不是 hidden）：強制 paint clip、對 GPU 加速的 transform 元素有效；
       hidden 會創 scroll container，transform 元素在 GPU layer 提升時可能逃出 */
    overflow-x: clip;
}

body {
    font-family: var(--f-sans);
    background:
        radial-gradient(ellipse 80% 55% at 15% 0%, rgba(var(--c-blue-rgb), 0.09) 0%, transparent 55%),
        radial-gradient(ellipse 60% 45% at 88% 100%, rgba(var(--c-navy-rgb), 0.20) 0%, transparent 55%),
        var(--c-black);
    color: var(--c-white);
    line-height: 1.6;
    overflow-x: clip;
    min-height: 100vh;
    /* 星空 canvas 固定在後層，body 需 position:relative */
    position: relative;
}

/* ─── Grain texture overlay（全站質感層，pointer-events:none 不擋操作）─── */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    opacity: 0.045;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    background-repeat: repeat;
}

/* ─── Three.js canvas（僅 index.html，body.has-threejs）─── */
#starfield-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-stars);
    pointer-events: none;
}

/* ─── CSS 星空（其他頁全站共用，由 nav.js 注入 DOM）────── */
#css-starfield {
    position: fixed;
    inset: 0;
    z-index: var(--z-stars);
    pointer-events: none;
    overflow: hidden;
}

/* 黑洞虛空斜帶（全站統一：220vw 大盒子 + 橫向 ellipse + -15° 傾斜，跨畫面對角斜帶）
   首頁桌機：Three.js 動態星點疊加在斜帶上 / 首頁手機：CSS 星點疊加 / 其他頁：CSS 星點疊加
   永遠顯示——不論 has-threejs / 視窗寬度 / 觸控裝置都看得到 */
#css-starfield::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 220vw;
    height: 220vw;
    transform: translate(-50%, -50%) rotate(-15deg);
    background: radial-gradient(
        ellipse 50% 20% at center,
        #000000              0%,
        #000507              20%,
        #020f2e              38%,
        #061840              54%,
        rgba(8,24,58,0.72)   66%,
        rgba(7,20,52,0.40)   77%,
        rgba(5,15,42,0.15)   88%,
        transparent          100%
    );
    pointer-events: none;
}

/* SVG fractalNoise 噪點層：打散漸層色階斷層、避免在大尺度漸層上看到色帶（banding） */
#css-starfield::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
    background-repeat: repeat;
    mix-blend-mode: soft-light;
    pointer-events: none;
}

/* 首頁有 Three.js（桌機）→ 隱藏 CSS 星點，避免跟 Three.js 星點重疊雙倍
   ::before（黑洞漸層）跟 ::after（noise）保留，當 Three.js 星點的底色畫布 */
body.has-threejs #css-starfield > .css-stars {
    display: none;
}

.css-stars {
    position: absolute;
    inset: -15%;
    width: 130%;
    height: 130%;
    will-change: transform;
    /* box-shadow 由 nav.js initCSSStarfield() 動態注入，確保真正圓形星點 */
}

/* ── 層一：細小遠星（高密度、極慢移）─── */
.css-stars--s {
    animation: stars-drift-s 140s linear infinite;
    opacity: 0.75;
}

/* ── 層二：中型星（中密度、反向緩移）─── */
.css-stars--m {
    animation: stars-drift-m 200s linear infinite;
    opacity: 0.70;
}

/* ── 層三：亮點近星（低密度、帶光暈）─── */
.css-stars--l {
    animation: stars-drift-l 260s linear infinite;
    opacity: 0.65;
}

/* ─── 全站內容容器 ─── */
.container {
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--sec-px);
}

/* ─── Typography ─── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--f-sans);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

h1 { font-size: clamp(var(--fs-3xl), 6vw, var(--fs-5xl)); }
h2 { font-size: clamp(var(--fs-2xl), 4vw, var(--fs-4xl)); }
h3 { font-size: clamp(var(--fs-xl),  3vw, var(--fs-3xl)); }
h4 { font-size: var(--fs-lg); }

p {
    color: var(--c-muted);
    line-height: 1.75;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

ul, ol {
    list-style: none;
}

/* ─── 通用分區樣式 ─── */
section {
    position: relative;
    z-index: var(--z-content);
}

/* ─── 通用 visible 狀態（GSAP 進場前隱藏，JS 完成後由 GSAP 控制）
   只在 .js class 存在時才隱藏，確保 JS 載入失敗時內容仍可見 ─── */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(30px);
}

/* Hero 入場前預隱藏（僅 .js 存在時），取代 HTML inline style="opacity:0" */
.js .js-hidden {
    opacity: 0;
}

/* ─── DESIGN_MODE 靜態設計凍結救援（2026-04-19） ───
   body.design-mode：index.js 關閉 L2 進場 + L3 捲動驅動後，
   讓原本等待 GSAP 解放的元素直接可見、純 CSS 控制版面
*/
body.design-mode .js-hidden,
body.design-mode .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
}

/* 所有 CSS animation 凍結於當下幀（太空人 float / glow radiate / god-rays / star-twinkle 等）
   Three.js 端由 index.js 自行判斷 DESIGN_MODE，跑一幀後停住 */
body.design-mode *,
body.design-mode *::before,
body.design-mode *::after {
    animation-play-state: paused !important;
}

/* ─── 選取色 ─── */
::selection {
    background: var(--c-blue);
    color: var(--c-white);
}

/* ─── 滾動條 ─── */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--c-black);
}

::-webkit-scrollbar-thumb {
    background: var(--c-navy);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--c-blue);
}

/* ─── 手機響應式基礎 ─── */
@media (max-width: 900px) {
    :root {
        --sec-px: 1.25rem;
    }

    h1 { font-size: clamp(2rem, 9vw, 3.5rem); }
    h2 { font-size: clamp(1.75rem, 7vw, 2.5rem); }
}