.ball-wave-container {
    display: flex;
    justify-content: center; /* 讓小球群居中對齊 */
    align-items: center;
    width: 100%; /* 100% 百分比等比例模式顯示 */
    height: 40px; /* 給予小球足夠的上下彈跳空間 */
    gap: 3px; /* 小圓球之間的固定間距為 3px */

    position: relative;
}

/* 貫穿中央的精緻水平基準線 */
.ball-wave-container::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-bottom: 0px dashed #334155; /* 虛線基底，增添科技感 */
    z-index: 1;
}

/* ==========================================
   小圓球基礎樣式與核心動畫
   ========================================== */
.ball {
    flex-shrink: 0; /* 防止小球在擠壓時變形（保持正圓） */
    width: 12px; /* 小圓球的精緻直徑 */
    height: 12px;
    border-radius: 50%; /* 完美的正圓球 */
    position: relative;
    z-index: 2;
    
    /* 核心動畫：微幅呼吸閃爍與交替彈跳 (時長 1.2 秒，無限循環) */
    animation: normal-pulse 0.8s ease-in-out infinite alternate;
}

/* --- 利用 CSS 自動將小球分配 紅、藍、綠 顏色與動畫時間差 --- */
/* 每 3 顆球為一個色彩與動態循環 */
.ball:nth-child(3n+1) {
    background-color: #FFD600; /* 紅球 */
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
    animation-delay: 0s; /* 紅球先動 */
}

.ball:nth-child(3n+2) {
    background-color: #3b82f6; /* 藍球 */
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
    animation-delay: 0.4s; /* 藍球延遲 0.4 秒，錯開時間 */
}

.ball:nth-child(3n) {
    background-color: #10b981; /* 綠球 */
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
    animation-delay: 0.8s; /* 綠球延遲 0.8 秒，形成串聯感 */
}

/* 【核心動畫關鍵影格】控制小圓球上下交替跳動與亮暗閃爍 */
@keyframes normal-pulse {
    0% {
        transform: translateY(0) scale(1);
        filter: brightness(0.7); /* 在基準線上時較暗 */
    }
    100% {
        transform: translateY(-8px) scale(1.05); /* 向上彈跳 8px 並微微放大 */
        filter: brightness(1.4) drop-shadow(0 0 4px currentcolor); /* 跳到最高點時發光 */
    }
}


/* 基本頁面重設，方便預覽 */


/* 主圖層：滿版、等比例 100% 顯示原始 Logo */
.balogo-01 {
    position: relative;
    width: 100%;

    aspect-ratio: 300 / 201; /* 依上傳圖片比例 (300x201) 保持等比例縮放 */
    background-image: url('logo.png'); /* 請替換成您的圖片路徑 */
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

width:300px;     
display: flex;
    justify-content: center; /* 水平置中 */
    align-items: center;     /* 垂直置中 */
}

/* 霓虹光譜滑過與彩色閃爍圖層 */
.neon-flash-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 1. 七彩霓虹漸層光帶（傾斜 45 度） */
    background: linear-gradient(
        45deg,
        rgba(255, 0, 0, 0) 20%,
        rgba(255, 0, 0, 0.8) 35%,
        rgba(0, 255, 255, 0.8) 50%,
        rgba(255, 0, 255, 0.8) 65%,
        rgba(255, 0, 0, 0) 80%
    );
    background-size: 300% 300%; /* 放大背景尺寸以利流暢滑動 */

    /* 2. 核心技術：將遮罩設定為同一個 Logo，使光效只顯示在字體與圖案上 */
    -webkit-mask-image: url('logo.png');
    mask-image: url('logo.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    /* 3. 混合模式：讓霓虹光與原本的黑字/黃字產生科技感的融合疊加 */
    mix-blend-mode: screen;

    /* 4. 動態效果：同時執行滑動、色相轉變（霓虹）、呼吸閃爍。速度設定為中上（1.5s - 2s） */
    animation: 
        shineMove 2s linear infinite,
        colorShift 1.5s linear infinite,
        cyberPulse 0.8s ease-in-out infinite alternate;
}

/* 動畫 1：七彩光帶從左下往右上滑過 */
@keyframes shineMove {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 150% 50%;
    }
}

/* 動畫 2：色相無限旋轉，創造不同時間彩色閃爍、變色的霓虹感 */
@keyframes colorShift {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

/* 動畫 3：電子科技感的明暗快速閃爍（呼吸燈效果） */
@keyframes cyberPulse {
    0% {
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.6;
    }
}

.aboutimg {
 margin-bottom: 8px;
    margin-top: 8px;
}