/* ==========================================================================
   1. 全局变量与重置 (Global & Reset)
   ========================================================================== */
:root {
  --bg: #0f0f0f;        /* 页面背景：深黑 */
  --text-main: #f5f5f5; /* 主文字：柔白 */
  --text-muted: #9a9a9a;/* 次要文字：灰白 */
  --accent: #ffffff;    /* 强调色 */
}

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

html, body {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg);
  color: var(--text-main);
  /* 基础字体设置，如有需要可在此添加 font-family */
}

/* 页面淡入动画 */
.fade-in {
  opacity: 0;
  animation: fadeIn 700ms ease-out forwards;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

/* ==========================================================================
   2. 首页 / 封面轮播 (Landing & Carousel)
   ========================================================================== */

/* 2.1 首页最外层容器 */
.landing {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:#0f0f0f; /* 透明背景，去除多余色块 */
  padding: 40px;         /* 上下留白，防止高度不够时切断内容 */
  overflow: hidden;       /* 允许内容在窗口变矮时撑开 */
  box-sizing: border-box;
}

/* 2.2 相框主体 (包裹轮播图的区域) */
.landing-frame {
  width: 100vw;
  height: 100vh;
  min-height: 600px;       /* 最小高度保护 */
  max-width: 2400px;       /* 允许在大屏上充分伸展 */
  margin: 0 auto;
  
  position: relative;
  display: flex;
  flex-direction: column;
  
  background: rgba(0, 0, 0, 0.35);        /* 图片加载前的底色 */
  border: none;            /* [已去除] 边框 */
  box-shadow: none;        /* [已去除] 阴影 */
}

/* 2.3 轮播背景层容器 */
.landing-bg {
  flex: 1;                 /* 撑满相框 */
  align-self: stretch;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden;        /* 裁剪溢出的图片 */
}

/* 2.4 轮播图图片层 (位于最底层 z-index: 0) */
.carousel-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* 单张幻灯片样式 */
.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  
  object-fit: cover;           /* 保证填满且不变形 */
  object-position: center bottom; /* 对齐底部，防止切掉建筑根部 */
  
  opacity: 0;                  /* 默认透明 */
  transition: opacity 2s ease-in-out; /* 2秒柔和渐变 */
}

.carousel-slide.active {
  opacity: 1; /* 激活时显示 */
}

/* 2.5 遮罩层 (用于加深图片，使文字更清晰) */
.landing-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1;
  pointer-events: none;
}

/* 2.6 内容层 (文字与按钮) */
.landing-inner {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 文字定位容器 */
.landing-content {
  position: absolute;
  top: 60%;               /* 垂直位置：偏下 */
  left: 50%;
  transform: translate(-50%, -50%); /* 绝对居中 */
  z-index: 10;
  text-align: center;
  width: 100%;
  background: transparent;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3); /* 增加文字可读性 */
}

/* 名字样式 (WENTAO LYU) */
.landing-content > div:first-child {
  font-family: 'Playfair Display', serif; /* 使用衬线体 */
  font-size: 24px;
  font-weight: 400;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 8px;     /* 拉开与按钮的距离 */
  letter-spacing: 0.3em;
  
  /* 视觉压扁效果 */
  transform: scaleY(0.85);
  transform-origin: center bottom;
}

/* Enter 按钮容器 */
.landing-enter {
  margin-top: 16px;
}

/* Enter 按钮样式 (纯文字风格) */
.landing-enter a, 
.enter-btn {
  display: inline-block;
  background: transparent !important;
  border: none !important;
  backdrop-filter: none;
  padding: 10px 0;
  
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: opacity 0.3s ease;
  
  /* 如需下划线，取消下方注释 */
  /* border-bottom: 1px solid transparent; */
}

.landing-enter a:hover,
.enter-btn:hover {
  opacity: 0.7; /* 悬停变淡 */
  background: transparent;
}

/* 2.7 圆点指示器 */
.carousel-dots {
  position: absolute;
  bottom: 60px; /* 距离底部的高度，防止被遮挡 */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 20;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(0,0,0,0.1);
}

.dot.active {
  background: #ffffff;
  transform: scale(1.4);
}

/* ==========================================================================
   3. 导航栏 (Navigation)
   ========================================================================== */
.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}

.site-title-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.site-title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.26em;
}

.site-subtitle {
  font-size: 11px;
  color: var(--text-muted);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.site-nav a {
  color: var(--text-muted);
  text-decoration: none;
}

.site-nav a.active {
  color: var(--text-main);
  border-bottom: 1px solid var(--text-main);
}

/* ==========================================================================
   4. 通用页面布局 (General Layout)
   ========================================================================== */
.page-frame {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 32px 48px 56px;
}

.page-inner {
  width: 100%;
  max-width: 2000px; /* 适配大宽屏 */
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ==========================================================================
   5. 作品集网格系统 (Works Grid)
   ========================================================================== */

/* 5.1 复杂网格 (12列布局，用于 Works 页面) */
.tri-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(240px, auto);
  gap: 22px;
  align-items: stretch;
}

/* 跨列/跨行工具类 */
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
/* ...更多列宽可按需添加... */

.row-1 { grid-row: span 1; }
.row-2 { grid-row: span 2; }

/* 5.2 卡片通用样式 */
.grid-item {
  position: relative;
}

.work-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: #141414;
  text-decoration: none;
}

.work-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 悬停时的遮罩信息 */
.work-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 14px 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0));
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.work-title {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text-main);
  margin-bottom: 4px;
}

.work-sub, 
.work-tags {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* 交互效果 */
.work-link:hover .work-thumb { transform: scale(1.04); }
.work-link:hover .work-overlay { opacity: 1; transform: translateY(0); }

/* 5.3 纯文字卡片 (Note) */
.notes-item {
  background: transparent;
}
.notes-inner { padding: 18px; height: 100%; }
.notes-kicker {
  font-size: 18px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.notes-title {
  font-size: 24px;
  font-weight: 400;
  color: var(--text-main);
  margin-bottom: 10px;
}
.notes-body {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-muted);
}

/* ==========================================================================
   6. 项目详情页 (Project Detail)
   ========================================================================== */
.project-page {
  max-width: 900px;
  margin: 0 auto;
}

.project-header { margin-bottom: 24px; }
.project-kicker {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 6px;
}
.project-header h1 {
  font-size: 24px;
  margin: 0 0 8px;
  font-weight: 500;
}

.project-hero { margin: 28px 0 24px; }
.project-hero-image {
  min-height: 340px;
  width: 100%;
  background: #d4d4d4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.project-hero-caption {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 8px;
}

.project-text { margin: 24px 0; }
.project-text h2 {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 8px;
}
.project-text p {
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 10px;
  color: #e0e0e0; /* 适配深色模式 */
}

.project-images {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 20px 0 10px;
}
.project-image-full {
  width: 100%;
  min-height: 260px;
  background: #333;
}

.project-footer {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid #333;
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
}

/* ==========================================================================
   7. 关于页 (About)
   ========================================================================== */
.page-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 3fr);
  gap: 32px;
}

.page-sidebar h1 {
  font-size: 22px;
  margin: 0 0 8px;
  font-weight: 500;
}
.page-sidebar .kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-muted);
}
.page-sidebar dl {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}
.page-sidebar dt {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11px;
  margin-top: 12px;
}
.page-sidebar dd { margin: 3px 0 0; }

.page-body {
  font-size: 14px;
  line-height: 1.7;
  color: #e0e0e0;
}
.page-footer {
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid #333;
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
}

/* ==========================================================================
   8. 响应式适配 (Responsive)
   ========================================================================== */

/* 大屏幕适配 (4K/2K) */
@media (min-width: 1600px) {
  .site-title { font-size: 15px; }
  .site-nav { font-size: 13px; }
  .project-header h1 { font-size: 28px; }
  .project-text p { font-size: 15px; }
  
  /* 作品集列表文字放大 */
  .work-title { font-size: 18px; }
  .work-sub { font-size: 13px; }
}

/* 平板适配 (小于 1100px) */
@media (max-width: 1100px) {
  /* 网格变单列或双列 */
  .tri-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
  }
  
  /* 强制所有跨行跨列回归单元格 */
  .grid-item {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
  
  /* 调整卡片比例 */
  .work-link {
    aspect-ratio: 4/3;
    height: auto;
  }
  
  .page-layout {
    grid-template-columns: 1fr; /* 关于页侧边栏垂直排列 */
  }
}

/* 手机适配 (小于 768px/600px) */
@media (max-width: 768px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .page-frame {
    padding: 16px;
  }
}

@media (max-width: 600px) {
  .tri-grid {
    grid-template-columns: 1fr; /* 手机单列 */
  }
  .work-overlay {
    opacity: 1; /* 手机上默认显示文字，因为没有鼠标悬停 */
    transform: none;
    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));
  }
}