/* ============ 基础样式（保持你原有页面风格） ============ */
body {
  font-family: 'Noto Sans', sans-serif;
}

.gradient-blue-text {
  font-size: 3rem;
  font-weight: bold;
  background: linear-gradient(90deg, #385492, #babbbe);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.publication-title {
  font-size: 5rem;
  margin: .5rem 0;
  font-family: 'Google Sans', sans-serif;
}

.footer .icon-link {
  font-size: 25px;
  color: #000;
}

.link-block a {
  margin: 5px 0;
}

.dnerf {
  font-variant: small-caps;
}

.newrobot {
  color: #1b9e77
}

.newenv {
  color: #d95f02
}

.newobjective {
  color: #7570b3
}

.newgoal {
  color: #e6ab02
}

.vint {
  color: #1b9e77
}

.baseline {
  color: #d95f02
}

.oraltalk {
  color: #ff0000;
  font-weight: bold;
}

.teaser {
  font-family: 'Google Sans', sans-serif;
  margin: 0;
  margin-bottom: 80px;
}

.teaser .hero-body {
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.publication-venue {
  color: #555;
  width: fit-content;
  font-weight: bold;
  margin: 0 auto;
  text-align: center;
}

.publication-awards {
  color: #ff3860;
  width: fit-content;
  font-weight: bolder;
}

.publication-authors {
  font-family: 'Google Sans', sans-serif;
}

.publication-authors a {
  color: hsl(204, 86%, 53%) !important;
}

.publication-authors a:hover {
  text-decoration: underline;
}

.publication-video {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  border-radius: 10px !important;
}

.publication-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.publication-body img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ============ 通用轮播容器（不含 3D 效果） ============ */
.results-carousel {
  width: 95%;
  margin: 0 auto;
}

.results-carousel .item {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.results-carousel .slide-frame {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ============ 字幕条：独立于轮播，不遮挡视频 ============ */
.caption-bar {
  text-align: center;
  margin-bottom: 12px;
}

#video-caption {
  font-size: 1.2rem;
  font-weight: 600;
}

/* ============ 主轮播（#main-carousel）3D + 放大 + 统一高度 ============ */
/* 可调参数 */
/* ===== 可调参数 ===== */
:root {
  --slide-h: clamp(220px, 52vh, 520px);
  /* 每张卡片的基准高度 */
  --center-scale: 1.34;
  /* 中心卡片放大比例 */
  --side-tilt: 22deg;
  /* 两侧倾斜角 */
  --gap-top: 10px;
  /* 字幕与轮播间距 */
  --gap-bottom: 24px;
  /* 额外的安全间距（点点/箭头等） */

  /* 放大导致的“多出来的高度” */
  --scale-extra: calc((var(--center-scale) - 1) * var(--slide-h));
}

/* 允许溢出（露出两侧卡片），同时按放大量预留底部空间 */
#main-carousel.slick-initialized .slick-list {
  overflow: visible;
  padding-top: var(--gap-top);
  /* 关键：放大溢出的高度 + 安全间距 */
  padding-bottom: calc(var(--scale-extra) + var(--gap-bottom));
}

/* 保险：下面各 section 建立新层叠上下文，万一空间不够也不会被遮挡 */
section.section {
  position: relative;
  z-index: 1;
}

/* 3D 透视与垂直居中 */
#main-carousel {
  perspective: 1600px;
}

#main-carousel .slick-track {
  display: flex;
  align-items: center;
}

/* 去掉多余的内外边距，避免出现“白色大框” */
#main-carousel .slick-slide,
#main-carousel .item {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent;
}

/* 卡片与视频：统一高度，宽度按比例自适应 */
#main-carousel .item {
  display: flex !important;
  justify-content: center;
}

#main-carousel .slide-frame {
  height: var(--slide-h);
  display: flex;
  align-items: center;
  justify-content: center;
}

#main-carousel .slide-frame video {
  height: 100%;
  /* 高度一致 */
  width: auto;
  /* 宽度随比例自适应 */
  display: block;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  object-fit: contain;
  /* 保持画面不裁剪；若想铺满可改 cover */
}

/* 默认（侧边）状态：缩小 + 轻微模糊/降亮 */
#main-carousel .slick-slide {
  will-change: transform;
  opacity: .55;
  filter: blur(2px) brightness(.9);
  transform: scale(.82) rotateY(0deg);
  transition: transform .45s, filter .45s, opacity .45s;
}

/* 左右两侧：不同方向的 3D 倾斜（由 JS 加 .is-left / .is-right） */
#main-carousel .slick-slide.is-left {
  transform-origin: right center;
  transform: scale(.82) rotateY(var(--side-tilt));
}

#main-carousel .slick-slide.is-right {
  transform-origin: left center;
  transform: scale(.82) rotateY(calc(-1 * var(--side-tilt)));
}

/* 中心卡片：更大更清晰；从顶部向下放大，避免顶到字幕 */
#main-carousel .slick-current.slick-center {
  opacity: 1;
  filter: none;
  transform: scale(var(--center-scale)) rotateY(0deg);
  transform-origin: center top;
  /* 放大主要向下扩展 */
  z-index: 2;
}

/* 点点位置稍微靠近视频 */
#main-carousel .slick-dots {
  margin-top: 12px;
}

/* ===================== 默认状态下，左右视频虚化并缩小 ===================== */
#results-carousel .slick-slide.is-left,
#results-carousel .slick-slide.is-right {
  opacity: 0.5;
  /* 左右视频透明度 */
  filter: blur(5px);
  /* 左右视频模糊 */
  transform: scale(0.8);
  /* 左右视频缩小 */
  transition: opacity 0.3s, filter 0.3s, transform 0.3s;
  /* 平滑过渡 */
}

/* ===================== 当前居中的视频保持清晰和较大 ===================== */
#results-carousel .slick-current.slick-center {
  opacity: 1;
  /* 清晰 */
  filter: none;
  /* 无模糊 */
  transform: scale(1);
  /* 正常大小 */
  z-index: 2;
  /* 确保居中视频在最上面 */
}

/* ===================== 为轮播项设置一些基础样式 ===================== */
#results-carousel .slick-slide {
  transition: opacity 0.3s, filter 0.3s, transform 0.3s;
  /* 平滑过渡 */
  margin: 0 15px;
  /* 添加左右间隔，根据需要调整间隔 */
}

/* ===================== 设置视频容器的最大宽度，使其适应居中的效果 ===================== */
#results-carousel {
  max-height: 500px;
  /* 根据需要调整高度 */
  width: 100%;
  /* 保持轮播宽度 */
  margin: 0 auto;
  /* 居中显示轮播 */
  overflow: hidden;
  /* 确保视频容器溢出部分不会显示 */
}

/* ===================== 视频宽度适应容器，避免溢出 ===================== */
#results-carousel .slick-slide video {
  object-fit: cover;
  /* 保持视频比例并填充容器 */
  width: 100%;
  /* 视频宽度适应容器 */
  height: 100%;
  /* 高度填满容器 */
  max-height: 400px;
  /* 根据需要调整最大高度 */
  display: block;
  /* 保证视频正常显示 */
  border-radius: 14px;
  /* 圆角 */
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  /* 阴影 */
}

/* 确保所有轮播项目应用 transform */
#results-carousel .slick-slide {
  transition: opacity 0.3s, filter 0.3s, transform 0.3s;
  /* 平滑过渡 */
  margin: 0 15px;
  /* 添加左右间隔 */
}

#results-carousel .slick-slide.is-left,
#results-carousel .slick-slide.is-right {
  opacity: 0.5;
  /* 左右视频透明度 */
  filter: blur(5px);
  /* 左右视频模糊 */
  transform: scale(0.8);
  /* 左右视频缩小 */
}

#results-carousel .slick-current.slick-center {
  opacity: 1;
  /* 当前居中的视频清晰 */
  filter: none;
  /* 无模糊 */
  transform: scale(1);
  /* 正常大小 */
  z-index: 1;
  /* 确保居中视频在最上面 */
}

#results-carousel .slick-slide.is-left,
#results-carousel .slick-slide.is-right {
  opacity: 1;
  /* 保持透明度为 1 */
  filter: none;
  /* 移除模糊效果 */
  transform: scale(1);
  /* 保持正常大小 */
}


#results-carousel {
  max-height: 500px;
  width: 100%;
  margin: 0 auto;
  overflow: visible;
  /* 保证箭头不会被裁剪 */
}

.slick-prev,
.slick-next {
  z-index: 2;
  /* 确保箭头位于轮播的上层 */
}

/* —— 可调参数 —— */
:root {
  --cap-max-w: 920px;
  /* 字幕最大宽度 */
  --cap-pad-x: 18px;
  /* 内边距：左右 */
  --cap-pad-y: 10px;
  /* 内边距：上下 */
  --cap-radius: 14px;
  /* 圆角 */
  --cap-blur: 8px;
  /* 背景模糊强度 */
  --cap-shadow: 0 6px 24px rgba(0, 0, 0, .12);
  --cap-fs: clamp(14px, 1.6vw, 18px);
  /* 自适应字号 */
}

/* 暗色模式优化 */
@media (prefers-color-scheme: dark) {
  :root {
    --cap-shadow: 0 6px 24px rgba(0, 0, 0, .35);
  }
}

/* 字幕容器 */
.caption-bar {
  display: flex;
  justify-content: center;
  padding: 8px 0 14px;
}

/* 字幕主体 */
#results-caption,
#video-caption {
  /* 让两个轮播都能用到这套样式（任选其一/都可） */
  max-width: var(--cap-max-w);
  width: min(92vw, var(--cap-max-w));
  margin: 0;
  padding: var(--cap-pad-y) var(--cap-pad-x);
  border-radius: var(--cap-radius);
  font-size: var(--cap-fs);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .2px;
  text-align: center;

  /* 玻璃拟态 + 渐变遮罩，既显眼又不压画面 */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .64))
    /* 亮色基底 */
  ;
  backdrop-filter: blur(var(--cap-blur));
  -webkit-backdrop-filter: blur(var(--cap-blur));
  box-shadow: var(--cap-shadow);
  color: #1c1d21;

  /* 超长文本友好：多行优雅截断（最多3行） */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;

  /* 轻微过渡，切换时更柔和 */
  transition: transform .24s ease, opacity .24s ease, box-shadow .24s ease;
}

/* 暗色模式下的底色与文字对比 */
@media (prefers-color-scheme: dark) {

  #results-caption,
  #video-caption {
    background:
      linear-gradient(180deg, rgba(22, 22, 26, .72), rgba(22, 22, 26, .58));
    color: #f2f3f5;
  }
}

/* 当字幕更新时的微动画（见下方 JS 会加这个类） */
.caption-pop {
  animation: cap-pop .3s ease both;
}

@keyframes cap-pop {
  0% {
    transform: translateY(6px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 小尺寸优化 */
@media (max-width: 480px) {
  :root {
    --cap-pad-x: 14px;
    --cap-pad-y: 8px;
    --cap-radius: 12px;
  }
}