/* ==========================================================================
   surface.css — 背景光暈層、毛玻璃表面、進場動畫
   全站無彩色：光暈是單色的（深色下是白、淺色下是黑），只負責製造深度。
   ========================================================================== */

/* ---------- 背景光暈 ---------- */

.backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-backdrop);
    overflow: hidden;
    pointer-events: none;
    opacity: var(--glow-opacity);
}

.backdrop__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    will-change: transform;
}

.backdrop__glow:nth-child(1) {
    width: 48vw;
    height: 48vw;
    top: -14vw;
    left: -8vw;
    background: var(--glow-1);
    animation: glow-drift-a 30s ease-in-out infinite alternate;
}

.backdrop__glow:nth-child(2) {
    width: 42vw;
    height: 42vw;
    top: -10vw;
    right: -10vw;
    background: var(--glow-2);
    animation: glow-drift-b 36s ease-in-out infinite alternate;
}

.backdrop__glow:nth-child(3) {
    width: 36vw;
    height: 36vw;
    top: 34vh;
    left: 26vw;
    background: var(--glow-3);
    animation: glow-drift-c 42s ease-in-out infinite alternate;
}

.backdrop__glow:nth-child(4) {
    width: 30vw;
    height: 30vw;
    top: 60vh;
    right: 4vw;
    background: var(--glow-4);
    animation: glow-drift-a 34s ease-in-out infinite alternate-reverse;
}

@keyframes glow-drift-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(6vw, 8vh, 0) scale(1.18); }
}

@keyframes glow-drift-b {
    from { transform: translate3d(0, 0, 0) scale(1.1); }
    to   { transform: translate3d(-7vw, 10vh, 0) scale(.92); }
}

@keyframes glow-drift-c {
    from { transform: translate3d(0, 0, 0) scale(.95); }
    to   { transform: translate3d(9vw, -8vh, 0) scale(1.22); }
}

/* 細顆粒雜訊，避免大面積純色與漸層色帶 */
.backdrop__grain {
    position: absolute;
    inset: -50%;
    opacity: var(--grain-opacity);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 毛玻璃表面 ---------- */

.glass {
    background: var(--surface);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
}

/* 需要讀文字的表面（程式碼、彈出層）底色更實一點以保對比 */
.glass--deep {
    background: var(--surface-deep);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    backdrop-filter: var(--glass-blur-strong);
}

/* header / sidebar 這類長條 chrome */
.glass--chrome {
    background: var(--surface-chrome);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* 頂端一條高光，讓表面有「厚度」 */
.glass--lit { position: relative; }

.glass--lit::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
    pointer-events: none;
}

:root[data-theme="light"] .glass--lit::before {
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .10), transparent);
}

/* ---------- 進場動畫 ---------- */

/* 隱藏狀態刻意掛在 .reveal-on 底下，而這個 class 由 docs.js 自己加上。
   如此一來 docs.js 若載入失敗或被擋掉，內容仍然看得見，不會整頁空白。 */
:root.reveal-on [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s cubic-bezier(.22, .8, .3, 1), transform .6s cubic-bezier(.22, .8, .3, 1);
}

:root.reveal-on [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* ---------- 尊重系統的減少動態設定 ---------- */

@media (prefers-reduced-motion: reduce) {
    .backdrop__glow { animation: none !important; }

    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    * { scroll-behavior: auto !important; }
}

/* 行動裝置上關掉光暈動畫與部分模糊，避免捲動掉幀 */
@media (max-width: 640px) {
    .backdrop__glow { animation: none; filter: blur(80px); }
}