/* 重置样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 主题颜色变量（浅蓝 / 浅绿）*/
:root {
    --accent-blue: #3498db;
    --accent-teal: #26a69a;
    --text-dark: #455a64;
    --card-shadow: 0 10px 30px rgba(0,0,0,0.15);
    --vh: 1vh; /* 会在 JS 中用 window.innerHeight 设置成实际值 */
}

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: 'Microsoft YaHei', Arial, sans-serif;
}

/* 顶栏导航 */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 15px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s ease; /* 只过渡背景 */
    backdrop-filter: blur(5px);
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-img {
    width: 67px;
    height: 23px;
    border-radius: 0;
    object-fit: contain;
    border: 0;
    background-color: transparent;
    /* 添加过渡效果，使颜色变化更平滑 */
    transition: filter 0.3s ease;
    /* 默认状态下，图片保持原样 (假设是白色或彩色) */
    filter: none;
}

.logo-img.scrolled {
    /* 你的浅绿色滤镜值 */
    filter: brightness(0) saturate(100%) invert(28%) sepia(22%) saturate(1581%) hue-rotate(136deg) brightness(95%) contrast(89%);
}

/* Logo 文字样式 */
.logo .logo-text {
    font-size: 1.6rem;
    font-weight: bold;
    color: white; /* 默认颜色为白色 */
    letter-spacing: 1px;
    transition: color 0.3s ease; /* 添加颜色过渡效果 */
}

/* 当页面滚动（非首页）时给 navbar 一个 scrolled 状态：改变文字颜色，使其在浅色背景上可见 */
.navbar.scrolled {
    /* 你可以添加一个半透明背景（可选），这里保持你原样，但确保文字颜色改变 */
    background: rgba(255,255,255,0.02); /* 可按需微调 */
}

.navbar.scrolled .nav-link {
    color: var(--accent-teal) !important; /* 浅绿色，手机/PC 在浅色背景上可读 */
}

.navbar.scrolled .hamburger-bar {
    background: var(--accent-teal);
}

.navbar.scrolled { background: rgba(255,255,255,0.85); backdrop-filter: blur(6px); }

.nav-links {
    display: flex;
    gap: 25px;
    position: relative; /* 使 .nav-underline 的绝对定位基于这里 */
    align-items: center;
}
.nav-link.active::after { display: none; }
.nav-link.active { color: var(--accent-teal) !important; }
.nav-link {
    color: white !important;
    text-decoration: none;
    font-weight: 500;
    transition: color 250ms ease;
    font-size: 1.1rem;
    position: relative;
    padding: 5px 0;
}

.nav-underline {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0;
    background: var(--accent-teal);
    border-radius: 2px;
    transform: translateX(0);
    transition: transform 300ms cubic-bezier(.2,.9,.2,1), width 300ms cubic-bezier(.2,.9,.2,1);
    pointer-events: none;
}

/* 汉堡按钮（移动端显示） */
.hamburger {
    display: none; /* 默认桌面隐藏，下面 media query 会显示 */
    width: 42px;
    height: 36px;
    border: 0;
    background: transparent;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}
.hamburger:focus { outline: none; }
.hamburger-bar {
    width: 26px;
    height: 3px;
    background: white;
    border-radius: 3px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* 侧滑菜单（初始隐藏，右侧滑入） */
.side-menu {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 78%;
    max-width: 360px;
    transform: translateX(105%);
    transition: transform 0.28s cubic-bezier(.2,.9,.2,1);
    z-index: 1500;
    background: rgba(255,255,255,0.98);
    box-shadow: -10px 0 30px rgba(0,0,0,0.12);
    display: flex;
    align-items: flex-start;
}
.side-menu.open { transform: translateX(0); }
.side-menu-inner { padding: 80px 20px 24px 20px; width: 100%; }
.side-nav { display:flex; flex-direction:column; gap:16px; }
.side-link {
    color: var(--accent-blue);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
}
.side-link:hover { color: var(--accent-teal); }

/* side-backdrop 默认不拦截事件，只有在 .open 时展示并可交互 */
.side-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 1400;
    opacity: 0;
    transition: opacity 0.28s ease;
    pointer-events: none; /* 不拦截触摸/点击 */
}
.side-backdrop.open {
    display: block;
    opacity: 1;
    pointer-events: auto; /* 打开时允许点击以关闭菜单 */
}

.nav-link:hover {
    color: #26a69a !important;
}

.nav-link.active {
    color: #26a69a !important;
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #26a69a;
}

.scroll-hint {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: #ffffff !important; /* 纯白色 */
    font-size: 0.9rem;
    animation: bounce 3s infinite;
    font-weight: bold;
    z-index: 1;
}

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

/* 替换掉早期的 height:100vh 的 .page 规则，确保移动端高度正确 */
.page {
    min-height: calc(var(--vh, 1vh) * 100);
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 72px; /* 给固定导航留出空间 */
    padding-bottom: 36px;
    z-index: 0; /* 保持默认堆叠顺序 */
}

/* 第一页：封面 */
#page1 {
    background-image: url('./images/background.png');
    background-size: cover;
    background-position: center;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.cover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.8) 45%, rgba(0,0,0,0.4) 70%, transparent);
    z-index: 1;
}

.cover-content {
    position: relative;
    z-index: 2;
    padding: 40px;
    max-width: 70%;
    text-align: left;
    margin-left: 180px;
}

.name {
    font-size: 4rem;
    margin-bottom: 10px;
    color: #c7e5c9;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.subtitle {
    font-size: 1.5rem;
    margin-bottom: 30px;
    color: #3cf6e2;
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
}

.tag {
    background: rgb(52, 151, 217);
    backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.intro {
    font-size: 1.1rem;
    max-width: 600px;
    line-height: 1.8;
    white-space: pre-line;
}

.scroll-container {
    min-height: calc(var(--vh, 1vh) * 100);
    height: 100vh; /* 桌面备用 */
    overflow-y: auto !important;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
    scrollbar-width: none;
    position: relative;
}

.scroll-container::-webkit-scrollbar {
    display: none;
}

/* 其他页面样式保持不变 */
/* 第二页：作品集 */
#page2 {
    background: linear-gradient(135deg, #e0f7fa 0%, #c8e6c9 100%);
    padding: 50px 100px;
    display: flex;
    align-items: center;
}

.portfolio-container {
    display: flex;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    gap: 50px;
    align-items: center;
}

.info-section {
    flex: 1;
    padding-right: 30px;
}

.gallery-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.project-title {
    font-size: 2.5rem;
    color: var(--accent-teal);
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.project-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 4px;
    background: var(--accent-teal);
}

.project-description {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #455a64;
    margin-bottom: 30px;
}

.features {
    list-style-type: none;
}

.features li {
    padding: 10px 0;
    padding-left: 30px;
    position: relative;
    color: #455a64;
}

.features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #27ae60;
    font-weight: bold;
}

.carousel {
    width: 270px;
    height: 580px;
    aspect-ratio: 9 / 16;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.carousel-controls {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.carousel-inner {
    display: flex;
    transition: transform 0.5s ease;
    height: 100%;
}

.carousel-item {
    min-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.carousel-item img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain; /* contain 更稳妥，避免裁剪 */
}

.carousel-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #bdc3c7;
    cursor: pointer;
}

.carousel-indicator.active {
    background: #3498db;
}

/* 第三页：PPT展示 */
#page3 {
    background: linear-gradient(135deg, #e0f7fa 0%, #c8e6c9 100%);
    padding: 50px 100px;
    display: flex;
    align-items: center;
}

/* 第三页 PPT 轮播的指示器（同样处理） */
.carousel-ppt .carousel-controls {
    position: absolute; /* 👈 关键：脱离文档流 */
    bottom: 15px;       /* 距离底部距离 */
    left: 50%;
    transform: translateX(-50%); /* 水平居中 */
    display: flex;
    gap: 8px;
    z-index: 10; /* 确保在图片上方 */
}

/* 第三页：PPT展示轮播图（横版） */
.carousel-ppt {
    width: 480px;       /* 建议宽度，可调 */
    height: 400px;      /* 600:500 = 6:5 → 480:400 = 6:5 */
    aspect-ratio: 6 / 5; /* 严格保持 6:5 比例 */
    border-radius: 16px;
    overflow: hidden;
    position: relative; /* 👈 新增：让子元素能绝对定位 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.carousel-ppt .carousel-item img {
    object-fit: contain; /* 改为 contain：完整显示图片，留白也不裁剪 */
    background-color: #f5f5f5; /* 可选：背景灰，避免纯白突兀 */
}

@media (max-width: 900px) {
    .carousel {
        width: 220px;
        height: 470px;
    }
}

.carousel-inner {
    display: flex;
    transition: transform 0.5s ease;
    height: 100%;
}

.carousel-item {
    min-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.carousel-item img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain; /* contain 更稳妥，避免裁剪 */
}

.carousel-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #bdc3c7;
    cursor: pointer;
}

.carousel-indicator.active {
    background: #3498db;
}

/* 响应式设计 */
@media (max-width: 900px) {
    .portfolio-container {
        flex-direction: column;
        padding: 20px;
    }
    .project-title { font-size: clamp(1.4rem, 5vw, 2.0rem); }
    .project-description { font-size: clamp(0.95rem, 2.8vw, 1.05rem); line-height: 1.6; color: var(--text-dark); }
    .features li { padding-left: 26px; }
    .info-section {
        padding-right: 0;
        margin-bottom: 40px;
    }

    .cover-content {
        margin-left: 20px;
        max-width: 90%;
    }

    .name { font-size: 2.5rem; }
    .subtitle { font-size: 1.2rem; }
    .tags-container { gap: 8px; }
    .tag { padding: 6px 12px; font-size: 0.8rem; }
}
/* 当侧滑打开时用 body 禁止滚动（script.js 设置） */
body.side-menu-open { overflow: hidden; }
/* 第四页：背景 */
#page4 {
    background: linear-gradient(135deg, #e0f7fa 0%, #c8e6c9 100%);
    padding: 50px 100px;
    display: flex;
    align-items: center;
}

/* 第四页：左右对调 */
#page4 .portfolio-container {
    flex-direction: row-reverse;
}

/* 第四页：图片容器 */
.image-placeholder {
    width: 480px;
    height: 400px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
}

.image-placeholder img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain; /* contain 更稳妥，避免裁剪 */
}

/* 第五页：教育背景 */
#page5 {
    background: linear-gradient(135deg, #e0f7fa 0%, #c8e6c9 100%);
    padding: 50px 100px;
    display: flex;
    align-items: center;
}

/* 教育经历项目 */
.education-item {
    margin-bottom: 30px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.education-time {
    font-size: 1.2rem;
    color: #26a69a;
    margin-bottom: 5px;
    font-weight: normal;
}

.education-school {
    font-size: 1.5rem;
    color: #26a69a;
    margin: 10px 0;
    font-weight: bold;
}

.education-degree {
    font-size: 1.1rem;
    color: #455a64;
    margin: 0;
}

/* 课程部分 */
.courses-section {
    margin-top: 30px;
}

.courses-title {
    font-size: 1.3rem;
    color: var(--accent-teal);
    margin-bottom: 15px;
    font-weight: bold;
}

.courses-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.course-tag {
    background: rgba(38, 166, 154, 0.2);
    color: #26a69a;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    border: 1px solid rgba(38, 166, 154, 0.3);
    white-space: nowrap;
}

/* 第六页：技能证书奖项 */
#page6 {
    background: linear-gradient(135deg, #e0f7fa 0%, #c8e6c9 100%);
    padding: 50px 100px;
    display: flex;
    align-items: center;
}

/* 技能分类 */
.skill-category {
    margin-bottom: 25px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.skill-title {
    font-size: 1.3rem;
    color: #3498db; /* 浅蓝色 */
    margin-bottom: 15px;
    font-weight: bold;
    position: relative;
    padding-bottom: 8px;
    /* 去掉下划线 */
}

.skill-list {
    list-style-type: none;
    margin: 0;
    padding-left: 0; /* 与标题对齐 */
}

.skill-item {
    padding: 8px 0;
    padding-left: 20px;
    position: relative;
    color: #455a64;
    line-height: 1.6;
}

.skill-item::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #27ae60;
    font-weight: bold;
    font-size: 1.2rem;
}

/* 右侧奖状容器 */
.certificates-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.certificate-item {
    width: 100%;
    max-width: 400px; /* 从300px增大到400px */
    height: auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    transition: transform 0.3s ease;
}

.certificate-item img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain; /* contain 更稳妥，避免裁剪 */
}

.certificate-item:hover {
    transform: scale(1.05);
}

/* 第七页：联系方式 */
#page7 {
    background: linear-gradient(135deg, #e0f7fa 0%, #c8e6c9 100%);
    padding: 80px 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.contact-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

.contact-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 24px;
    padding: 45px;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    text-align: left;
    transition: all 0.4s ease;
}

.contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.2);
}

.contact-title {
    font-size: 2.2rem;
    color: #26a69a;
    margin-bottom: 30px; /* 修复关键：增加到底部间距 */
    font-weight: 600;
    position: relative;
    display: inline-block;
    text-align: left;
}

.contact-title::after {
    content: '';
    position: absolute;
    bottom: -13px; /* 修复关键：增大下划线位置 */
    left: 2px;
    width: 80px;
    height: 4px;
    background: #3498db;
    border-radius: 2px;
}

.contact-item {
    margin: 25px 0;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.1rem;
    color: #455a64;
    transition: all 0.3s ease;
    text-align: left;
}

.contact-icon {
    font-size: 1.8rem;
    color: #3498db;
    min-width: 35px;
    text-align: left;
}

.contact-info {
    line-height: 1.5;
    text-align: left;
}

.contact-note {
    margin-top: 40px;
    font-size: 1.4rem;
    font-weight: bold;
    color: #26a69a;
    letter-spacing: 0.5px;
    padding: 15px;
    background: rgba(38, 166, 154, 0.1);
    border-radius: 12px;
    border-left: 4px solid #26a69a;
    text-align: center;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 35px;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(38, 166, 154, 0.1);
    color: #26a69a;
    font-size: 1.4rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.social-icon:hover {
    background: #26a69a;
    color: white;
    transform: translateY(-3px);
}

@media (max-width: 480px) {
    .navbar { padding: 10px 12px; }
    .logo .logo-text { display: none; } /* 保存 logo 图标，节省空间 */
    .carousel { width: min(92vw, 340px); height: calc(min(92vw, 340px) * 16 / 9); }
    .project-title { font-size: 1.6rem; }
    .tag { padding: 6px 10px; font-size: 0.78rem; }
    .side-menu { width: 82%; max-width: 320px; }
}

/* ====== 兼容性修复：允许默认页面滚动 + 手机覆盖规则（放在文件末尾覆盖之前规则） ====== */

/* 1) 恢复默认滚动（不要把 body 恒定设为 hidden） */
html, body {
    height: 100%;
    min-height: 100%;
    overflow: auto; /* 允许页面滚动（之前为 hidden，会导致移动端滑动/侧滑异常） */
    -webkit-overflow-scrolling: auto;
}

/* 2) 确保 .scroll-container 在移动端可以平滑触摸滚动 */
.scroll-container {
    -webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
    touch-action: pan-y;               /* 允许竖向手势（避免被某些组件拦截） */
}

/* 3) 强制在更宽的阈值也切换成移动导航（很多手机 DPR 下宽度>900） */
/* 放在末尾并用 !important 以覆盖之前可能冲突的规则 */
@media (max-width: 1024px) {
    /* 隐藏桌面横向 nav，显示汉堡（移动端） */
    .nav-links { display: none !important; }
    .hamburger { display: flex !important; }
    .nav-underline { display: none !important; }

    /* 确保 header 固定并在最上层 */
    .navbar { position: fixed !important; z-index: 2000 !important; }

    /* 侧滑遮罩与侧滑本体始终在顶层 */
    .side-menu { z-index: 2500 !important; transform: translateX(105%); }
    .side-menu.open { transform: translateX(0) !important; }
    .side-backdrop { z-index: 2400 !important; }

    /* 保证在移动端 .portfolio-container 真正是纵向排列并宽一点 */
    .portfolio-container {
        flex-direction: column !important;
        padding: 0 20px !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        align-items: center !important;
    }

    /* info 区居中并添加左右内边距 */
    .info-section {
        padding: 0 18px !important;
        margin-bottom: 16px !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* 限制轮播/卡片最大高度，避免占满整个视口 */
    .carousel, .carousel-ppt, .image-placeholder, .certificate-item {
        width: min(92vw, 520px) !important;
        max-width: 92vw !important;
        height: auto !important;
        max-height: 48vh !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }
    .carousel-item img, .carousel-ppt .carousel-item img, .image-placeholder img, .certificate-item img {
        max-height: 48vh !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
    }

    /* page4 强制纵向（图片上，说明下） */
    #page4 .portfolio-container { flex-direction: column !important; align-items: center !important; }
    #page4 .gallery-section { order: -1 !important; margin-bottom: 12px !important; }
    #page4 .info-section { order: 0 !important; text-align: center !important; }

    /* 页面顶部留白，避免 header 覆盖内容（header 固定） */
    .page { padding-top: 88px !important; }

    /* 当侧滑打开时才禁止 body 滚动（如果脚本设置） */
    body.side-menu-open { overflow: hidden !important; }

    /* 文字和标题微调，防止换行太拥挤 */
    .project-title { font-size: clamp(1.6rem, 6.5vw, 2rem) !important; }
    .project-description, .intro { font-size: clamp(0.95rem, 3.2vw, 1.05rem) !important; line-height: 1.6 !important; }

    /* 确保汉堡图标在视觉上可见（跟随 scrolled 颜色） */
    .hamburger-bar { background: var(--accent-teal) !important; }
}