/* ------------------- 全局重置 ------------------- */
:root {
  --nav-scale: 1;
  --page-gap: 40px;                 /* 全站统一左右页边距 */
}
html { font-size: clamp(18px, 1vw + 0.6vh, 18px); }

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ------------------- slogan 位置 ------------------- */
/* slogan */
.slogan{
  position:absolute; top:24px; left:32px;
  font-size:16px; color:#000000; z-index:200; cursor:default;
  font-weight: 800;      /* ← 只加这一行，更粗一号 */
}

/* ------------------- 菜单按钮（三圆） ------------------- */
/* ───────── 按钮组件本身 ───────── */
.menu-button{
  position:absolute; top:24px; right:36px;
  /* 让按钮自己占 48 × 20 px 的盒子，动画不会撑开父级 */
  width:48px; height:20px;
  display:flex; justify-content:space-between; align-items:center;
  cursor:pointer; z-index:200;
  /* 间距动画：采用自定义“张力弹性”曲线 */
  transition: gap 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  align-items: center;
  justify-content: center;
  gap: 5px
}

/* 三个圆点 */
.menu-button .dot{
  flex:0 0 15px;
  width:15px; height:15px;
  background:#000000; border-radius:50%;
  /* 变形（合并/散开）动画：同样使用平滑弹性缓动 */
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    opacity   0.3s ease;
}

/* ── 打开状态：三圆合一 ───────────────────────────── */
.menu-button.opened{ gap:0; }             /* 取消间距 */

.menu-button.opened .dot:first-child {
  transform: translateX(10px) scale(0.8);
}

.menu-button.opened .dot:last-child {
  transform: translateX(-10px) scale(0.8);
}

.menu-button.opened .dot:nth-child(2) {
  transform: scale(1.6);
  z-index: 1;
}

/* ------------------- 导航覆盖层 ------------------- */
/* 导航容器：始终可见，但默认不捕获事件 */
.nav{
  position: fixed;
  inset: 0;
  pointer-events: none;      /* 关闭时不拦截点击 */
  z-index: 100;
}

/* 打开导航后允许点击 */
.nav.show{ pointer-events: all; }

/* 导航遮罩层（模糊渐入+渐出） */
.nav-overlay {
  position: absolute;
  inset: 0;
  background: rgba(245, 245, 245, 0.75); /* 更轻盈的玻璃感 */
  opacity: 0;

  /* 初始模糊 + 亮度增强 */
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  filter: brightness(1.2) contrast(1.05);
  transform: scale(1.01);

  transition:
    backdrop-filter 0.3s ease-in-out,
    -webkit-backdrop-filter 0.3s ease-in-out,
    filter 0.3s ease-in-out,
    transform 0.3s ease-in-out,
    opacity 0.3s ease-in-out;
}
.nav.show .nav-overlay {
  opacity: 1;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  filter: brightness(1) contrast(1);
  transform: scale(1);
}

/* ───────────────── 顶部 72px 磨砂玻璃条 ───────────────── */
.glass-bar{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 72px;                          /* 高度 72px */
  background: rgba(255, 255, 255, 0.35); /* 白磨砂，可按需改透明度 */
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  pointer-events: none;
  z-index: 150;                          /* 高于 nav-items，低于 slogan/Button */
  opacity: 1;                            /* 默认完全可见 */
  transition: opacity 0.1s ease;
}

/* ---- 导航展开时，使顶部 72px 玻璃条完全透明 ---- */
.nav.show .glass-bar{
  opacity: 0;
}


/* ------------------- 十字形导航容器 ------------------- */
/* 横屏导航项采用 grid，精确控制两行三列（上3下2），防止过早换行 */
.nav-items {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%) scale(var(--nav-scale, 1));
  width: max-content;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: auto;
  place-items: center;
  gap: clamp(20px, 4vw, 60px) clamp(32px, 5vw, 80px);
  padding: 5vh 5vw;
  transition: transform 0.3s ease;
}

.nav-items .nav-item:nth-child(1) { grid-column: 1 / span 2; }
.nav-items .nav-item:nth-child(2) { grid-column: 3 / span 2; }
.nav-items .nav-item:nth-child(3) { grid-column: 5 / span 2; }
.nav-items .nav-item:nth-child(4) { grid-column: 2 / span 2; }
.nav-items .nav-item:nth-child(5) { grid-column: 4 / span 2; }

/* 十字布局打开时整体放大 1.5 倍 */
.nav.show:not(.vertical) .nav-items {
  transform: translate(-50%, -50%) scale(var(--nav-scale, 1));
}

/* 竖排布局打开时整体放大 1.2 倍 */
.nav.show.vertical .nav-items {
  transform: translate(-50%, -50%) scale(var(--nav-scale, 1));
}

/* ------------------- 单个导航项 ------------------- */
/* 单个导航项规则 */
.nav-item{
  font-size: clamp(16px, 7vw, 72px); color:#999; cursor:pointer; opacity:0;
  text-align:center;
  transition: color .3s ease;
  display:inline-flex;          /* 让宽度固定由自身控制 */
  justify-content:center;       /* 内部英文 / 中文居中 */
  width:8.5rem;                 /* 固定宽度≈152px，按最大中文宽度设置 */
  height:1.2em;            /* 固定高度≈字体行高，防止切换时纵向抖动 */
  position:relative;       /* 作为绝对叠放基准，不影响布局 */
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-item .en,
.nav-item .zh {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  flex-direction: column;
  font-weight: 800;
  line-height: 1.2;
  white-space: normal;
  text-align: center;
}

.nav-item:hover{ color:#000; }
/* ---------- 中英文切换（不改排版、不抖动） ---------- */
.nav-item .zh{
  visibility:hidden;                                    /* 默认隐藏中文，占位不变 */
  font-family:"PingFang HK","PingFang TC","PingFang",sans-serif; /* 苹方‑港 */
  font-weight:900;                                      /* 最粗体 */
  font-size: clamp(14px, 6.5vw, 54px);                 /* 中文稍小 */
  letter-spacing:.12em;                                 /* 拉开字距 */
}
.nav-item:hover .en{ visibility:hidden; }               /* 悬停时隐藏英文 */
.nav-item:hover .zh{ visibility:visible; }              /* 悬停时显示中文 */


/* ------------------- 竖排导航（由 JS 添加 .vertical） ------------------- */
/* 竖排布局 + 滑动位移（由 JS 控制） */
.nav-items.vertical {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(var(--nav-scale, 1));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 4vh, 48px);
  max-width: 92vw;
  max-height: 92vh;
  padding: 4vh 4vw;
}


/* ---------- 导航文字滑入动画（横竖通用） ---------- */
@keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


/* 严格按序绑定，确保初始位移与透明度生效 */
/* 加速 1.5× 并凑整：时长和启动间隔 */
.nav.show .nav-items .nav-item:nth-child(1){ animation: navFadeIn 0.4s ease both !important; }
.nav.show .nav-items .nav-item:nth-child(2){ animation: navFadeIn 0.4s ease 0.1s both !important; }
.nav.show .nav-items .nav-item:nth-child(3){ animation: navFadeIn 0.4s ease 0.2s both !important; }
.nav.show .nav-items .nav-item:nth-child(4){ animation: navFadeIn 0.4s ease 0.3s both !important; }
.nav.show .nav-items .nav-item:nth-child(5){ animation: navFadeIn 0.4s ease 0.4s both !important; }




@media (orientation: landscape) {
  @media (min-width: 1200px) {
    :root { --nav-scale: 1.5; }  /* 大屏桌面 */
  }

  @media (max-width: 900px) and (min-width: 901px) {
    :root { --nav-scale: 1.3; }  /* 中等桌面、13/14寸 */
  }

  @media (max-width: 700px) and (min-width: 601px) {
    :root { --nav-scale: 1.1; }  /* iPad 横屏等 */
  }

  @media (max-width: 600px) {
    :root { --nav-scale: 0.9; }  /* iPhone 横屏等 */
  }
}

@media (orientation: portrait) {
  @media (min-height: 701px) {
    :root { --nav-scale: 1.5; }  /* iPad 竖屏、大屏竖显示 */
  }

  @media (max-height: 700px) and (min-height: 701px) {
    :root { --nav-scale: 1.3; }  /* 中等高度 */
  }

  @media (max-height: 600px) and (min-height: 501px) {
    :root { --nav-scale: 1.1; }  /* iPhone Max 等 */
  }

  @media (max-height: 500px) {
    :root { --nav-scale: 0.9; }  /* iPhone 标准等 */
  }
}


/* ------------------- 加载动画样式 ------------------- */
#loading-screen {
  position: fixed;
  inset: 0;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.6s ease;
}
.loading-logo-seq {
  font-family: 'Arvo', serif;
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 700;
  color: #000;
  display: flex;
  gap: 0.4em;
}
.loading-logo-seq .char {
  opacity: 0;
  transform: translateY(20%);
  animation: bounceIn 1s ease forwards;
}
.loading-logo-seq .char.t { animation-delay: 0.3s; }
.loading-logo-seq .char.d { animation-delay: 0.6s; }

@keyframes bounceIn {
  0%   { opacity: 0; transform: translateY(40%); }
  60%  { opacity: 1; transform: translateY(-5%); }
  80%  { transform: translateY(3%); }
  100% { transform: translateY(0); }
}


/* ===== 防止顶部被卷走 ===== */
.slogan,
.menu-button{
  position: fixed;   /* float above scrolling content */
  top: 24px;
  z-index: 650;
}
.slogan  { left: 48px; }
.menu-button{ right: 48px; }

/* give main wrapper on project pages room below nav */


/* body font: use PingFang everywhere except h1 which has Arvo */
body{
  font-family: "PingFang SC","PingFang TC","PingFang","Helvetica Neue",sans-serif;
}

/* ------------------- 视频容器（自适应宽度，高度由视频内容决定） ------------------- */
.video-container {
  position: relative;        /* 用于容纳绝对定位元素 */
  width: 100%;               /* 占满父容器宽度 */
  aspect-ratio: auto;        /* 使用视频原始宽高比 */
  overflow: hidden;          /* 隐藏超出容器部分 */
}
/* ------------------- 视频样式：居中、自适应、圆角，填满容器 ------------------- */
.video-container video {
  width: 100%;               /* 视频宽度占满容器 */
  object-fit: cover;         /* 保持比例并填满容器，可能裁剪 */
  object-position: center;   /* 视频内容居中显示 */
  display: block;            /* 防止行内元素带来的间隙 */
  margin: 0 auto;            /* 水平居中 */
  border-radius: 15px;       /* 圆角样式 */
}

/* 横屏时上下压缩 */
@media (orientation: landscape) {
  .video-container video {
    transform: scaleY(0.95);
    margin-top: -1%;
  }
}

/* --------- 案例图片样式，3:2 比例，悬停放大效果 --------- */
/* 案例图片容器样式，强制3:2比例，裁剪溢出，圆角 */
/* --------- 案例图片样式，圆角，悬停放大效果 --------- */
.work-image {
  width: 100%;
  border-radius: 15px;
  overflow: hidden;
}
.work-image img {
  width: 100%;
  height: auto;              /* 自动高度，保持图片等比 */
  object-fit: contain;       /* 图片完整显示，不裁剪 */
  transition: transform 0.3s ease-in-out; /* 鼠标悬停放大动画 */
}

/* 鼠标悬停时放大 */
.work-image img:hover {
  transform: scale(1.05); /* 鼠标悬停时放大 */
}


/* =================== 响应式布局：竖排设备时调整案例图片布局 =================== */
@media (max-width: 768px) {
  /* gallery-images 容器竖排，避免图片并排布局 */
  .gallery-images {
    flex-direction: column;       /* 图片竖排展示 */
    gap: 1.5rem;                  /* 缩小图片间距 */
    padding: 0 var(--page-gap);
  }

  .gallery-images .work-card {
    width: 100%;                 /* 每张图片宽度占满 */
    max-width: 100%;             /* 避免超出容器 */
  }

  .gallery-caption {
    text-align: left;            /* 小标题左对齐 */
    padding-left: 5vw;
  }
}

/* ---------------- slogan 链接 ---------------- */
a.slogan,
a.slogan:visited,
a.slogan:hover,
a.slogan:active{
  text-decoration: none !important;   /* 去下划线 */
}

/* 始终可点击、固定尺寸覆盖动画区域 */
a.slogan{
  position: fixed;               /* 固定在视口，不受流影响 */
  top: 24px; left: 32px;         /* 你的原始定位 */
  z-index: 10000;                /* 覆盖一切动画/遮罩 */
  pointer-events: auto;          /* 确保可点 */
  font-size: 16px;
  font-weight: 800;
  color: #000;
  cursor: pointer;

  /* ↓ 根据最长文案预留空间，防止动画时光标落在“空白” */
  padding-right: 220px;          /* 估一估后缀宽度，按需调 */
  display: inline-block;
}

/* 遮罩不拦截点击（双保险）*/
#loading-screen,
.nav-overlay{
  pointer-events: none !important;
}
/* ================= nav-item 渐现（fade-in）效果 ================= */
@keyframes navFadeIn{
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* 默认透明，但可接受 hover（避免看不见） */
.nav-item{
  opacity: 0;
  transition: opacity .4s ease;
}

/* 在导航弹出 (.nav.show) 时依次渐现 */
.nav.show .nav-items .nav-item{
  animation: navFadeIn .6s ease forwards;
}

/* 依次为 5 个菜单设延迟 */
.nav.show .nav-items .nav-item:nth-child(1){ animation-delay: 0.1s; }
.nav.show .nav-items .nav-item:nth-child(2){ animation-delay: 0.2s; }
.nav.show .nav-items .nav-item:nth-child(3){ animation-delay: 0.3s; }
.nav.show .nav-items .nav-item:nth-child(4){ animation-delay: 0.4s; }
.nav.show .nav-items .nav-item:nth-child(5){ animation-delay: 0.5s; }

/* 悬停仍然可高亮 */
.nav-item:hover{
  opacity: 1 !important;
}
/* ---------- 统一全站 <h3> 标题样式 (see + index) ---------- */
h3{
  font-size: 18px;      /* 统一字号 */
  font-weight: 400;     /* 加粗 */
  line-height: 1.25;    /* 行高 */
  margin: 0.2rem 0 1rem 0;/* 下方留距，上方清零 */
  font-family: inherit; /* 跟随页面主字体 */
}

/* =========================================================
   统一作品卡片 & 容器样式
   ---------------------------------------------------------
   - .gallery-images ：两列自适应网格
   - .work-card      ：卡片基础
   - .work-image     ：图片容器
   - .work-info      ：文字区域
========================================================= */
.gallery-images{
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 两列等宽 */
  gap: 1rem;
  padding: 0 var(--page-gap);
}

@media (max-width: 768px){
  .gallery-images{ grid-template-columns: 1fr; } /* 移动端单列 */
}

.work-card{
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: 100%;
}

.work-image{
  width: 100%;
  border-radius: 15px;
  overflow: hidden;
}

.work-image img{
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: transform .3s ease-in-out;
}

.work-image img:hover{ transform: scale(1.05); }

.work-info{ width: 100%; }

/* ---- 布局容器与主网格布局 ---- */
    /* ---- 页面主内容容器：统一使用 see.html 规则 ---- */
    .wrap{
      font-family:"PingFang SC","PingFang TC","PingFang","Helvetica Neue",sans-serif;
      max-width:1500px;
      margin:72px auto;
      padding:0 var(--page-gap); /* 使用全局 page-gap 控制左右边距 */
    }
    .grid {
      display: grid;
      grid-template-columns: 3fr 2fr;
      gap: 40px;
      margin-bottom: 64px;
      justify-content: start;
    }

    /* ---- 主介绍文字区 ---- */
    /* 品牌介绍段落 */
    .right {
      font-size: 62px;
      line-height: 1.1;
      font-weight: 400;
      color: #a5a5a5; /* 整体灰色文字 */
      margin-top: 72px;
      width: 100%;
      text-align: justify; /* 主段两端对齐 */
    }
    .right2 {
      font-size: 62px;
      line-height: 1.1;
      font-weight: 400;
      color: #a5a5a5; /* 整体灰色文字 */
      margin-top: 172px;
      margin-bottom: 148px;
      width: 100%;
      text-align: justify; /* 主段两端对齐 */
    }

    /* ---- 标题 ---- */
    .section-title1 {
      text-align: left;
      font-size: 62px;
      color: #000;
      font-weight: 300;
    }
    .section-title2 {
      text-align: left;
      font-size: 62px;
      margin-top: 120px;
      color: #000;
      font-weight: 300;
    }
    .section-more {
      font-size: 62px;
      font-weight: 300;
      text-align: center;
      color: #000;
      margin: 96px auto 48px auto;
    }

     /* ---- 主介绍下的小字说明 ---- */
    .small-gray {
      font-size: 18px;
      line-height: 0.7;
      font-weight: 300;
      color: #a5a5a5;
      margin-top: 18px;
      text-align: left; /* 小字右对齐 */
    }
    .highlight-black {
      color: #a5a5a5;
      transition: color 0.3s ease;
    }
    .highlight-black.active {
      color: #000000;
    }

    /* 单个作品卡片容器 */
    .work-card {
      width: calc(50% - 0.5rem);        /* gap 是 0.5rem，刚好抵消 */
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
      margin-bottom: 0.5rem;
    }
    /* ---- Work 图片容器 ---- */
    .work-image {
      width: 100%;
      height: auto;
      overflow: hidden;
      border-radius: 16px;
      display: flex;
    }
    .work-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    /* ---- Work 卡片下的文字区域 ---- */
    .work-info {
      width: auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    @media (max-width: 768px) {
      .work-card {
        width: 100%;
        flex-direction: column;
      }
      .work-image {
        width: 100%;
        height: 240px;
      }
    }

    /* 作品卡片网格容器 */
    .gallery-section{
      padding: 0;        /* 使用全局变量控制左右页边距 */
    }
    /* gallery-images 不再单独写 padding，继承自 gallery-section */
    .gallery-images {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      justify-content: space-between;
      margin-bottom: 1rem;
      padding: 0;
    }

    /* 页面底部信息区 */
    .site-footer {
      margin-top: 120px;
      padding: 64px 24px;
      background-color: #000;
      text-align: center;
      border-top: 1px solid #eee;
    }

    /* 底部内容容器 */
    .footer-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    /* 底部 logo 文本 */
    .footer-logo {
      margin-top: 24px;
      font-size: 256px;
      font-family:'Arvo',serif;
      font-weight: bold;
      color: #fff;
    }

    /* 底部联系信息 */
    .footer-info p {
      margin: 0px 0;
      font-size: 16px;
      color: #fff;
    }

    /* 底部二维码图像 */
    .footer-qr img {
      margin: 12px 0 36px 0;
      width: 200px;
      height: 200px;
      object-fit: contain;
    }

    /* ---- 目录整体容器：与 wrap 左右 32px 内边距保持一致 ---- */
    .catalog{
      margin: 48px 0 24px 0;   /* 上 48px，下 24px */
      max-width: 100%;         /* 不再限制 600px，让其随页面宽度 */
      padding: 0;              /* 左右边距由 .wrap 控制（32px） */
      text-align: left;
    }
    /* 作品卡片网格容器紧贴目录 */
    .gallery-images{
      margin-top: 0;           /* 紧贴目录，无额外间距 */
    }

    .catalog-list{
      list-style:none;
      font-size: 18px;
      padding:0;
      margin:0;
      display:flex;
      flex-wrap:wrap;
      gap:12px 24px;
      justify-content:flex-start;   /* 左对齐 */
    }
    /* ---------- 目录子项样式 ---------- */
    .catalog-list li{
      position: relative;
      padding-left: 24px;           /* 给更大圆点留空间 */
      cursor: pointer;
      color:#aeaeae;                   /* 默认灰色 */
      flex: 0 1 auto;               /* 宽度随页面自适应换行 */
    }
    /* 空心圆（默认） */
    .catalog-list li::before{
      content:'○';
      position:absolute;
      left:0;
      top:50%;                   /* 垂直居中 */
      transform:translateY(-50%);
      font-size:1.6em;           /* 圆点大小 */
      line-height:1;
    }
    /* 实心圆（选中） */
    .catalog-list li.active::before,
    .catalog-list li:hover::before{
      content:'●';
    }

    /* 选中或悬停时文字、圆点变黑 */
    .catalog-list li.active,
    .catalog-list li:hover{
      color:#000;
    }