/* 页面滚动相关的效果样式 - 丝滑优化版 */

/* 滚动指示器 - 极度微妙的版本 */
.scroll-indicator {
    position: fixed;
    top: 0;
    left: 0;
    height: 1.5px; /* 更加细腻的指示线 */
    background: linear-gradient(90deg, 
        rgba(230, 126, 34, 0.7), 
        rgba(52, 152, 219, 0.7));
    width: 0%;
    z-index: 1001;
    opacity: 0.6; /* 开始时更加微妙 */
    transition: width 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), 
                opacity 0.5s ease,
                height 0.5s ease;
}

/* 当滚动指示器活跃时微妙增强 */
.scroll-indicator.active {
    opacity: 0.8;
    height: 2px;
    box-shadow: 0 0 2px rgba(230, 126, 34, 0.2);
}

/* 当页面快速滚动时的特殊状态 */
.fast-scrolling .scroll-indicator {
    transition: width 0.15s linear; /* 快速滚动时更加线性的过渡 */
}

/* 导航栏状态间的丝滑过渡增强 */
header {
    contain: layout style; /* 提高性能和动画流畅度 */
}

/* 为缩小状态添加极其微妙的状态指示 */
header.shrink::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.5px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(230, 126, 34, 0.05), 
        transparent);
    opacity: 0; /* 初始不可见 */
    transform: scaleX(0.98);
    transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1),
                transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}

header.shrink:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

/* 导航链接在缩小状态下的微妙过渡增强 */
nav ul li a {
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), 
                background-color 0.6s ease,
                color 0.3s ease;
}

header.shrink nav ul li a {
    will-change: transform, color; /* 提升性能 */
}

header.shrink nav ul li a:hover {
    transform: translateY(-0.5px); /* 极微小的上浮 */
    color: var(--secondary-color);
}

/* 移动设备上的优化 */
@media (max-width: 768px) {
    .scroll-indicator {
        height: 1px;
        opacity: 0.5;
    }
    
    .scroll-indicator.active {
        height: 1.5px;
    }
    
    header.shrink {
        transform: translateY(-1px) scale(0.9995); /* 移动端上更微小的变换 */
    }
}

/* 优化触摸设备体验 */
@media (hover: none) {
    header.shrink::after {
        display: none; /* 在触摸设备上隐藏不必要的装饰 */
    }
    
    .scroll-indicator {
        opacity: 0.4;
    }
}