/* #region 全局电影感基础配置  */
/*!!!! 基础重置 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0px;
}

/*整体页面*/
html {
    /* 去掉 height: 100%，让 html 跟随内容自由延展 */
    min-height: 100vh; 
}
body {
    height: 100%;/*整体页面*/
    background-color: #121214;
    color: #ffffffd7;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    
    min-height: 100vh;

    /* ✨ 核心修改：利用 Flex 布局的自适应能力 */
    display: flex;
    flex-direction: column; 

    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    position: relative;


    /* 核心：将大图作为整个网站的固定背景 */
    background-image: url('https://cdn.liuxinzhu.info/images/Resume1.jpg'); /* 替换为你的大图路径 */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* 关键：向下滚动时背景图纹丝不动 */
}


/* #endregion */

/* ======================================================================================= */
/* #region 语言切换核心逻辑样式  */
/* 语言切换核心逻辑样式 */

    /* 块级/段落元素控制 */
    .lang-zh { display: block; }
    .lang-en { display: none; }   
    body.en-mode .lang-zh { display: none !important; }   
    body.en-mode .lang-en { display: block; }   

    /* 行内元素控制 */
    span.lang-zh { display: inline; }
    span.lang-en { display: none; }
    body.en-mode span.lang-zh { display: none !important; }
    body.en-mode span.lang-en { display: inline; 
}


    
/*中英文按钮样式-电脑端*/
    .lang-toggle {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    padding: 4px 10px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    cursor: pointer;
    /*按钮多圆*/
    border-radius:900px;
    transition: all 0.3s ease;
    margin-left: 15px;
    vertical-align: middle;
    }
    .lang-toggle:hover {
    background: #fff;
    color: #000;
    border-color: #fff;

}
/* #endregion */

/* ======================================================================================= */
/* #region 电脑端-导航栏 */
/* 电脑端-导航栏 */
    .global-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 80px;
        z-index: 100;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.205) 0%, rgba(0, 0, 0, 0.198) 100%);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }

    .nav-logo a {
        color: #ffffff;
        text-decoration: none;
        font-size: 16px;
        font-weight: 700;
    }
    :lang(zh-CN).nav-logo a {
        letter-spacing: 1px;
    }
    :lang(en).nav-logo a {
        color: #ffffff;
        text-decoration: none;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 2px;
}
    /* 电脑端-导航栏-文字&装饰 */
        /* 导航栏靠右用*/
        .nav-links{ 
        margin-left: auto;
        }
        .nav-links a {
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
        font-size: 15px;
        font-weight: 400;
        letter-spacing: 1px;
        margin-left: 30px;
        transition: color 0.3s ease;
        }
        .nav-links a:hover, 
        .nav-links a.active {
        color: #ffffff;
    }

        /*电脑端-语言切换按钮-样式*/
        .lang-toggle {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.4);
        color: #fff;
        padding: 4px 10px;
        font-family: 'Inter', sans-serif;
        font-size: 12px;
        letter-spacing: 1px;
        cursor: pointer;
        /*按钮多圆*/
        border-radius:900px;
        transition: all 0.3s ease;
        margin-left: 15px;
        vertical-align: middle;
        }
        .lang-toggle:hover {
            background: #fff;
            color: #000;
            border-color: #fff;
}
/* #endregion */

/* ======================================================================================= */
/* #region 【右侧悬浮简历画板】 */
/* 建立一个右对齐的包装器 */
    .resume-wrapper {
    display: flex;
    justify-content: flex-end; /* 让简历面板靠右靠齐 */
    width: 100%;
    min-height: 100vh;
    }

    /*（在这里控制灰黑底色和透明度）*/
    .resume-right-panel {
    width: 55%; /* 桌面端占据右侧 55% 的宽度，左侧 45% 完整留白露图 */
    min-height: 100vh;
    
    /* 💡 调透明度看这里：
    rgba(20, 20, 22, 0.9) 中，前三个数是接近黑色的深炭灰，
    最后一个数字 0.9 就是不透明度。
    如果你想让它更透明、更隐约看到背景，可以把它改成 0.8 或 0.75 */
    background: rgba(18, 18, 20, 0.453); 
    
    /* 高级细节：毛玻璃模糊滤镜，配合透明底色能让背后透过来的剧照带有一种高级神秘感 */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(17px);
    
    /* 左侧加上一条极其微弱的亮边拉开空间层次 */
    border-left: 1px solid rgba(255, 255, 255, 0.073);
    display: flex;
    flex-direction: column;
}
/* #endregion */

/* ======================================================================================= */
/* #region 内部精细排版 */
/* --------------------------------------------------------------------------
内部精细排版样式
-------------------------------------------------------------------------- */
    /*简历/作品集内容区*/
    .resume-main-content {
    padding: 80px 50px 80px 50px;
    }

    /* 简历头部 */
    .resume-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        }

        .resume-header h1 {
        font-size: 30px;
        font-weight: 500;
        letter-spacing: 1.5px;
        margin-bottom: 5px;
        color: rgba(255, 255, 255, 0.723);
        }

        .resume-header .en-name {
        font-size: 19px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.4);
        margin-left: 6px;
        }

        .resume-header .titles {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.5);
        letter-spacing: 2px;
        margin-bottom: 20px;
        }

        .resume-header .education p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 5px;
    font-weight: 300;
        }

        .resume-header .education strong {
        font-weight: 600;
        color: #fff1f1;
    }



    /*图标 ICON*/
        .imdb-icon {
        width: 40px;  /* 调整宽度，你可以把 20px 改成你想要的大小 */
        height: auto; /* 高度自动按比例缩放，防止图片变形 */
        vertical-align: middle; /* 让图标和后面的文本“IMDb ➔”在垂直方向上居中对齐 */
        margin-right: 5px;      /* 图标和右边文字之间留一点点间距 */
        }
    
        .v-icon {
        width: 25px;  /* 调整宽度，你可以把 20px 改成你想要的大小 */
        height: auto; /* 高度自动按比例缩放，防止图片变形 */
        vertical-align: middle; /* 让图标和后面的文本“IMDb ➔”在垂直方向上居中对齐 */
        margin-right: 5px;      /* 图标和右边文字之间留一点点间距 */
        }

        /*图标效果*/
        .resume-link:hover .imdb-icon{
        transform: scale(1.08);
        filter:
        drop-shadow(0 0 6px #a754fb)
        drop-shadow(0 0 14px #8000ff)
        drop-shadow(0 0 22px rgb(41, 35, 22));
        }
        .resume-link:hover .v-icon{
        transform: scale(1.08);
        filter:
        drop-shadow(0 0 6px #1ab7ea)
        drop-shadow(0 0 14px #1ab7ea)
        drop-shadow(0 0 22px rgba(26,183,234,.55));
        }
    
        /*未用的文字的图标设置*/
        .resume-link {
        color: #ffffff;
        text-decoration: none;
        font-size: 12px;
         margin-left: 20px;
        border-bottom: 0px solid rgba(255, 255, 255, 0.2);
        padding-bottom: 2px;
        transition: border-color 0.3s; 
        }
        .resume-link:hover {
        border-bottom-color: #ffffff;
    

    }

    /* 电脑端-内容分栏-排版 */
        /* 上下分栏细线-排版 */
            .resume-divider {
            border: none;
            border-top: 2px solid rgba(255, 255, 255, 0.06);
            margin: 40px 0px;
        }

        /* 侧边-文字设置*/
            .resume-section .section-title h2 {
            font-size: 15px;
            font-weight: 700;
            letter-spacing: 2px;
            }   

            .resume-section .section-title .sc-title {
            font-size: 12.5px;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.35);
            display: block;
            margin-top: 2px;
            }

            .resume-section .experience-content {
            width: 75%;
        }  
        
        
        /* work到内容-左右分栏排版 */
            .resume-section {
            display: flex;
            gap: 0px;
            }

            .resume-section .section-title {
            width: 25%;
            flex-shrink: 0; 
        }   

        /* Skill-文字设置*/
            .skill-block {
            margin-bottom: 30px;
            }

            .skill-block h3 {
            font-size: 13.5px;
            font-weight: 500;
            margin-bottom: 10px;
            color: rgba(255, 255, 255, 0.9);
            }   

            .highlight-text {
            font-size: 13px;
            color: rgba(255, 255, 255, 0.45);
            margin-bottom: 15px;
            font-weight: 300;
            }   

            .software-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 10px;
            list-style: none;
            }

            .software-list li {
            font-size: 13px;
            color: rgba(255, 255, 255, 0.75);
            }
            
            /*熟悉器材-文字设置*/
            .camera-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            }

            .camera-grid h4 {
            font-size: 11.5px;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.35);
            margin-bottom: 6px;
            text-transform: uppercase;
            }

            .camera-grid ul { list-style: none; }

            .camera-grid ul li {
            font-size: 12.5px;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 4px;
        }
 

        /* 节展入围-文字设置 */
            .awards-list { list-style: none; }

            .awards-list li {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding: 14px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.03);
            font-size: 13.5px;
            font-weight: 600;
            }

            .awards-list li:first-child { padding-top: 0; }
            .award-name { color: rgba(255, 183, 183, 0.85); }
            .award-name small {
            display: block;
            font-size: 11.5px;
            color: rgba(255, 255, 255, 0.4);
            margin-top: 3px;
            }

            .award-project { font-weight: 700; text-align: right; color: rgba(244, 244, 244, 0.85);
            font-style: italic; font-size: 13px; 
        }




        /* 作品经历表格-文字设置 */
            /*影视作品经历*/
            .year-group {
            display: flex;
            margin-bottom: 30px;
            }

            .year-group:last-child { margin-bottom: 0; }
            .year-label {
            width: 60px;
            font-size: 14px;
            font-weight: 700;
            padding-top: 6px;
            }

            /*舞台美术经历*/
            .project-table { width: 100%; }
            .table-row {
            display: flex;
            justify-content: space-between;
            padding: 11px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.03);
            font-size: 13px;
            align-items:center;
            }

            .table-row:hover { background-color: rgba(255, 255, 255, 0.02); }
            .p-name { width: 50%; color: #fff; font-style: italic; }
            .p-type { width: 25%; color: rgba(255, 255, 255, 0.4); }
            .p-role { width: 25%; text-align: right; color: rgba(255, 255, 255, 0.8); }

            .project-table.no-year .p-name { width: 75%; }
            .project-table.no-year .p-role { width: 25%; 
}
/* #endregion */

/* ======================================================================================= */
/* #region 底部页脚样式 */
/* --------------------------------------------------------------------------
底部页脚样式
-------------------------------------------------------------------------- */
    .resume-footer {
        position: absolute;
        left: 10px;
        right: 50px;
        bottom: 10px;
        height: auto;
        }

        .footer-line {
        width: 100%;
        height: 1px;
        background: linear-gradient(to right, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.01) 100%);
        margin-bottom: 12px; /* 拉开分割线和文字的垂直距离 */
        }

        .footer-flex-container {
        width: 100%;
    }

    /* 核心：强制内部所有元素不换行、垂直居中对齐 */
    .footer-left-content {
    display: flex;
    flex-direction: row;       /* 确保必须是横向并排 */
    align-items: center;       /* 确保邮箱和右侧版权绝对水平对齐 */
    justify-content: flex-start; /* 统统靠左对齐 */
    gap: 25px;                 /* 邮箱和版权信息中间的间距 */
    white-space: nowrap;       /* 强制文本绝对不换行，防止挤压重叠 */
    }

    /* 邮箱链接样式 */
    .footer-email-link {
        font-size: 13.5px;
        color: #fefefeb3;
        text-decoration: none;
        border-bottom: 1px solid transparent;
        transition: border-color 0.3s;
        display: inline-flex;
        align-items: center;
        }

        .footer-email-link:hover {
        border-bottom-color: rgba(255,255,255,0.6);
        }
        
        /* 邮箱小图标 */
        .email-icon {
        color: #ffffff;
        width: 11px;
        height: 11px;
        margin-right: 8px;
        vertical-align: middle;
    }

    /* 版权文字样式（彻底清除了干扰对齐的 display:flex 和 margin） */
    .footer-left-content .f-name {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.4);
    display: inline-block;
    }


    /* 微噪点滤镜 */
    .film-grain {
    position: fixed;
    top:0; left:0; width:100%; height:100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.02;
    pointer-events: none;
    z-index: 999;
}
/* #endregion */

/* ======================================================================================= */
/* #region 手机端  */
/* --------------------------------------------------------------------------
手机端完美自适应（在小屏上，画板全屏覆盖以保证文字清晰易读）
-------------------------------------------------------------------------- */
    /*iPad端-1024*/
    @media (max-width: 1024px) {
        .resume-right-panel {
            width: 100%; /* 平板和手机端自动变成 100% 满屏，背景图在底下衬托 */
            background: rgba(18, 18, 20, 0.96); /* 稍微调高不透明度，确保手机在户外阳光下能看清字 */
        }
        /*导航文字*/
        
       
       
       

    }  

    /*iPhone端-768*/
    @media (max-width: 768px) {
        html,body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;

        }
        .resume-right-panel {
            width: 100%; /* 平板和手机端自动变成 100% 满屏，背景图在底下衬托 */
            background: rgba(18, 18, 20, 0.96); /* 稍微调高不透明度，确保手机在户外阳光下能看清字 */
        }
     /*导航整体*/
        .global-nav {
            padding: 10px 10px 10px 6px; 
            flex-wrap: wrap; /* 如果极个别超小屏手机太窄，允许微调，但不消失 */
            justify-content: space-between;
            align-items: center; /* 保证导航栏内容在竖屏下仍然靠下对齐 */
        } 
        
        
       /*导航logo*/
            .nav-logo a {
                display: flex;
                align-items: center;
                justify-content: center;
            }   
            :lang(zh-CN) .nav-logo a { font-size: 8px; letter-spacing: 1px; margin-left: 0px; }
            :lang(en) .nav-logo a { font-size: 8px; letter-spacing: 1px; margin-left: 0px;  }
        
        
        /*导航文字*/
        .nav-links { 
        display: flex !important; /* 强制保持原导航显示状态 */
        flex-wrap: wrap; 
        align-items: center;
        text-align: justify;
        }
        :lang(zh-CN) .nav-links a {
        font-size: 13px; 
        margin-left: 16px;
        }
        :lang(en) .nav-links a {
        font-size: 12px; 
        margin-left: 8px;   
        }
       
        /* 语言切换按钮设置 */
        :lang(zh-CN) .lang-toggle{
            margin-left: 10px; /* 减少左边距，腾出更多空间 */
            padding: 3px 10px; /* 按钮稍微变精简一点 */
            font-size: 10px;
        }
        :lang(en) .lang-toggle{
            margin-left: 10px; /* 减少左边距，腾出更多空间 */
            padding: 3px 8px; /* 按钮稍微变精简一点 */
            font-size: 9px;

        }

    
        /*  邮箱版权尾标 */
            /*手机端由于屏幕窄，允许它们变成上下两行，且依然靠左*/
            .footer-left-content { 
            flex-direction: column !important; 
            align-items: flex-start !important; 
            gap: 0px !important; 
            white-space: normal !important; 
            }
            .footer-email-link { font-size: 11px; }
            .footer-left-content .f-name { font-size: 9px; letter-spacing: 1px; 
        }

        /*  内容文字设置 / 手机端由于屏幕窄*/
        .body { padding: 100px 100px 100px 100px; }
        .resume-main-content { padding: 100px 20px 60px 20px; }
        .resume-header { flex-direction: column; gap: 8px; }
        .resume-section {  flex-direction: column; gap: 30px; }
        .resume-section .section-title, .resume-section .skills-content, .resume-section .experience-content { width: 100%; }
        .software-list { grid-template-columns: 1fr 1fr; }
        .camera-grid { grid-template-columns: 1fr; }
        .awards-list li { flex-direction: column; gap: 5px; }
        .award-project { text-align: left; font-size: 12px; color: rgba(255,255,255,0.6); }
        .year-group { flex-direction: column; gap: 5px; }
        .table-row { flex-direction: column; align-items: flex-start; gap: 0px; }
        .p-name, .p-type, .p-role { width: 120%; text-align: left; }
    }
    /* #endregion */