/* Section: #updates — 悬浮毛玻璃卡片,一排三个
   每张卡片:上 50% 图片 / 下 50% 标题+简介,整张卡是一块玻璃(不做内部分层)

   关键:毛玻璃 = 模糊「背后的东西」。所以卡片网格后面必须先有可模糊的
   有对比内容 —— 柔光由 updates/render.js 随机生成(颜色限定在站内令牌内)。
   没有它,backdrop-filter 在纯黑背景上等于没写。 */

.updates-section {
  position: relative;
  isolation: isolate;
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
  padding: var(--section-y, 36px) 0;
}

/* ── 卡片背后的柔光:由 updates/render.js 生成 ──────────
   位置/大小/透明度随机,颜色只从站内令牌里加权挑选。
   数量随卡片行数增加,所以一直加卡片也不会出现"某几行背后没光"。 */
.updates-glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  will-change: transform;
  animation: updates-drift var(--dur, 26s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

/* 缓慢漂浮:只动 transform / scale,GPU 合成,不触发重排重绘 */
@keyframes updates-drift {
  0% {
    transform: translate3d(0, 0, 0) scale(var(--s0, 1));
  }
  33% {
    transform: translate3d(var(--dx1, 40px), var(--dy1, 30px), 0) scale(var(--s1, 1.08));
  }
  66% {
    transform: translate3d(var(--dx2, -40px), var(--dy2, -30px), 0) scale(var(--s0, 1));
  }
  100% {
    transform: translate3d(0, 0, 0) scale(var(--s0, 1));
  }
}

@media (prefers-reduced-motion: reduce) {
  .updates-glow {
    animation: none;
  }
}

.updates-header,
.updates-grid {
  position: relative;
  z-index: 1;
}

/* 一张卡都没有时整段收起(否则只剩标题,看起来像页面坏了) */
.updates-section[hidden] {
  display: none;
}

.updates-header {
  max-width: 760px;
  margin-bottom: 38px;
}

.updates-lead {
  max-width: 620px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.72;
}

.updates-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* ── 卡片:一整块悬浮的毛玻璃 ───────────────────────── */
.update-card {
  position: relative;
  display: flex;
  flex-direction: column;
  /* 固定比例锁住高度,上下两块才能各占 50% */
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 18px;
  /* 玻璃本体:上缘带一点白(反光),越往下越透,背后的柔光能透出来 */
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.035) 42%,
    rgba(12, 12, 16, 0.34) 100%
  );
  backdrop-filter: blur(30px) saturate(165%);
  -webkit-backdrop-filter: blur(30px) saturate(165%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 10px 24px rgba(0, 0, 0, 0.32),
    0 30px 70px rgba(0, 0, 0, 0.45);
  transition:
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.32s ease,
    border-color 0.32s ease,
    background 0.32s ease;
}

.update-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 255, 255, 0.34);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.05) 42%,
    rgba(12, 12, 16, 0.3) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 16px 34px rgba(0, 0, 0, 0.36),
    0 50px 110px rgba(0, 0, 0, 0.6),
    0 0 70px rgba(118, 216, 255, 0.12);
}

/* ── 上 50%:图片(通铺到卡片边缘,和文字连成一体)────── */
.update-media {
  position: relative;
  flex: 0 0 50%;
  min-height: 0;
  overflow: hidden;
  background: #0e1015;
}

.update-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.update-card:hover .update-media img {
  transform: scale(1.08);
}

/* 没配图片的卡片:上半区给一个柔和占位渐变,避免整块死黑 */
.update-media.is-empty {
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(118, 216, 255, 0.12) 0%, rgba(118, 216, 255, 0) 62%),
    linear-gradient(180deg, #14161d 0%, #0e1015 100%);
}

/* 图片下缘渐隐,融进玻璃底色 —— 保持图文一体,不做硬切换 */
.update-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to bottom, rgba(3, 3, 5, 0) 0%, rgba(10, 10, 14, 0.55) 100%);
  pointer-events: none;
}

/* ── 下 50%:标题 + 简介(和图片同属一张卡)───────────── */
.update-body {
  flex: 0 0 50%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 18px 22px 22px;
}

.update-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
}

.update-date {
  color: var(--soft);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.update-title {
  margin: 0;
  color: var(--text);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.update-text {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.62;
  /* 简介最多 3 行,保证每张卡片下半个区域高度一致 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.update-link {
  margin-top: auto;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  opacity: 0.72;
  transition: opacity 0.2s ease;
}

.update-link:hover {
  opacity: 1;
}

/* ── 断点:与全站一致(960 / 640)────────────────────── */
@media (max-width: 960px) {
  .updates-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}

@media (max-width: 640px) {
  .updates-section {
    width: min(100% - 28px, 1240px);
  }

  .updates-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* 窄屏不再用固定比例,改成图片定高 */
  .update-card {
    aspect-ratio: auto;
  }

  .update-media {
    flex: 0 0 200px;
  }

  .update-body {
    flex: 1 1 auto;
  }
}