/* 定義品牌區的標準色值 */
:root {
    --brand-bg: #020617; /* Slate-950 的真實色值 */
    --primary-rgb: 16, 185, 129; /* brand-500 的 RGB */
}

/* 移除死黑，統一使用品牌背景色 */
body {
    background-color: var(--brand-bg) !important;
}

#mobile-overlay {
    position: fixed;
    inset: 0;
    z-index: 0; /* 特效在最下面 */
    display: block !important;
    background-color: var(--brand-bg);
}

/* 修正呼吸燈動畫：從品牌底色出發，而不是從黑色出發 */
@keyframes breathing-glow {
    0%, 100% {
        box-shadow: inset 0 0 50px rgba(var(--primary-rgb), 0.05);
        background-color: var(--brand-bg);
    }

    50% {
        box-shadow: inset 0 0 100px rgba(var(--primary-rgb), 0.15);
        background-color: #03081d; /* 呼吸時稍微亮一點點點，保持通透 */
    }
}

/* 手機版樣式切換 */
@media (max-width: 991.98px) {
    /* 隱藏左側品牌區塊 */
    .side-brand, #brand-zone {
        display: none !important;
    }

    /* 主內容外層容器：確保它繼承品牌色並執行動畫 */
    .main-content-wrapper,
    div[class*="flex-1"] { /* 針對你 HTML 中的 flex-1 區塊 */
        background-color: transparent !important;
        animation: breathing-glow 6s ease-in-out infinite;
        min-height: 100vh;
        width: 100%;
        position: relative;
    }

        /* 確保網格背景在手機版也出現，但顏色要淡 */
        .main-content-wrapper::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: linear-gradient(rgba(16, 185, 129, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 185, 129, 0.05) 1px, transparent 1px);
            background-size: 40px 40px;
            pointer-events: none;
            z-index: 0;
        }
}

/* 呼吸燈特效點 (brand.js 注入的那些圓圈) */
.animate-pulse-slow {
    animation: pulse-slow 8s infinite ease-in-out;
    filter: blur(80px); /* 確保光暈足夠柔和 */
}

@keyframes pulse-slow {
    0%, 100% {
        opacity: 0.2;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(1.1);
    }
}