/* 基础 */
* { padding: 0; box-sizing: border-box; cursor: url('assets/meta/cursor.png') 16 16, auto; }
img { max-width: 100%; max-height: 100%; }

html { font-size: calc(22px + 0.3vw); scroll-behavior: smooth; }

@font-face{
  font-family: 'Planar';
  src: url('assets/fonts/GT-Planar-VF.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

body { margin: .5rem; font-family: "Planar", sans-serif; font-weight:300; line-height:1.3em; }

p, h1, h2 { font-size:16pt; line-height:1.3em; }
h1, h2 { color:#000; font-weight:450; }
h1:hover { font-size:40pt; color:blue; transition:.2s ease-in-out; cursor:url('assets/meta/cursor_hover.png') 16 16, auto; }
.cn-name {font-family: "PingFang SC", sans-serif; font-weight: 400; letter-spacing: 0.02em; font-size: 0.95em;}


a { color:#000; text-decoration:none; font-weight:300; transition:.2s ease-in-out; }
a:hover { color:blue; font-weight:450; cursor:url('assets/meta/cursor_hover.png') 16 16, auto; }

/* ——— Tags（解决：字号16pt、纵向排列、hover同链接） ——— */
.filters {
  position: fixed;
  top: 40px;
  margin-left: 86%;
  width: 10%;
  text-align: left;
  z-index: 100;
  display: flex;
  flex-direction: column;     /* 一行一个 */
  /* gap: 6px; */
  font-size: 16pt;            /* 指定字号 */
  line-height: 1.3em;
}

.tag-btn {
  appearance: none;
  border: none;
  background: transparent;
  font: inherit;              /* 继承 16pt */
  color: #000;
  padding: 0;                 /* 像链接一样紧凑 */
  text-align: left;
  display: inline-block;
  position: relative;
  cursor: url('assets/meta/cursor.png') 16 16, auto;
  transition: color .2s ease-in-out, font-weight .2s ease-in-out;
}

.tag-btn:hover {
  color: blue;                /* 与 a:hover 同步 */
  font-weight: 450;
  cursor: url('assets/meta/cursor_hover.png') 16 16, auto;
}


.tag-btn.active {
  color: blue;
  font-weight: 450;
  cursor: url('assets/meta/cursor_hover.png') 16 16, auto;
}


.tag-btn:focus-visible {
  outline: 2px dashed currentColor;
  outline-offset: 3px;
}

/* 右上角简介位置保持 */
.text-wrapper {
  top: 20px;
  margin-left: 63%;
  text-align: left;
  position: fixed;
  z-index: 100; 
}

/* 左上角标题 */
.nav-link { position: fixed; top: 1.5rem; left: 1.5rem; width: 30vw; max-width: 500px; height: 12vh; z-index: 1000; }
.title img { height: 100%; width: auto; max-width: 500px; position: absolute; display: block; transition: .2s ease-in-out; }
.title .hover { opacity: 0; }
.title:hover .hover { opacity: 1; cursor:url('assets/meta/cursor_hover.png') 16 16, auto; }
.title:hover .defalt { opacity: 0; }

/* 作品区 */
#container {
  /* 宽度不再固定，自动适配屏幕 */
  width: min(1600px, 92vw);
  margin: 9em auto 7rem;
  display: grid;
  /* 自动铺列，最小卡片宽度 240px，不够就换行 */
  grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
  gap: 80px 60px; /* 行、列间距 */
  z-index: 0;
}

/* 卡片：不再固定 px/em 尺寸，使用 aspect-ratio 保持正方形 */
.work, .not_available_work, .tomato_work {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;      /* 正方形卡片 */
  overflow: hidden;
  user-select: none;
  /* 重要：去掉 float 与外边距 */
}

/* 图片覆盖卡片，contain 保证完整可见 */
.work img, .not_available_work img, .tomato_work img{
  position: absolute;
  inset: 0;                 /* top/right/bottom/left 全 0 */
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: .2s ease-in-out;
}

/* 其余 hover 效果保持 */
.work .gif, .not_available_work .gif, .tomato_work .gif { opacity: 0; }
.work:hover .gif { opacity: 1; cursor:url('assets/meta/cursor_hover.png') 16 16, auto; }
.work:hover .static { opacity: 0; }
.not_available_work { cursor:url('assets/meta/cursor_unavailable.png') 16 16, auto; }
.not_available_work:hover .gif { opacity: 1; cursor:url('assets/meta/cursor_unavailable.png') 16 16, auto; }
.not_available_work:hover .static { opacity: 0; }
.tomato_work { cursor:url('assets/meta/cursor_tomato_cart.png') 16 16, auto; }
.tomato_work:hover .gif { opacity: 1; cursor:url('assets/meta/cursor_tomato_cart.png') 16 16, auto; }
.tomato_work:hover .static { opacity: 0; }

/* 响应式：平板与手机时的卡片最小宽度更小、间距更紧 */
@media (max-width: 1024px) {
  #container {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 36px;
  }
}
@media (max-width: 640px) {
  #container {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
    margin: 7.5em auto 2rem;
  }
}

/* 悬浮描述（16pt） */
#description-area {
  position: fixed;
  bottom: 1rem;
  right: 1.5rem;
  width: 50%;
  max-width: 500px;
  z-index: 1000;
  transition: .2s ease-in-out;
  text-align: right;
  pointer-events: none;
  font-size: 16pt;           /* 指定字号 */
  line-height: 1.3em;
}


/* 响应式布局 - 手机端 */
@media (max-width: 768px){
  body {
    margin: 20px;
  }

  /* 标题变成全屏宽 */
  .nav-link {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
  }

  /* 隐藏 nav-link 中的 br 标签 */
  .nav-link br {
    display: none;
  }

  .title {
    position: relative;
    width: 100%;
  }

  .title a {
    display: block;
    position: relative;
    width: 100%;
  }

  .title .defalt {
    position: static;
    width: 100%;
    height: auto;
    display: block;
  }

  .title .hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: left top;
  }

  /* 个人信息移到标题下方 */
  .text-wrapper {
    position: relative;
    top: 0;
    margin-left: 0;
    margin-bottom: 20px;
  }

  /* 隐藏过滤标签 */
  .filters {
    display: none;
  }

  /* 隐藏悬浮描述区 */
  #description-area {
    display: none;
  }

  /* 作品区域 */
  #container {
    width: 100%;
    margin: 0 auto 2rem;
  }

  /* 隐藏顶部和底部遮罩 */
  body::before,
  body::after {
    display: none;
  }

  /* 使用 flexbox 重新排序 */
  body {
    display: flex;
    flex-direction: column;
  }

  .nav-link {
    order: 1;
  }

  .text-wrapper {
    order: 2;
  }

  #container {
    order: 3;
  }

  #rain-container {
    order: 4;
  }
}


/* 顶部渐变遮罩 */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 180px; /* 覆盖顶部标题区的高度，可按视觉再调 */
  pointer-events: none;
  background: #fff;
  z-index: 50; /* 必须比作品区高，比标题区文字低 */
}

/* 底部渐变遮罩 */
body::after {
  content: "";
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 120px; /* 根据底部 description 的高度调 */
  pointer-events: none;
  background: #fff;
  z-index: 50;
}

/* 番茄雨 */
#rain-container { position: fixed; top: -1vh; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999; overflow: hidden; }
.raindrop { will-change: transform, opacity; transition: opacity .5s ease; }
.raindrop.fade-out { opacity: 0; }