//* style.css - 完整样式表 */
body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0; padding: 0;
    color: #333; background-color: #f4f4f4; line-height: 1.6;
}
nav {
    background-color: #fff; padding: 1rem 2rem;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid #ddd; position: sticky; top: 0; z-index: 100;
}
.logo { font-weight: bold; font-size: 1.2rem; letter-spacing: 2px; }
.menu { list-style: none; display: flex; gap: 20px; padding: 0; margin: 0; }
.menu a { text-decoration: none; color: #888; font-size: 0.9rem; text-transform: uppercase; }
.menu a:hover, .menu a.active { color: #000; font-weight: bold; }
main { max-width: 900px; margin: 40px auto; padding: 0 20px; min-height: 80vh; }
h1 { font-size: 2.5rem; margin-bottom: 1rem; }
img { max-width: 100%; height: auto; display: block; border-radius: 4px; }

/* 首页样式 */
.featured-project { background: white; padding: 20px; margin-bottom: 30px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }

/* 相册样式 */
.gallery-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 15px;
}
.gallery-grid img { width: 100%; height: 250px; object-fit: cover; transition: transform 0.3s; }
.gallery-grid img:hover { transform: scale(1.02); }

/* 剧本样式 (A4纸效果) */
.script-container {
    background-color: #fff; padding: 60px; max-width: 800px; margin: 0 auto;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
}
.script-title { text-align: center; font-size: 2rem; font-weight: bold; font-family: 'Courier New', monospace; }
.script-meta { text-align: center; color: #666; margin-bottom: 30px; font-family: 'Courier New', monospace; border-bottom: 1px solid #eee; padding-bottom: 20px;}
.section-header { margin-top: 50px; border-left: 4px solid #333; padding-left: 10px; font-size: 1.2rem; font-weight: bold; }
.script-text { font-family: 'Courier New', monospace; font-size: 1rem; white-space: pre-wrap; color: #222; }

/* 手机适配 */
@media (max-width: 600px) {
    nav { flex-direction: column; }
    .menu { margin-top: 15px; }
    .script-container { padding: 20px; }
}
/* --- style.css 新增：图片放大功能的样式 --- */
.lightbox-modal {
    display: none; /* 默认隐藏 */
    position: fixed;
    z-index: 1000; /* 保证在最上层 */
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.9); /* 黑色半透明背景 */
    justify-content: center;
    align-items: center;
    cursor: zoom-out; /* 鼠标变成缩小图标 */
}

.lightbox-modal img {
    max-width: 90%;
    max-height: 90%;
    border: 5px solid white;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    animation: zoomIn 0.3s ease; /* 弹出的动画效果 */
}

/* 简单的放大动画 */
@keyframes zoomIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
/* --- style.css 新增：导航栏下划线生长动画 --- */
.menu a {
    position: relative; /* 这一行很关键，为了定位置 */
    padding-bottom: 5px; /* 给线条留点空隙 */
}

/* 创建那条还没出现的线 */
.menu a::after {
    content: '';
    position: absolute;
    width: 0; /* 一开始宽度是0，看不见 */
    height: 2px; /* 线条厚度 */
    bottom: 0;
    left: 0;
    background-color: #000; /* 线条颜色 */
    transition: width 0.3s ease; /* 动画持续0.3秒 */
}

/* 鼠标悬停时，宽度变100% */
.menu a:hover::after {
    width: 100%;
}
/* --- style.css 新增：页面优雅入场动画 --- */
main {
    animation: fadeInUp 1s ease-out; /* 1秒钟的入场时间 */
}

/* 定义动画的关键帧 */
@keyframes fadeInUp {
    from {
        opacity: 0; /* 开始时完全透明 */
        transform: translateY(30px); /* 开始时位置靠下30像素 */
    }
    to {
        opacity: 1; /* 结束时完全不透明 */
        transform: translateY(0); /* 结束时回到正常位置 */
    }
}
/* --- style.css 新增：卡片悬浮呼吸特效 --- */

/* 1. 给首页的项目卡片加过渡效果 */
.featured-project {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* 使用贝塞尔曲线，动起来像果冻一样Q弹顺滑 */
    cursor: pointer; /* 鼠标放上去变成手指形状 */
}

/* 2. 鼠标悬停时的状态：上浮 + 投影加深 */
.featured-project:hover {
    transform: translateY(-10px); /* 向上飘起 10 像素 */
    box-shadow: 0 15px 30px rgba(0,0,0,0.15); /* 阴影变得更深、更扩散，制造立体感 */
}

/* 3. 给剧本的那张“A4纸”也加一点点立体感 */
.script-container {
    transition: box-shadow 0.3s ease;
}

.script-container:hover {
    box-shadow: 0 10px 40px rgba(0,0,0,0.12); /* 鼠标放上去，纸张好像离桌面更高了 */
}

/* 4. 全局丝滑滚动（锦上添花） */
html {
    scroll-behavior: smooth; /* 点链接跳转时，不是瞬间切过去，而是滑过去 */
}
/* --- style.css 新增：回到顶部按钮 --- */
#myBtn {
  display: none; /* 默认隐藏，滚下来再显示 */
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: #333; /* 黑色背景 */
  color: white; /* 白色箭头 */
  cursor: pointer;
  padding: 15px;
  border-radius: 50%; /* 圆形按钮 */
  font-size: 18px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: background-color 0.3s, transform 0.3s;
}

#myBtn:hover {
  background-color: #555; /* 鼠标放上去变浅黑 */
  transform: translateY(-5px); /* 微微上浮 */
}
/* --- style.css 新增：语言切换按钮样式 --- */
.lang-controls {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
    border-bottom: 2px solid #eee;
    padding-bottom: 20px;
}

.lang-btn {
    padding: 10px 30px;
    border: 2px solid #333; /* 黑框 */
    background: transparent;
    color: #333;
    cursor: pointer;
    font-family: 'Courier New', monospace; /* 配合剧本风格 */
    font-weight: bold;
    font-size: 1rem;
    transition: all 0.3s ease;
}

/* 鼠标放上去，或者被选中时，变黑底白字 */
.lang-btn:hover, .lang-btn.active {
    background-color: #333;
    color: white;
}
/* --- style.css 新增：自定义选中文字颜色 --- */
::selection {
    background: #000; /* 选中的背景变黑色 */
    color: #fff;      /* 选中的文字变白色 */
}

/* 针对火狐浏览器的兼容写法 */
::-moz-selection {
    background: #000;
    color: #fff;
}
/* --- style.css 新增：照片黑白变彩色特效 --- */
.gallery-grid img {
    filter: grayscale(100%); /* 默认是全黑白 */
    transition: transform 0.3s, filter 0.5s ease; /* 变换过程要丝滑 */
}

    /* transform: scale(1.02);  */
}
/* --- 鼠标光环样式 --- */
.cursor-follower {
    position: fixed;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(0,0,0,0.3); /* 淡淡的黑圈 */
    border-radius: 50%;
    pointer-events: none; /* 让鼠标能穿透它点击下面的东西，这句最关键 */
    z-index: 9999;
    transition: transform 0.1s; /* 稍微有点延迟感 */
    transform: translate(-50%, -50%);
    top: 0;
    left: 0;
}
/* --- style.css 新增：极简主义滚动条 --- */
/* 滚动条整体宽度 */
::-webkit-scrollbar {
    width: 8px; /* 变得很细 */
}

/* 滚动条轨道（背景） */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}

/* 滚动条滑块（就是你拖动的那块） */
::-webkit-scrollbar-thumb {
    background: #888; 
    border-radius: 4px; /* 圆角 */
}

/* 鼠标放上去时变黑 */
::-webkit-scrollbar-thumb:hover {
    background: #333; 
}
/* --- style.css 新增：Logo 故障艺术特效 (Cyberpunk Glitch) --- */

/* 定义故障动画的关键帧 */
@keyframes glitch {
    0% {
        text-shadow: 2px 2px 0px #ff0000, -2px -2px 0px #0000ff;
        transform: translate(0);
    }
    20% {
        text-shadow: -2px 2px 0px #ff0000, 2px -2px 0px #0000ff;
        transform: translate(-2px, 2px);
    }
    40% {
        text-shadow: 2px -2px 0px #ff0000, -2px 2px 0px #0000ff;
        transform: translate(2px, -2px);
    }
    60% {
        text-shadow: -2px -2px 0px #ff0000, 2px 2px 0px #0000ff;
        transform: translate(-2px, -2px);
    }
    80% {
        text-shadow: 2px 2px 0px #ff0000, -2px -2px 0px #0000ff;
        transform: translate(2px, 2px);
    }
    100% {
        text-shadow: -2px -2px 0px #ff0000, 2px 2px 0px #0000ff;
        transform: translate(0);
    }
}

/* 鼠标悬停在 Logo 上时触发 */
.logo:hover {
    animation: glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
    color: #000; /* 保持文字主体是黑色 */
    cursor: help; /* 鼠标变成一个问号，增加神秘感 */
}
/* --- style.css 新增：老式显示器扫描线质感 --- */

body::before {
    content: " ";
    display: block;
    position: fixed; /* 固定在屏幕上，不随滚动条走 */
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    
    /* 制作极细的横线纹理 */
    background: linear-gradient(
        to bottom,
        rgba(18, 16, 16, 0) 50%,      /* 透明 */
        rgba(0, 0, 0, 0.05) 50%       /* 极淡的黑色线条 (5%透明度) */
    );
    background-size: 100% 4px; /* 每4像素重复一次 */
    z-index: 9999; /* 盖在所有东西上面 */
    pointer-events: none; /* 让鼠标穿透它，不影响点击 */
}
/* --- style.css 新增：卡片流光高级特效 --- */

/* 1. 确保光线只在卡片内部显示 */
.featured-project {
    position: relative; /* 为了让光线相对于卡片定位 */
    overflow: hidden;   /* 超出卡片的光线要藏起来 */
    /* 之前的样式里已经有这两行了，这里只是强调一下，不用重复写 */
}

/* 2. 画出那道“光” (用伪元素实现) */
.featured-project::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%; /* 一开始光在卡片左边很远的地方 */
    width: 100%;
    height: 100%;
    /* 制作一道倾斜的渐变白光 */
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,    /* 透明 */
        rgba(255, 255, 255, 0.4) 50%, /* 中间是半透明的白光 */
        rgba(255, 255, 255, 0) 100%   /* 透明 */
    );
    transform: skewX(-25deg); /* 把光线倾斜一点，更有动感 */
    pointer-events: none; /* 让鼠标能穿透光线点到卡片 */
    
    /* 应用动画：名叫 shine，持续4秒，无限循环 */
    animation: shine 4s infinite ease-in-out;
}

/* 3. 定义光线怎么动 */
@keyframes shine {
    0% {
        left: -150%; /* 从左边看不见的地方开始 */
    }
    30% {
        left: 150%; /* 快速扫到右边看不见的地方 */
    }
    100% {
        left: 150%; /* 剩下的时间停在右边等待下一次循环 (制造停顿感) */
    }
}
/* --- style.css 新增：Logo 故障艺术特效 (Cyberpunk Glitch) --- */

/* 定义故障动画的关键帧 */
@keyframes glitch {
    0% {
        text-shadow: 2px 2px 0px #ff0000, -2px -2px 0px #0000ff;
        transform: translate(0);
    }
    20% {
        text-shadow: -2px 2px 0px #ff0000, 2px -2px 0px #0000ff;
        transform: translate(-2px, 2px);
    }
    40% {
        text-shadow: 2px -2px 0px #ff0000, -2px 2px 0px #0000ff;
        transform: translate(2px, -2px);
    }
    60% {
        text-shadow: -2px -2px 0px #ff0000, 2px 2px 0px #0000ff;
        transform: translate(-2px, -2px);
    }
    80% {
        text-shadow: 2px 2px 0px #ff0000, -2px -2px 0px #0000ff;
        transform: translate(2px, 2px);
    }
    100% {
        text-shadow: -2px -2px 0px #ff0000, 2px 2px 0px #0000ff;
        transform: translate(0);
    }
}

/* 鼠标悬停在 Logo 上时触发 */
.logo:hover {
    animation: glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
    color: #000; /* 保持文字主体是黑色 */
    cursor: help; /* 鼠标变成一个问号，增加神秘感 */
}
/* --- style.css 新增：流体渐变文字特效 --- */

/* 找到首页和剧本页的大标题 */
h1, .script-title {
    /* 设置一个渐变背景：黑 -> 深红 -> 深蓝 -> 黑 */
    background: linear-gradient(
        45deg,
        #333333,
        #800000, /* 暗红 */
        #000033, /* 暗蓝 */
        #333333
    );
    /* 把背景放大，这样才能动起来 */
    background-size: 300% 300%;
    
    /* 关键魔法：把背景“剪裁”进文字里，只在字里显示颜色 */
    -webkit-background-clip: text;
    background-clip: text;
    
    /* 把文字本身变透明，透出背景色 */
    color: transparent;
    
    /* 让背景动起来 */
    animation: liquidText 6s ease infinite;
}

/* 定义流体动画 */
@keyframes liquidText {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
/* --- style.css 新增：照片灵异干扰故障特效 --- */

/* 定义疯狂抖动的动画 */
@keyframes photo-glitch {
    0% {
        transform: translate(0);
        filter: drop-shadow(0 0 0 #000) grayscale(0%);
    }
    20% {
        transform: translate(-3px, 3px); /* 稍微移位 */
        filter: drop-shadow(3px -3px 0px red) drop-shadow(-3px 3px 0px blue) grayscale(0%); /* 红蓝重影 */
    }
    40% {
        transform: translate(3px, -3px);
        filter: drop-shadow(-3px 3px 0px red) drop-shadow(3px -3px 0px blue) grayscale(0%);
    }
    60% {
        transform: translate(-3px, -3px);
        filter: drop-shadow(3px 3px 0px red) drop-shadow(-3px -3px 0px blue) grayscale(0%);
    }
    80% {
        transform: translate(3px, 3px);
        filter: drop-shadow(-3px -3px 0px red) drop-shadow(3px 3px 0px blue) grayscale(0%);
    }
    100% {
        transform: translate(0);
        filter: drop-shadow(0 0 0 #000) grayscale(0%);
    }
}

/* 鼠标放上去时触发 */
.gallery-grid img:hover {
    /* 0.3秒的快速抖动，无限循环 */
    animation: photo-glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" style="font-size:20px"><text y="15">⚡️</text></svg>'), auto; /* 鼠标变成闪电 */
}
/* --- style.css 新增：标题扩张动画 --- */
h1, .script-title {
    transition: letter-spacing 0.5s ease;
}

h1:hover, .script-title:hover {
    letter-spacing: 5px;
    cursor: default;
}

/* --- style.css 新增：电影感暗角 (Vignette) --- */
body::after {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    box-shadow: inset 0 0 150px rgba(0,0,0,0.8); 
    pointer-events: none;
    z-index: 9000;
    mix-blend-mode: multiply;
}