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

/* Base */
html,body{
  height:100%;
  font-family:'Verdana Pro Regular',Verdana,sans-serif;
  background:#000;             /* 防首帧闪白 */
}

/* ====== 顶层黑幕（与 main.js 的 FADE 匹配）====== */
.ivt-fade-overlay{
  position:fixed; inset:0;
  background:#000;
  opacity:1;                   /* 初始黑场，JS 下一帧降到 0 */
  pointer-events:none;
  z-index:99999;               /* 盖住所有内容 */
  will-change:opacity;         /* 提前告诉浏览器优化 */
  transition:opacity .7s ease; /* 对齐默认 IN/OUT 700ms */
}

/* ====== 菜单按钮：方形外框 + 轻磨砂 ====== */
.menu-button{
  position:absolute; top:40px; right:40px;
  z-index:1002;
  cursor:pointer;
  width:40px; height:40px;
  border-radius:8px;                      /* 方形，轻微圆角 */
  background:rgba(255,255,255,0.06);
  border:0;                               /* 无描边 */
  color:#fff;
  display:grid; place-items:center;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:background-color .2s ease, transform .1s ease;
}
.menu-button::before{content:'≡';font-size:1.4em;line-height:1}
.menu-button:hover{background:rgba(255,255,255,0.12)}
.menu-button:active{transform:scale(0.95)}
.menu-button.hide{display:none}

/* ====== 侧栏：磨砂玻璃效果 ====== */
.sidebar-menu{
  position:fixed; top:8%; right:-20%; width:15%; height:100%;
  padding:50px;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.08);
  border-right:none;
  box-shadow:0 20px 50px rgba(0,0,0,0.35);
  color:#808080; text-align:center;
  transition:right .5s;
  z-index:1001;
}
.sidebar-menu.active{right:0}
.sidebar-menu div.space{height:20px}

/* ====== 菜单链接 ====== */
.sidebar-menu a{
  position:relative;
  display:block;
  margin-bottom:10px;
  padding:8px 0;
  font-size:12px;
  color:#fff;
  text-decoration:none;
  text-align:center;
  border-radius:6px;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.sidebar-menu a:hover{
  background:rgba(255,255,255,.12);
  color:#fff;
}

/* ====== 已选页面：淡白外框/底色 ====== */
.sidebar-menu a[aria-current="page"]{
  color:#fff;
  font-weight:600;
  background:rgba(255,255,255,0.08);       /* 微亮背景 */
  border:0;                                 /* 保持无描边 */
  border-radius:6px;
}

/* 禁用右侧白色提示（如之前有基于 title 的 tooltip） */
.sidebar-menu a[title]:hover::after{
  display:none !important; content:none !important;
}

/* ====== 媒体层 ====== */
.work-image,.work-video{
  position:fixed; inset:0; width:100vw; height:100vh;
  object-fit:cover; background-position:center; background-repeat:no-repeat;
  transition:opacity .5s ease;
  will-change:opacity;
}
.work-image{display:block; opacity:1}
.work-video{display:none; opacity:0}

/* ================== 说明块：固定左下角 + 固定高 + 超出滚动 + 磨砂 ================== */
:root{
  /* 桌面端可调参数 */
  --desc-width: 28rem;
  --desc-height: 260px;

  /* 手机端可调参数 */
  --desc-width-mobile: 92vw;
  --desc-height-mobile: 42vh;
}

.work-description{
  position:absolute;
  /* 锚定左下角 */
  top:auto; right:auto;
  left:2%; bottom:5%;
  z-index:2;

  /* 固定尺寸 */
  width:var(--desc-width);
  height:var(--desc-height);
  max-width:none !important;
  max-height:none !important;

  /* 文本样式 */
  color:#fff;
  font-size:14px;
  line-height:1.55;
  text-align:justify;

  /* 内边距与圆角 */
  padding:12px 14px;
  border-radius:8px;

  /* 超出滚动（避免把整页顶乱） */
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;

  /* 字符折行 */
  overflow-wrap:break-word;
  word-break:break-word;
  hyphens:auto;

  /* 背板：半透明 + 磨砂，压住背景图干扰 */
  background:rgba(0,0,0,0.42);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:none ;
  box-shadow:0 8px 30px rgba(0,0,0,0.35);
}

.work-description h1{
  font-size:1.15em;
  margin:0 0 .45em 0;
}
.work-description p{ margin:.6em 0; }

/* （可选）说明块内部滚动条样式，仅影响 .work-description */
.work-description::-webkit-scrollbar{ width:6px; height:6px; }
.work-description::-webkit-scrollbar-thumb{
  background: none ;
  border-radius: 6px;
}
.work-description::-webkit-scrollbar-track{ background: transparent; }

/* ====== 手机上可读性优化（仍固定左下角 + 固定高） ====== */
@media (max-width:768px){
  .work-description{
    left:4%;
    bottom:max(8%, env(safe-area-inset-bottom));
    width:var(--desc-width-mobile);
    height:var(--desc-height-mobile);

    font-size:clamp(13px, 3.6vw, 15px);
    line-height:1.6;
    text-align:left;
  }
}

/* ====== 自适应菜单（侧栏宽度在手机上改为 50%） ====== */
@media (max-width:768px){
  .sidebar-menu{width:50%; right:-50%}
  .sidebar-menu a,.sidebar-menu div{font-size:12px}
  .work-image,.work-video{height:100vh; object-fit:cover}
}

/* ====== 无障碍：减少动画时统一关闭过渡 ====== */
@media (prefers-reduced-motion: reduce){
  .ivt-fade-overlay,
  .work-image,.work-video,
  .sidebar-menu{ transition:none !important }
}

/* ====== 预启动阶段：隐藏正文，避免文字抢先一帧亮起 ====== */
html.ivt-preboot body > :not(.ivt-fade-overlay){
  visibility: hidden !important;
}

/* 减少动画模式下也同样隐藏，防止闪烁 */
@media (prefers-reduced-motion: reduce){
  html.ivt-preboot body > :not(.ivt-fade-overlay){
    visibility: hidden !important;
  }
}