/* 基础样式 */
body {
    background: radial-gradient(circle at top, #2a2a2a, #0a0a0a);
    color: #fff;
    font-family: 'Segoe UI', sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

/* 毛玻璃导航栏 */
.glass-nav {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.1);
    position: fixed;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    width: 100%;
    z-index: 1000;
}

/* 3D卡片特效 */
.article-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 2rem;
    transform-style: preserve-3d;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.article-card:hover {
    transform: translateY(-10px) rotateX(5deg);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}

/* 动态网格布局 */
.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 100px 5% 0;
}

/* 修改：统一视频样式与3D卡片一致 */
.article-grid div video {
    background: rgba(255, 255, 255, 0.05); /* 添加半透明背景 */
    border-radius: 15px; /* 圆角 */
    padding: 1rem; /* 内边距 */
    transform-style: preserve-3d; /* 保留3D空间 */
    transition: all 0.3s ease; /* 添加过渡效果 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); /* 阴影效果 */
    width: 100%; /* 宽度自适应 */
    height: auto; /* 高度自适应 */
    object-fit: cover; /* 保持比例并填充区域 */
}

/* 修改：为视频添加悬停效果 */
.article-grid div video:hover {
    transform: translateY(-10px) rotateX(5deg); /* 悬停时上移并旋转 */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5); /* 加强阴影效果 */
}