/**
 * Pi 主站 About 页面自定义样式
 */

/* ========== 基础 ========== */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Mulish', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========== 导航栏滚动效果 ========== */
#navbar.scrolled {
    background-color: rgba(10, 10, 15, 0.95);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

#navbar.scrolled .nav-link {
    color: rgba(255, 255, 255, 0.9);
}

/* ========== Hero 视频优化 ========== */
section:first-of-type video {
    z-index: -1;
    transform: scale(1.05); /* 稍微放大避免边缘黑边 */
}

/* 移动端视频降级处理 */
@media (max-width: 768px) {
    /* 某些手机浏览器不支持自动播放，隐藏视频显示渐变背景 */
    section:first-of-type video {
        /* 保持显示，JS 会检测并处理 */
    }
}

/* ========== 自定义动画 ========== */
@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes spin-slow-reverse {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
}

.animate-spin-slow {
    animation: spin-slow 20s linear infinite;
}

.animate-spin-slow-reverse {
    animation: spin-slow-reverse 25s linear infinite;
}

/* ========== 滚动淡入 ========== */
.fade-in-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

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

/* ========== Hero 开场视频 + 内容过渡 ========== */
#hero-video-wrap {
    transition: opacity 0.6s ease-out;
}
#hero-content {
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
#hero-content.hero-content-appear {
    opacity: 0;
    transform: translateY(20px);
    animation: heroContentIn 0.9s ease-out 0.1s forwards;
}
@keyframes heroContentIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ========== 滚动条美化 ========== */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0a0a0f;
}

::-webkit-scrollbar-thumb {
    background: #703D92;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9B6CBF;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #703D92 #0a0a0f;
}

/* ========== 选中文本颜色 ========== */
::selection {
    background: #703D92;
    color: white;
}