@font-face {
  font-family: 'gothic'; /* 自定义字体名字，可随便取 */
  src: url('fonts/GOTHICI.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


/* ----------------- 全局 ----------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  max-width: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  max-width: 100%;
  font-family: 'gothic', sans-serif;
  color: #333;
  /* 去掉整屏滚动 */
  scroll-snap-type: none;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth; /* 保留平滑滚动 */
  background-color: #ffffff;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  background: url("photo/paper-noise.webp") repeat;
  opacity: 0.03;
}

body.modal-open {
  overflow: hidden;
}

button,
a,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid #0077ff;
  outline-offset: 4px;
}

#projects {
  height: auto;
  min-height: 100vh;
  overflow: visible;
  padding: 100px 20px;
}



/* ----------------- 视频开场 ----------------- */
.video-section {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  padding: 0;
}

/* 图片铺满背景 */
.video-section img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* 半透明遮罩 */
.video-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.8);
  z-index: 1;
  pointer-events: none;
}

/* hero 容器 */
.hero {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: transparent; /* 改为透明 */
  z-index: 2;
  min-width: 0;
  max-width: 100%;
  padding: 0 20px;
}

.hero-text {
  width: 100%;
  min-width: 0;
  max-width: min(92vw, 720px);
}

.hero-text h1 {
  margin: 0;
  padding: 0;
  line-height: 1.2; /* 稍微拉开行高 */
  font-size: clamp(1.65rem, 5vw, 2.25rem);
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.hero-text p {
  margin: 0.2em 0 0 0;  /* 段落上方留点空隙 */
  padding: 0;
  line-height: 1.2;
  font-size: clamp(1rem, 3.5vw, 1.2rem);
}




/* ----------------- 导航栏 ----------------- */
.navbar {
  position: fixed; /* 固定在顶部 */
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.5); /* 半透明白色 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  padding: 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100; /* 确保在内容上方 */
}

body > section {
  padding-top: 0px; /* 给固定导航留空间 */
}
.navbar ul {
  display: flex;
  justify-content: center; /* 居中 li */
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar li {
  margin: 0 50px; /* 文字间距，可调 */
}

.navbar a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  font-family: 'gothic', sans-serif; /* 自定义字体 */
  transition: color 0.3s;
}

.navbar a:hover {
  color: #0077ff;
}

.navbar a[aria-current="page"] {
  color: #0077ff;
}

.navbar a[aria-current="page"]::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 4px;
  background: currentColor;
  transform-origin: center;
}

.navbar a:focus-visible {
  border-radius: 4px;
}


/* ----------------- 模块通用 ----------------- */
body > section {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: 60px;
}

.works {
  background: #f1f1f1;
}

section {
  background: #f1f1f1;
  scroll-margin-top: 60px;
}


#showreel {
  position: relative; /* 绝对定位的图片参考点 */
  overflow: hidden;   /* 防止图片超出 */
}

#bg-a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  z-index: 0; /* 最底层 */
  transform: scale(1.01);
}

#bg-solid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.36) 0%,
    rgba(255, 255, 255, 0.18) 45%,
    rgba(255, 255, 255, 0.28) 100%
  );
  z-index: 1;
  pointer-events: none;
  opacity: 1;
}

#skills-0 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 4;
  pointer-events: none; /* 鼠标穿透，不阻挡 hover */
  transform: scale(0.15) translateX(-4800px) translateY(10px);
}


.modal {
  display: none; /* 默认隐藏 */
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.7);
  justify-content: center;
  align-items: center;
  z-index: 100;
}

/* 弹窗内容 */
.modal-content {
  position: relative;
  width: min(90vw, 1200px);
  max-width: 1200px;  /* 最大宽度 */
  max-height: 85vh;
  aspect-ratio: 16 / 9;
}

.modal-content iframe,
.modal-content video,
.modal-content img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保持比例 */
  border: 0;
}



.close-btn {
  position: absolute;
  top: -44px;
  right: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  font-size: 2rem;
  line-height: 1;
  color: #fff;
  cursor: pointer;
}

.close-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}

.portfolio-player { position:absolute; inset:0; background:#000; }
.player-status { position:absolute; left:16px; top:12px; right:130px; color:#fff; font:14px/1.5 system-ui; pointer-events:none; text-shadow:0 1px 4px #000; }
.player-switch { position:absolute; top:-40px; right:52px; min-height:32px; padding:5px 12px; border:1px solid #ffffff80; border-radius:20px; background:#18252ee6; color:#fff; font:14px/1.5 system-ui; cursor:pointer; }
.player-switch:hover { background:#344958; }
.player-switch[hidden] { display:none; }
.player-switch:focus-visible { outline:2px solid #fff; outline-offset:3px; }


#cover-container {
  width: 88%;  /* 宽度为 section 的 88/100 */
  margin: 0 auto 50px auto;    /* 水平居中 */
  position: relative;
  z-index: 3;
  cursor: pointer;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity 0.5s ease,
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

html.js #showreel:not(.is-visible) #cover-container {
  opacity: 0;
  transform: translateY(18px) scale(0.99);
}

#cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持比例裁剪 */
  opacity: 1;
}

#cover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* 降低，不盖住全局文字 */
  background: rgba(255, 255, 255, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #1f80ff;
  font-size: 2rem;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: auto;
}

#cover-container:hover #cover-overlay {
  opacity: 1;
}

/* 网格布局 */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列，每列占1份 */
  gap: 20px;
  width: 100%;   /* 撑满屏幕 */
  padding: 20px; /* 四周留白 */
  box-sizing: border-box;
}

.work-card {
  position: relative;
  overflow: hidden; /* 保证叠层不溡出 */
  cursor: pointer;
}

.work-card img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: opacity 0.5s ease; /* 图片渐变 */
}

.work-card .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  color: #030303;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 文字靠介 */
  padding: 10px;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.work-card:hover .overlay {
  opacity: 1;
}

.work-card:focus-visible .overlay {
  opacity: 1;
}

/* ▶ 和j标题同一行 */
.overlay-top {
  display: flex;
  align-items: center;
  gap: 5px; /* ▶和标题的间距 */
}

.overlay-top h3 {
  margin: 0;
  font-size: 1.5rem; /* 固定字体大小 */
}

.work-card .overlay .work-desc {
  font-size: 1rem;
  line-height: 1.2;
  margin-top: 5px;
  text-align: left;
}

.work-card .overlay .play-btn {
  font-size: 20px;
}


#projects h2 {
  text-align: left;
  margin: -50px 0 10px 0;
}

#about {
  height: auto;       /* 高度自适应内容 */
  padding: 20px 20px 120px 20px; /* 上 20px，右 20px，下 80px，左 20px */
}


.about-container {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;       /* 左右居中 */
}


.about-text {
  text-align: left;        /* 左对齐文字 */
  line-height: 1.6;
}

.about-avatar {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
}

.small-text {
  margin: 2px 0;
  line-height: 1.4;
}

/* =========================
   Mobile Responsive Tweaks
   ========================= */
@media (max-width: 768px) {

  /* Navbar: shrink + wrap so it won't overflow */
  .navbar {
    padding: 10px 12px;
  }

  .navbar ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 16px;
  }

  .navbar li {
    margin: 0 !important;
  }

  .navbar a {
    font-size: clamp(12px, 3.5vw, 14px);
  }

  /* Section padding: reduce side whitespace on mobile */
  section {
    padding: 40px 16px;
  }

  .hero {
    padding: 0 18px;
  }

  .hero-text {
    max-width: 100%;
  }

  .hero-text h1 {
    font-size: clamp(1.35rem, 6vw, 1.65rem);
  }

  /* Projects grid: 2 columns, bigger cards, tighter gaps */
  .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
    padding: 0 4px;
  }

  .work-card {
    border-radius: 10px;
  }

  .work-card img {
    width: 100%;
  }

  .work-card .overlay {
    opacity: 1;
    justify-content: flex-end;
    background: linear-gradient(
      to top,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(255, 255, 255, 0.78) 44%,
      rgba(255, 255, 255, 0) 78%
    );
  }

  .overlay-top h3 {
    font-size: clamp(1rem, 4vw, 1.25rem);
  }

  .work-card .overlay .work-desc {
    font-size: clamp(0.82rem, 3vw, 0.95rem);
  }

  /* Projects title: responsive size */
  #projects h2 {
    font-size: clamp(22px, 7vw, 34px);
    margin-top: 0;
    margin-bottom: 18px;
  }
}

@media (max-width: 560px) {
  .grid {
    grid-template-columns: 1fr !important;
  }

  #projects {
    padding: 82px 14px 64px;
  }

  #cover-container {
    width: 94%;
  }

  .about-container {
    flex-direction: column;
  }

  .about-text {
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@page {
  size: 16in 9in;
  margin: 0;
}

@media print {
  html,
  body {
    width: 16in;
    margin: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .navbar {
    position: absolute;
  }

  body > section {
    min-height: 9in;
  }

  #showreel {
    height: 9in;
    min-height: 9in;
    padding: 0;
    break-before: page;
    break-after: page;
  }

  #cover-container {
    width: 72%;
    margin: 0 auto;
  }

  #projects {
    height: 9in;
    min-height: 9in;
    padding: 28px 18px;
    overflow: hidden;
  }

  .grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 8px;
    padding: 8px 18px;
  }

  .work-card {
    break-inside: avoid;
  }

  .work-card .overlay {
    opacity: 1;
    padding: 8px;
  }

  .overlay-top h3 {
    font-size: 0.8rem;
  }

  .work-card .overlay .work-desc {
    font-size: 0.62rem;
  }

  #projects h2 {
    margin: 0 0 8px;
  }

  #about,
  footer,
  .navbar a[href="#about"] {
    display: none !important;
  }

  #bg-solid-overlay {
    background: rgba(255, 255, 255, 0.28) !important;
  }

  .work-card .overlay {
    background-image: none !important;
  }

  html.js #showreel:not(.is-visible) #cover-container {
    opacity: 1 !important;
    transform: none !important;
  }

  .modal {
    display: none !important;
  }
}