/**
 * 组件样式 - 可复用的 UI 组件
 * 
 * 本文件包含可复用 UI 组件的样式，包括：
 * - 按钮 (.btn-primary, .btn-secondary)
 * - 特性卡片及悬停效果
 * - 下载区域及响应式网格布局
 * - 页面导航（侧边索引点）
 * - 特性轮播（扑克牌堆叠动画）
 * 
 * 响应式断点：
 * - 1024px：平板设备
 * - 768px：小平板和大屏手机
 * - 480px：小屏手机
 */

/* ============================================
   按钮样式
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    cursor: pointer;
    white-space: nowrap;
}

/* 主按钮 - 蓝色背景，悬停时上浮 */
.btn-primary {
    background: var(--color-primary);
    color: var(--color-text-light);
    box-shadow: var(--shadow-primary);
}

.btn-primary:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px); /* 悬停上浮效果 */
    box-shadow: 0 6px 20px rgba(0, 153, 255, 0.35);
}

.btn-primary:active {
    transform: translateY(0); /* 点击时恢复 */
}

/* 次按钮 - 透明背景带边框 */
.btn-secondary {
    background: transparent;
    color: var(--color-text-primary);
    border: 2px solid var(--color-border);
}

.btn-secondary:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-bg);
}

/* ============================================
   特性卡片样式
   ============================================ */

.feature-card {
    background: var(--color-bg-primary);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border-light);
    transition: all var(--transition-normal);
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.feature-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-bg);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-lg);
    color: var(--color-primary);
}

.feature-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.feature-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

.scroll-indicator {
    position: absolute;
    bottom: var(--spacing-xl);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-text-muted);
    animation: bounce 2s infinite;
}

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

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* ============================================
   滚动淡入动画样式
   元素滚动进入视口时的渐显效果
   ============================================ */

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 延迟类 - 创建波浪式渐显效果 */
.fade-in-delay-1 {
    transition-delay: 0.1s;
}

.fade-in-delay-2 {
    transition-delay: 0.2s;
}

.fade-in-delay-3 {
    transition-delay: 0.3s;
}

.fade-in-delay-4 {
    transition-delay: 0.4s;
}

.fade-in-delay-5 {
    transition-delay: 0.5s;
}

.fade-in-delay-6 {
    transition-delay: 0.6s;
}

/* ============================================
   语言切换按钮
   点击切换中文和英文
   ============================================ */

.lang-selector {
    position: relative;
}

.lang-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.lang-toggle:hover {
    color: var(--color-primary);
    background: var(--color-primary-bg);
}

@media (max-width: 768px) {
    .lang-toggle {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-xs);
    }
}

/* ============================================
   下载区域（使用版块）
   全屏高度区域，包含三个下载选项
   使用 CSS Scroll Snap 实现整页滚动
   ============================================ */

.download {
    background: var(--color-bg-secondary);
    min-height: 100vh; /* 最小高度，移动端可扩展 */
    height: auto; /* 允许内容自然扩展 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-4xl) var(--spacing-lg);
    scroll-snap-align: start; /* 滚动时吸附到此区域 */
    scroll-margin-top: var(--header-height); /* 考虑固定头部 */
}

.download .container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.download-content {
    text-align: center;
}

.download-description {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto var(--spacing-3xl);
    line-height: var(--line-height-relaxed);
}

/* 三列网格布局 - 在线版、发行版、源代码 */
.download-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
    max-width: 1100px;
    margin: 0 auto;
}

.download-card {
    background: var(--color-bg-primary);
    padding: var(--spacing-2xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border-light);
    text-align: center;
    transition: all var(--transition-normal);
}

.download-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: var(--color-primary);
}

.download-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-bg);
    border-radius: var(--radius-lg);
    margin: 0 auto var(--spacing-lg);
    color: var(--color-primary);
}

.download-icon svg {
    fill: currentColor;
}

.download-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.download-info {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
    line-height: var(--line-height-relaxed);
}

.download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    background: var(--color-primary);
    color: var(--color-text-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-primary);
    transition: all var(--transition-fast);
    cursor: pointer;
    text-decoration: none;
}

.download-btn:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 153, 255, 0.35);
}

.download-btn:active {
    transform: translateY(0);
}

.download-dev-link {
    margin-top: var(--spacing-md);
}

.download-dev-link a {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    transition: color var(--transition-fast);
}

.download-dev-link a:hover {
    color: var(--color-primary);
}

@media (max-width: 1024px) {
    .download-options {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .download {
        padding: var(--spacing-2xl) var(--spacing-md);
        min-height: auto;
    }
    
    .download-options {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        padding: 0;
    }
    
    .download-card {
        padding: var(--spacing-xl);
    }
    
    .download-description {
        font-size: var(--font-size-sm);
        margin-bottom: var(--spacing-lg);
    }
    
    .download-title {
        font-size: var(--font-size-lg);
    }
    
    .download-info {
        font-size: var(--font-size-sm);
    }
    
    .download-btn {
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: var(--font-size-sm);
    }
}

@media (max-width: 480px) {
    .download {
        padding: var(--spacing-xl) var(--spacing-sm);
    }
    
    .download-options {
        gap: var(--spacing-md);
        padding: 0;
    }
    
    .download-card {
        padding: var(--spacing-lg);
    }
    
    .download-icon {
        width: 48px;
        height: 48px;
    }
    
    .download-icon svg {
        width: 24px;
        height: 24px;
    }
    
    .download-description {
        font-size: var(--font-size-xs);
    }
    
    .download-title {
        font-size: var(--font-size-base);
    }
    
    .download-info {
        font-size: var(--font-size-xs);
    }
    
    .download-btn {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-xs);
    }
    
    .download-dev-link {
        font-size: var(--font-size-xs);
    }
}

/* ============================================
   页面导航（侧边索引）
   固定在左侧的导航点
   用连接线显示当前区域位置
   在 hero 和 footer 区域隐藏
   ============================================ */

.page-nav {
    position: fixed;
    left: var(--spacing-xl);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: var(--z-index-sticky);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

/* 仅在 features 和 download 区域显示导航 */
.page-nav.visible {
    opacity: 1;
    visibility: visible;
}

/* 点和线的容器 */
.page-nav-dots {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* 连接所有点的垂直线 - 基础细线 */
.page-nav-line {
    position: absolute;
    left: 50%;
    width: 2px;
    background: var(--color-border);
    transform: translateX(-50%);
    transition: all var(--transition-fast);
    z-index: 0;
}

/* 激活点附近的粗线 - 显示距离当前区域的远近 */
.page-nav-line-thick {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    background: var(--color-primary);
    transition: all var(--transition-fast);
    z-index: 1;
    display: none;
}

/* 中等粗细的线 - 粗线和细线之间的过渡 */
.page-nav-line-medium {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    background: var(--color-primary-light);
    transition: all var(--transition-fast);
    z-index: 1;
    display: none;
}

.page-nav-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0;
    margin: 20px 0;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    z-index: 2;
}

.page-nav-item:first-child {
    margin-top: 0;
}

.page-nav-item:last-child {
    margin-bottom: 0;
}

.page-nav-dot {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    background: var(--color-bg-primary);
    border: 2px solid var(--color-border);
    transition: all var(--transition-fast);
    position: relative;
    z-index: 2;
}

.page-nav-item:hover .page-nav-dot {
    border-color: var(--color-primary);
    background: var(--color-primary-bg);
    transform: scale(1.2);
}

.page-nav-item.active .page-nav-dot {
    border-color: var(--color-primary);
    background: var(--color-primary);
    width: 16px;
    height: 16px;
}

.page-nav-label {
    position: absolute;
    left: 24px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    opacity: 0;
    transform: translateX(-10px);
    transition: all var(--transition-fast);
    white-space: nowrap;
    pointer-events: none;
}

.page-nav-item:hover .page-nav-label {
    opacity: 1;
    transform: translateX(0);
    color: var(--color-text-primary);
}

.page-nav-item.active .page-nav-label {
    color: var(--color-primary);
}

@media (max-width: 768px) {
    .page-nav {
        left: var(--spacing-sm);
        transform: translateY(-50%) scale(0.8);
    }
    
    .page-nav-dot {
        width: 10px;
        height: 10px;
    }
    
    .page-nav-item.active .page-nav-dot {
        width: 14px;
        height: 14px;
    }
    
    .page-nav-item {
        margin: 16px 0;
    }
    
    .page-nav-label {
        left: 20px;
        font-size: var(--font-size-xs);
        padding: 4px 8px;
    }
    
    .page-nav-line,
    .page-nav-line-thick,
    .page-nav-line-medium {
        width: 1px;
    }
}

@media (max-width: 480px) {
    .page-nav {
        display: none;
    }
}

/* ============================================
   特性区域 - 扑克牌堆叠轮播
   带有 3D 透视效果的扑克牌堆叠样式
   每 4 秒自动轮播，悬停时暂停
   显示 5 张可见卡片，中心卡片高亮
   ============================================ */

.features {
    background: var(--color-bg-primary);
    min-height: 100vh; /* 最小高度，移动端可扩展 */
    height: auto; /* 允许内容自然扩展 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* 隐藏视口外的卡片 */
    position: relative;
    padding: var(--spacing-4xl) 0;
    scroll-snap-align: start; /* 滚动时吸附到此区域 */
    scroll-margin-top: var(--header-height); /* 考虑固定头部 */
}

.features .section-title {
    margin-bottom: var(--spacing-3xl);
}

@media (max-width: 768px) {
    .features .section-title {
        margin-bottom: var(--spacing-xl);
        font-size: var(--font-size-xl);
    }
}

@media (max-width: 480px) {
    .features .section-title {
        margin-bottom: var(--spacing-lg);
        font-size: var(--font-size-lg);
    }
}

/* 轮播容器 - 带有 3D 透视效果用于卡片旋转 */
.features-carousel {
    position: relative;
    width: 100%;
    height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px; /* 3D 透视效果 */
}

/* 单个特性卡片 - 扑克牌式竖向矩形 */
.feature-card-stack {
    position: absolute;
    width: 260px;
    height: 380px;
    padding: var(--spacing-xl);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    opacity: 0;
    transform: translateX(0) scale(0.8) rotateY(0);
    z-index: 0;
    display: flex;
    flex-direction: column;
}

/* Visible cards (5 cards) */
.feature-card-stack.visible-1 {
    opacity: 1;
    transform: translateX(-280px) scale(0.85) rotateY(15deg);
    z-index: 1;
}

.feature-card-stack.visible-2 {
    opacity: 1;
    transform: translateX(-140px) scale(0.92) rotateY(8deg);
    z-index: 2;
}

.feature-card-stack.visible-3 {
    opacity: 1;
    transform: translateX(0) scale(1) rotateY(0deg);
    z-index: 3;
    box-shadow: var(--shadow-lg);
}

.feature-card-stack.visible-4 {
    opacity: 1;
    transform: translateX(140px) scale(0.92) rotateY(-8deg);
    z-index: 2;
}

.feature-card-stack.visible-5 {
    opacity: 1;
    transform: translateX(280px) scale(0.85) rotateY(-15deg);
    z-index: 1;
}

/* Hidden cards (stacked behind) */
.feature-card-stack.hidden-left {
    opacity: 0;
    transform: translateX(-420px) scale(0.7) rotateY(20deg);
    z-index: 0;
}

.feature-card-stack.hidden-right {
    opacity: 0;
    transform: translateX(420px) scale(0.7) rotateY(-20deg);
    z-index: 0;
}

.feature-card-stack:hover {
    border-color: var(--color-primary);
}

.feature-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-bg);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    color: var(--color-primary);
}

.feature-icon svg {
    fill: currentColor;
    width: 32px;
    height: 32px;
}

.feature-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.feature-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: var(--line-height-relaxed);
    flex: 1;
}

/* Development badge */
.feature-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-warning-bg);
    color: var(--color-warning);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-sm);
    margin-top: var(--spacing-sm);
}

/* Navigation dots for carousel */
.carousel-nav {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-2xl);
}

.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-border);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.carousel-dot:hover {
    background: var(--color-primary-light);
}

.carousel-dot.active {
    width: 24px;
    background: var(--color-primary);
}

@media (max-width: 768px) {
    .features {
        min-height: auto;
        padding: var(--spacing-2xl) 0;
    }
    
    .feature-card-stack {
        width: 160px;
        height: 240px;
        padding: var(--spacing-md);
    }
    
    .feature-card-stack.visible-1 {
        transform: translateX(-140px) scale(0.85) rotateY(15deg);
        opacity: 0.3;
    }
    
    .feature-card-stack.visible-2 {
        transform: translateX(-70px) scale(0.92) rotateY(8deg);
        opacity: 0.6;
    }
    
    .feature-card-stack.visible-3 {
        transform: translateX(0) scale(1) rotateY(0deg);
        opacity: 1;
    }
    
    .feature-card-stack.visible-4 {
        transform: translateX(70px) scale(0.92) rotateY(-8deg);
        opacity: 0.6;
    }
    
    .feature-card-stack.visible-5 {
        transform: translateX(140px) scale(0.85) rotateY(-15deg);
        opacity: 0.3;
    }
    
    .feature-icon {
        width: 40px;
        height: 40px;
    }
    
    .feature-icon svg {
        width: 24px;
        height: 24px;
    }
    
    .features-carousel {
        height: 300px;
    }
    
    .feature-title {
        font-size: var(--font-size-sm);
    }
    
    .feature-desc {
        font-size: var(--font-size-xs);
    }
    
    .feature-badge {
        font-size: 10px;
        padding: 2px 6px;
    }
    
    .carousel-dots {
        gap: var(--spacing-sm);
    }
    
    .carousel-dot {
        width: 8px;
        height: 8px;
    }
    
    .carousel-dot.active {
        width: 16px;
    }
}

@media (max-width: 480px) {
    .features {
        padding: var(--spacing-xl) 0;
    }
    
    .feature-card-stack {
        width: 140px;
        height: 220px;
        padding: var(--spacing-sm);
    }
    
    .feature-card-stack.visible-1 {
        transform: translateX(-100px) scale(0.85) rotateY(15deg);
        opacity: 0.2;
    }
    
    .feature-card-stack.visible-2 {
        transform: translateX(-50px) scale(0.92) rotateY(8deg);
        opacity: 0.5;
    }
    
    .feature-card-stack.visible-3 {
        transform: translateX(0) scale(1) rotateY(0deg);
        opacity: 1;
    }
    
    .feature-card-stack.visible-4 {
        transform: translateX(50px) scale(0.92) rotateY(-8deg);
        opacity: 0.5;
    }
    
    .feature-card-stack.visible-5 {
        transform: translateX(100px) scale(0.85) rotateY(-15deg);
        opacity: 0.2;
    }
    
    .features-carousel {
        height: 280px;
    }
    
    .feature-icon {
        width: 32px;
        height: 32px;
    }
    
    .feature-icon svg {
        width: 20px;
        height: 20px;
    }
}