/* #region 基础配置  */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    /* 去掉 height: 100%，让 html 跟随内容自由延展 */
    min-height: 100%; 
}
body {
    background-color: #000000; 

    /* ✨ 核心修改：利用 Flex 布局的自适应能力 */
    display: flex;
    flex-direction: column; 
    
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    position: relative;
}/* #endregion */


/* #region 导航栏  */
.global-nav {
    position: fixed;
    top: 0;
    left:0px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    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);
}
    /* 导航栏 LOGO 样式及多语言微调 */
    .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 静帧画廊全局 */
/* ==========================================================================
   静帧画廊全局容器与间距配置
========================================================================== */
.gallery-main {
  width: 100%;
  max-width: 6000px; /* 控制在超大屏下的最极限展示宽度 */
  margin: 100px auto 120px auto; /* 为顶部固定导航和底页脚留足呼吸空间 */
  padding: 0 40px; /* 左右屏幕边距 */
  box-sizing: border-box;
}

/* 画廊标题（极简主义） */
.gallery-header {
  margin-bottom: 40px;
}
.gallery-title {
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
}
/* #endregion */


/* #region 画廊布局 */
/* ==========================================================================
   核心自适应等高流画廊布局 (Justified Flex Layout)
========================================================================== */

.gallery-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.justified-gallery {
    display: block;
    transform-origin: top left;
    will-change: transform;
}

.justified-gallery .gallery-row {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    gap: 4px;
    margin-bottom: 4px;
}

.justified-gallery .gallery-row:last-child {
    margin-bottom: 0;
}
.gallery-main {
  width: 100%;
  max-width: 5000px; /* 控制在超大屏下的最极限展示宽度 */
  margin: 100px auto 40px auto; /* 为顶部固定导航和底页脚留足呼吸空间 */
  padding: 0 90px; /* 左右屏幕边距 */
  box-sizing: border-box;
}

/* 画廊标题（极简主义） */
.gallery-header {
  margin-bottom: 40px;
}
.gallery-title {
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
}



/* 画廊每一张照片的自适应弹性盒子 */


.gallery-item {
    position: relative;
    flex: 0 0 auto;
      /* 核心魔法：根据 HTML 中给定的 --aspect-ratio 自动计算宽度，并允许按比例放大缩放 */
  flex-grow: calc(var(--aspect-ratio, 1) * 100);
  flex-shrink: 1;
    overflow: hidden;
    border-radius: 0px;
    background-color: #1a1a1c; /* 图片还没完全加载出来前的深灰色占位背景 */
    border-radius:1px; /* 微小倒角，维持工业级质感 */
    cursor: zoom-in;
}

/* 静帧滚动进入动画：只改变视觉状态，不参与画廊尺寸计算 */
.justified-gallery.gallery-reveal-ready .gallery-item {
    opacity: 0;
    transform: translateY(28px) scale(0.985);
    filter: blur(2px);
    transition:
        opacity 800ms ease,
        transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 800ms ease;
    will-change: opacity, transform, filter;
}

.justified-gallery.gallery-reveal-ready .gallery-item.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
    .justified-gallery.gallery-reveal-ready .gallery-item {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}

.gallery-item.image-error {
    display: none;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保证即使随着窗口尺寸被弹性拉伸，图片也绝对不变形、等比例充满盒子 */
  display: block;
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), filter 0.4s ease;
}



/* ==========================================================================
   鼠标悬停高级电影感互动效果 (Hover Effects)
========================================================================== */
/* 悬停时照片微微放大 1.05 倍，尽显精致 */
.gallery-item:hover img {
  transform: scale(1.05);
  filter: contrast(105%) brightness(85%);
}

/* 黑色渐变暗化遮罩，用于显示图片说明或年份 */
.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 50%);
  display: flex;
  align-items: flex-end;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none; /* 防止遮罩挡住点击事件 */
}

.gallery-item:hover .image-overlay {
  opacity: 1;
}

.img-caption {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  color: #ffffff;
  text-transform: uppercase;
}
/* ===============================*/
/* #endregion 画廊布局 */

/* #region 画廊鼠标悬停 */
/* ==========================================================================
   鼠标悬停高级电影感互动效果 (Hover Effects)
========================================================================== */
/* 悬停时照片微微放大 1.05 倍，尽显精致 */
.gallery-item:hover img {
  transform: scale(1.05);
  filter: contrast(105%) brightness(85%);
}

/* 黑色渐变暗化遮罩，用于显示图片说明或年份 */
.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 50%);
  display: flex;
  align-items: flex-end;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none; /* 防止遮罩挡住点击事件 */
}

.gallery-item:hover .image-overlay {
  opacity: 1;
}

.img-caption {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  color: #ffffff;
  text-transform: uppercase;
}
/* #endregion */


/* #region 全屏放大灯箱 */
/* ==========================================================================
   全屏放大灯箱核心样式 (Cinematic Lightbox)
========================================================================== */
.lightbox-modal {
  display: none; /* 默认隐藏 */
  position: fixed;
  z-index: 99999; /* 必须极高，盖住全站导航栏、页脚和胶片噪点 */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(10, 10, 12, 0.723);
  backdrop-filter: blur(15px); /* 背景高级毛玻璃虚化 */
  -webkit-backdrop-filter: blur(25px);
  opacity: 0;
  transition: opacity 0.4s ease;
  cursor: zoom-out; /* 鼠标变成缩小图标，提示点击任意空白处可关闭 */
}

/* 触发激活态 */
.lightbox-modal.show {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 1;
}

/* 放大后的中心画面实体 */
.modal-content {
  max-width: 88vw; /* 最大宽度为屏幕的 88%，四周留足黑色呼吸感 */
  max-height: 78vh; /* 最大高度限制，确保绝不遮挡底部文字 */
  object-fit: contain;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85); /* 深邃电影投影 */
  border-radius: 2px;
  transform: scale(0.92); /* 初始微小状态 */
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1); /* 丝滑推镜头缩放 */
  cursor: default;
}

/* 打开状态下画面恢复 100% 比例 */
.lightbox-modal.show .modal-content {
  transform: scale(1);
}





/*左右按键*/
.lightbox-nav {
    appearance: none;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-family: inherit;
    cursor: pointer;
    transition:
        color 0.25s ease,
        transform 0.25s ease,
        background 0.25s ease;
            position: absolute;

    z-index: 3;
    width: 50px;
    height: 36px;
    border-radius: 10px;
    font-size: 20px;
    line-height: 1;
    transform: translateY(-50%);
}


.lightbox-nav:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    position: fixed;
}

.lightbox-prev {
    left: 6px;
}

.lightbox-next {
    right: 6px;
}


/* 右上角关闭按钮 (✕) */
.close-btn {
  position: absolute;
  top: 30px;
  right: 45px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 36px;
  font-weight: 200;
  transition: color 0.3s ease, transform 0.3s ease;
  cursor: pointer;
  z-index: 2;
}

.close-btn:hover {
  color: #ffffff;
  transform: scale(1.1);
}




/* 底部电影片名标题说明 */
.modal-caption {
  margin-top: 20px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 4px;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
}
/* 移动端适配 */

/* #endregion */

/* #region footer */    
.resume-footer {
    position: relative;
    left: 50px;
    right: 40px;
    bottom: auto;
    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: 30px;
    }

    .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 {
    width: 11px;
    height: 11px;
    margin-right: 8px;
    }

    .footer-left-content .f-name {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.4);
    display: inline-block;
}
/* #endregion */

/* #region 移动端 */
/* ==========================================================================
   移动端与平板完美响应式优化 (Media Queries)
========================================================================== */
@media (max-width: 1024px) {
  .gallery-main {
    padding: 0 20px;
    margin: 90px auto 100px auto;
  }
  .justified-gallery {
    display: block;
  }
  .justified-gallery .gallery-row {
    gap: 2px;
    margin-bottom: 2px;
  }
  /* 平板端降低行高基数，让一屏可以展示更多内容 */
  .gallery-item {
    height: 220px;
    flex-basis: calc(100px * var(--aspect-ratio, 1));
  }
}

@media (max-width: 768px) {
  .gallery-main {
    padding: 0 25px;
    margin: 80px auto 80px auto;
  }
  .justified-gallery {
    display: block;
  }
  .justified-gallery .gallery-row {
    gap: 2px;
    margin-bottom: 2px;
  }
  .modal-content {
    max-width: 90vw;
    max-height: 100vh;
  }

  

    .close-btn {
    top: 15px;
    right: 20px;
    font-size: 28px;
    }
    .close-btn {
        top: 12px;
        right: 12px;
        font-size: 30px;
    }
    .lightbox-nav {
        width: 10px;
        height: 50px;
        font-size: 12px;
        background: rgba(0, 0, 0, 0.2);
    }
    .lightbox-prev {
        left: 4px;
    }
    .lightbox-next {
        right: 4px;
    }



    
  /* 手机端将行高缩减至 160px~180px，保证左右至少能平齐并排两张图，或者自动单张充满 */



  .gallery-item {
    height: 180px;
    flex-basis: calc(100px * var(--aspect-ratio, 1));
  }
  .gallery-title {
    font-size: 16px;
  }
  /* #region 邮箱版权尾标 */
  /*  邮箱版权尾标 */
  .resume-footer {
            position: relative;
            left: 9px;
            right: 4px;
            bottom: auto;
            height: auto;
        }
     /*手机端由于屏幕窄，允许它们变成上下两行，且依然靠左*/
     .footer-left-content { 
        flex-direction: column !important; 
        align-items: flex-start !important; 
        gap: 8px !important; 
        white-space: normal !important; 
        }
        .footer-email-link { 
            font-size: 11px; 
        }
        .footer-left-content .f-name { 
        font-size: 9px; 
        letter-spacing: 1px; 
    }
  /* #endregion 邮箱版权尾标 */

  /* #region 导航logo */
       /*导航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;  }
            /* #endregion 导航logo */



}



/* #endregion */