/*
===========================================
ZYCDAI 统一图标系统
===========================================

这个文件定义了网站的统一图标系统，确保所有图标在尺寸、颜色和交互效果上保持一致。

使用方法：
1. 基础图标：直接使用 emoji 图标
2. 添加尺寸类：.icon-xs, .icon-sm, .icon-md, .icon-lg, .icon-xl, .icon-xxl
3. 添加颜色类：.icon-primary, .icon-secondary, .icon-accent, .icon-success, .icon-warning, .icon-future
4. 添加容器（可选）：.icon-container + .icon-container-sm/md/lg

示例：
<span class="icon-lg icon-primary">🚀</span>
<div class="icon-container icon-container-md">
    <span class="icon-md icon-primary">🤖</span>
</div>
*/

/* 图标尺寸规范 */
.icon-usage-guide {
    display: none; /* 仅用于文档说明 */
    /*
    --icon-size-xs: 1rem (16px) - 用于徽章、标签内的小图标
    --icon-size-sm: 1.25rem (20px) - 用于功能标签、导航图标
    --icon-size-md: 1.5rem (24px) - 用于标准内容图标
    --icon-size-lg: 2rem (32px) - 用于重要内容、Logo
    --icon-size-xl: 2.5rem (40px) - 用于标题图标、特色展示
    --icon-size-xxl: 3rem (48px) - 用于主要功能卡片、大型展示
    */
}

/* 图标颜色规范 */
.icon-color-guide {
    display: none; /* 仅用于文档说明 */
    /*
    --icon-color-primary: #00D2FF - 主要图标颜色（科技蓝）
    --icon-color-secondary: #8B9DC3 - 次要图标颜色（灰蓝色）
    --icon-color-accent: #00FFFF - 强调图标颜色（亮青色）
    --icon-color-success: #00FF88 - 成功状态图标（绿色）
    --icon-color-warning: #FFB800 - 警告状态图标（橙色）
    --icon-color-future: #8A2BE2 - 未来规划图标（紫色）
    */
}

/* 扩展图标效果类 */
.icon-pulse {
    animation: iconPulse 2s infinite;
}

.icon-rotate {
    animation: iconRotate 10s linear infinite;
}

.icon-bounce {
    animation: iconBounce 1s infinite;
}

.icon-glow-strong {
    filter: drop-shadow(0 0 20px rgba(0, 210, 255, 0.6));
}

.icon-glow-subtle {
    filter: drop-shadow(0 0 5px rgba(0, 210, 255, 0.2));
}

/* 图标组合样式 */
.icon-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.icon-stack {
    position: relative;
    display: inline-block;
}

.icon-stack .icon-base {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-stack .icon-background {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(1.5);
}

/* 图标状态样式 */
.icon-disabled {
    opacity: 0.5;
    filter: grayscale(100%);
    pointer-events: none;
}

.icon-active {
    color: var(--icon-color-accent);
    filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.5));
}

.icon-loading {
    animation: iconRotate 1s linear infinite;
    opacity: 0.7;
}

/* 专用图标类型 */
.tech-icon-enhanced {
    position: relative;
    z-index: 1;
}

.tech-icon-enhanced::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(0, 210, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    z-index: -1;
    transition: var(--icon-transition);
}

.tech-icon-enhanced:hover::before {
    background: radial-gradient(circle, rgba(0, 210, 255, 0.2) 0%, transparent 70%);
    transform: translate(-50%, -50%) scale(1.2);
}

/* 时间轴专用图标 */
.timeline-icon {
    position: relative;
    z-index: 2;
}

.timeline-icon.future {
    color: var(--icon-color-future);
    filter: drop-shadow(0 0 10px rgba(138, 43, 226, 0.5));
}

/* 动画定义 */
@keyframes iconPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

@keyframes iconRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes iconBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* 响应式图标调整 */
@media (max-width: 768px) {
    .icon-responsive-lg {
        font-size: var(--icon-size-lg);
    }
    
    .icon-responsive-md {
        font-size: var(--icon-size-md);
    }
    
    .icon-container-lg {
        width: 4rem;
        height: 4rem;
    }
    
    .icon-container-md {
        width: 3rem;
        height: 3rem;
    }
}

@media (max-width: 480px) {
    .icon-responsive-lg {
        font-size: var(--icon-size-md);
    }
    
    .icon-responsive-md {
        font-size: var(--icon-size-sm);
    }
    
    .icon-container-lg {
        width: 3.5rem;
        height: 3.5rem;
    }
    
    .icon-container-md {
        width: 2.5rem;
        height: 2.5rem;
    }
}

/* 可访问性支持 */
@media (prefers-reduced-motion: reduce) {
    .icon-pulse,
    .icon-rotate,
    .icon-bounce {
        animation: none;
    }
    
    .icon-base:hover {
        transform: none;
    }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .icon-base {
        filter: none;
        border: 1px solid currentColor;
        padding: 0.1em;
    }
    
    .icon-container {
        border-width: 2px;
    }
}