/*
===========================================
 ZYCDAI 玻璃拟态 (Glassmorphism) 风格系统
===========================================

 该文件定义了一个可复用的"玻璃拟态"UI风格，
 通过背景模糊、半透明材质和微妙的边框光晕，
 营造出一种轻盈、通透的现代科技感。

 使用方法：
 在需要应用效果的HTML元素上添加 `class="glass-card"` 即可。

 示例：
 <div class="tech-card glass-card">
   ...
 </div>

===========================================
*/

:root {
    /* 玻璃拟态核心变量 */
    --glass-blur-radius: 12px;
    --glass-bg-color: rgba(27, 38, 59, 0.5); /* 半透明深蓝，可根据背景调整 */
    --glass-border-color: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    --glass-hover-shadow: 0 12px 30px rgba(0, 210, 255, 0.1);

    /* 玻璃光晕边框渐变 */
    --glass-border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
    --glass-border-gradient-hover: linear-gradient(135deg, rgba(0, 210, 255, 0.2) 0%, rgba(0, 210, 255, 0.05) 100%);
}

.glass-card {
    /* 核心效果 */
    background: var(--glass-bg-color);
    backdrop-filter: blur(var(--glass-blur-radius));
    -webkit-backdrop-filter: blur(var(--glass-blur-radius)); /* 兼容Safari */
    border: 1px solid var(--glass-border-color);
    box-shadow: var(--glass-shadow);
    
    /* 通用属性 */
    transition: var(--transition);
    position: relative;
    z-index: 1;
}

/* 模拟发光的边框效果 */
.glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit; /* 继承父元素的圆角 */
    border: 1px solid transparent;
    background: var(--glass-border-gradient);
    
    /* 通过遮罩技术创建1px的内发光边框 */
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    
    pointer-events: none;
    transition: var(--transition);
}

/* 悬停效果 */
.glass-card:hover {
    box-shadow: var(--glass-hover-shadow);
    transform: translateY(-5px);
}

.glass-card:hover::before {
    background: var(--glass-border-gradient-hover);
}

/* 
   特别注意：
   要使 backdrop-filter 生效，父级元素或背景本身不能是纯色，
   必须有一定的透明度或内容（如背景图片、粒子动画等）。
   本网站的粒子动画背景完美适配此效果。
*/