/**
 * 頭像樣式系統
 * 提供形狀、濾鏡、外框等樣式選項
 */

/* ==================== 形狀樣式 ==================== */

/* 方形 (預設) */
.avatar-shape-square {
    border-radius: 0;
}

/* 圓形 */
.avatar-shape-circle {
    border-radius: 50%;
}

/* 圓角方形 */
.avatar-shape-rounded {
    border-radius: 12%;
}

/* ==================== 濾鏡樣式 ==================== */

/* 無濾鏡 (預設) */
.avatar-filter-none {
    filter: none;
}

/* 灰階 */
.avatar-filter-grayscale {
    filter: grayscale(100%);
}

/* 黑白高對比 */
.avatar-filter-bw {
    filter: grayscale(100%) contrast(130%) brightness(95%);
}

/* 復古 */
.avatar-filter-sepia {
    filter: sepia(70%);
}

/* 暖色調 */
.avatar-filter-warm {
    filter: sepia(25%) saturate(140%) brightness(105%);
}

/* 冷色調 */
.avatar-filter-cool {
    filter: hue-rotate(190deg) saturate(110%);
}

/* 高飽和 */
.avatar-filter-saturate {
    filter: saturate(170%) contrast(110%);
}

/* 柔和 */
.avatar-filter-soft {
    filter: contrast(85%) saturate(85%) brightness(105%);
}

/* ==================== 外框樣式 ==================== */

/* 無框 (預設) */
.avatar-border-none {
    border: none;
    box-shadow: none;
}

/* 細線框 */
.avatar-border-thin {
    border: 2px solid var(--border-color, #ffffff);
}

/* 粗線框 */
.avatar-border-thick {
    border: 6px solid var(--border-color, #ffffff);
}

/* 雙線框 */
.avatar-border-double {
    border: 4px double var(--border-color, #ffffff);
}

/* 立體框 */
.avatar-border-3d {
    border: 3px solid var(--border-color, #ffffff);
    box-shadow:
        0 4px 8px rgba(0,0,0,0.1),
        inset 0 1px 0 rgba(255,255,255,0.3),
        0 0 0 1px rgba(0,0,0,0.05);
}

/* 陰影框 */
.avatar-border-shadow {
    box-shadow: 0 6px 20px rgba(0,0,0,0.20);
}

/* 發光框 */
.avatar-border-glow {
    box-shadow: 0 0 25px var(--border-color, rgba(99, 102, 241, 0.7));
}

/* 裝飾框 1 (幾何紋樣) */
.avatar-border-frame1 {
    border: 4px solid var(--border-color, #ffffff);
    box-shadow:
        0 0 0 2px rgba(0,0,0,0.1),
        inset 0 0 0 2px rgba(255,255,255,0.5);
    outline: 2px solid var(--border-color, #ffffff);
    outline-offset: 4px;
}

/* 裝飾框 2 (柔和光暈) */
.avatar-border-frame2 {
    border: 3px solid var(--border-color, #ffffff);
    box-shadow:
        0 0 15px rgba(0,0,0,0.1),
        0 0 30px var(--border-color, rgba(255,255,255, 0.3)),
        inset 0 1px 2px rgba(255,255,255,0.8);
}

/* ==================== 組合樣式輔助類 ==================== */

/* 頭像容器基礎樣式 */
.avatar-container {
    display: inline-block;
    overflow: hidden;
    position: relative;
}

/* 頭像圖片基礎樣式 */
.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==================== 響應式 ==================== */

@media (max-width: 768px) {
    /* 在小螢幕上外框稍微縮小 */
    .avatar-border-thick {
        border-width: 4px;
    }

    .avatar-border-frame1 {
        outline-offset: 2px;
    }
}