/* ========================================
   星座 SVG 图标统一颜色控制
   所有星座使用相同的颜色 #746439
   ======================================== */

/* 基础样式 */
.zodiac-item__icon {
    position: relative;
    width: 35px;
    height: 35px;
    margin: 0 auto var(--spacing-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.zodiac-svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: filter 0.3s ease;
    /* 将黑色或深色 SVG 转换为 #746439 */
    filter: brightness(0) saturate(100%) invert(36%) sepia(14%) saturate(1044%) hue-rotate(20deg) brightness(88%) contrast(87%);
}

/* ========================================
   悬停效果 - 变成 #f0dbad
   ======================================== */
.zodiac-item:hover .zodiac-svg {
    /* 悬停时变成 #f0dbad */
    filter: brightness(0) saturate(100%) invert(89%) sepia(15%) saturate(681%) hue-rotate(355deg) brightness(102%) contrast(89%);
}

.zodiac-item:hover .zodiac-item__icon {
    transform: scale(1.15);
}

/* ========================================
   激活状态
   ======================================== */
.zodiac-item.active .zodiac-svg {
    /* 激活状态使用更深的颜色 */
    filter: brightness(0) saturate(100%) invert(28%) sepia(18%) saturate(1200%) hue-rotate(25deg) brightness(82%) contrast(90%);
}

/* ========================================
   如果 SVG 原始是白色，使用这个类
   ======================================== */
.zodiac-svg--white {
    /* 先反转成黑色，再应用颜色 */
    filter: invert(1) brightness(0) saturate(100%) invert(36%) sepia(14%) saturate(1044%) hue-rotate(20deg) brightness(88%) contrast(87%);
}

.zodiac-item:hover .zodiac-svg--white {
    /* 悬停时变成 #f0dbad */
    filter: invert(1) brightness(0) saturate(100%) invert(89%) sepia(15%) saturate(681%) hue-rotate(355deg) brightness(102%) contrast(89%);
}

/* ========================================
   备用方案：使用 CSS Mask（更精确的颜色控制）
   如果 filter 效果不理想，可以使用这个方案
   ======================================== */
.zodiac-icon--mask {
    width: 35px;
    height: 35px;
    background-color: #746439; /* 统一的颜色 */
    transition: background-color 0.3s ease, transform 0.3s ease;
    /* 需要设置具体的 SVG 路径 */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Mask 方案的悬停效果 */
.zodiac-item:hover .zodiac-icon--mask {
    background-color: #f0dbad; /* 浅褐色 */
    transform: scale(1.15);
}

/* ========================================
   如果需要根据属性动态设置（但不依赖 nameEn）
   可以使用 data-index 或其他稳定的属性
   ======================================== */
.zodiac-item__icon[data-index] .zodiac-svg {
    /* 所有星座统一颜色 */
    filter: brightness(0) saturate(100%) invert(36%) sepia(14%) saturate(1044%) hue-rotate(20deg) brightness(88%) contrast(87%);
}

/* ========================================
   动画效果
   ======================================== */
@keyframes zodiac-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.9;
    }
}

/* 添加脉冲动画 */
.zodiac-item.animated .zodiac-item__icon {
    animation: zodiac-pulse 2s infinite;
}

/* ========================================
   加载状态
   ======================================== */
.zodiac-item__icon.loading .zodiac-svg {
    opacity: 0.5;
    animation: zodiac-pulse 1s infinite;
}

/* ========================================
   禁用状态
   ======================================== */
.zodiac-item.disabled .zodiac-svg {
    opacity: 0.4;
    filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(85%);
}

.zodiac-item.disabled:hover .zodiac-svg {
    /* 禁用状态悬停时不改变颜色 */
    filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(85%);
}

.zodiac-item.disabled:hover .zodiac-item__icon {
    transform: none; /* 禁用状态不放大 */
}

/* ========================================
   响应式设计
   ======================================== */
@media (max-width: 768px) {
    .zodiac-item__icon {
        width: 30px;
        height: 30px;
    }
    
    .zodiac-item:hover .zodiac-item__icon {
        transform: scale(1.1); /* 移动端稍微小一点的放大效果 */
    }
}

/* ========================================
   暗色模式支持
   ======================================== */
@media (prefers-color-scheme: dark) {
    .zodiac-svg {
        /* 暗色模式下稍微提亮 */
        filter: brightness(0) saturate(100%) invert(42%) sepia(16%) saturate(944%) hue-rotate(18deg) brightness(92%) contrast(85%);
    }
    
    .zodiac-item:hover .zodiac-svg {
        /* 暗色模式下的 #f0dbad 更亮一些 */
        filter: brightness(0) saturate(100%) invert(92%) sepia(12%) saturate(581%) hue-rotate(352deg) brightness(105%) contrast(87%);
    }
}

/* ========================================
   打印样式
   ======================================== */
@media print {
    .zodiac-svg {
        /* 打印时使用纯黑色 */
        filter: none !important;
    }
    
    .zodiac-item__icon {
        transform: none !important;
    }
}

/* ========================================
   无障碍支持
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    .zodiac-item__icon,
    .zodiac-svg {
        transition: none;
    }
    
    .zodiac-item.animated .zodiac-item__icon {
        animation: none;
    }
}