/* ==========================================================================
   首页 · 品牌影像区块改造（2026-10-29）
   左栏「认识暖流科技 + 宣传片」保持不动，右栏改为四段大事记轮播
   —— 只替换 index.html 的品牌影像区块右侧，不涉及其它页面
   ========================================================================== */

/* ---------- 1. 两栏比例微调，给图更多宽度 ---------- */
body.v5-site .wf-film-layout {
  grid-template-columns: .78fr 1.30fr;
  gap: 40px;
  padding: 36px;
  align-items: center;
}

/* ---------- 2. 轮播容器：深蓝渐变，去掉原来右下角的橙色块 ----------
   原底色 135deg 末端是 #f18c1d，会把图里的橙色高亮全部吃掉；
   按 VI「橙色只做点缀、不铺面」改为深蓝三段，橙色只留在图内与交互态 */
body.v5-site .bf-carousel {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #0e1c42 0%, #142b6b 55%, #1b3889 100%);
  box-shadow: 0 26px 64px -44px rgba(11,26,68, .6);
  isolation: isolate;
}

/* 细网格肌理，与原封面同源，弱化一层 */
body.v5-site .bf-carousel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background:
    repeating-linear-gradient(30deg, transparent 0 40px, rgba(255, 255, 255, .05) 41px 43px, transparent 44px 90px),
    radial-gradient(circle at 74% 22%, rgba(255, 255, 255, .14), transparent 42%);
  z-index: 0;
}

/* ---------- 3. 幻灯片堆叠（grid 同格，高度取最高那张，切换不跳动） ---------- */
body.v5-site .bf-track {
  position: relative;
  z-index: 1;
  display: grid;
}

body.v5-site .bf-slide {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* 整卡即一张图：比例 3:2，文字压在下部。内容更高时由 min-height 与文字自身撑开 */
  aspect-ratio: 1.5;
  min-height: 430px;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .5s ease, transform .5s ease, visibility .5s;
}

body.v5-site .bf-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* ---------- 3.5 底图 + 图上文字 ----------
   每个 slide 是一张整幅底图，文字压在下部。
   换正式图时把 <img> 的 src 换成 3:2 的图，并删掉 data-pending 属性即可（删掉后自动切成 cover 铺满）。 */
body.v5-site .bf-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* 图未就绪：现有时间轴为 2.44:1 宽幅线稿，先按 contain 贴顶，下方留白由深蓝底与蒙版接住 */
body.v5-site .bf-bg[data-pending] {
  object-fit: contain;
  object-position: center top;
}

/* 可读性蒙版：顶部轻压、中部放开、下部压深，保证文字在任何底图上都读得清 */
body.v5-site .bf-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(6, 15, 40, .30) 0%,
    rgba(6, 15, 40, .04) 22%,
    rgba(6, 15, 40, .16) 38%,
    rgba(6, 15, 40, .62) 52%,
    rgba(6, 15, 40, .88) 72%,
    rgba(6, 15, 40, .96) 100%);
}

/* ---------- 4. 文字区：压在图上，底部让出切换条 ---------- */
body.v5-site .bf-body {
  position: relative;
  z-index: 2;
  padding: 0 32px 66px;
}

body.v5-site .bf-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

body.v5-site .bf-years {
  font-family: "Source Han Sans SC", "Noto Sans SC", system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .1em;
  color: #F5A24A;
  white-space: nowrap;
}

body.v5-site .bf-tag {
  font-size: 11.5px;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .48);
  white-space: nowrap;
}

body.v5-site .bf-title {
  margin: 10px 0 9px;
  font-size: clamp(20px, 1.9vw, 25px);
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: .01em;
  color: #FFFFFF;
}

body.v5-site .bf-desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.88;
  color: rgba(255, 255, 255, .66);
}

/* ---------- 5. 底部四项切换条：压在图的底边上 ---------- */
body.v5-site .bf-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  border-top: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(180deg, rgba(6, 15, 40, .34) 0%, rgba(6, 15, 40, .74) 100%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

body.v5-site .bf-dot {
  position: relative;
  flex: 1 1 0;
  padding: 15px 4px 15px;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: "Source Han Sans SC", "Noto Sans SC", system-ui, sans-serif;
  font-size: 11.5px;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .4);
  transition: color .3s ease;
}

body.v5-site .bf-dot + .bf-dot {
  border-left: 1px solid rgba(255, 255, 255, .07);
}

body.v5-site .bf-dot:hover {
  color: rgba(255, 255, 255, .74);
}

body.v5-site .bf-dot.is-active {
  color: #F5A24A;
}

body.v5-site .bf-dot:focus-visible {
  outline: 2px solid #F08300;
  outline-offset: -3px;
}

/* 自动播放进度条：只在当前项上走一遍 */
body.v5-site .bf-dot i {
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 2px;
  background: #F08300;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
}

body.v5-site .bf-dot.is-active i {
  opacity: 1;
  animation: bf-progress var(--bf-dur, 7000ms) linear forwards;
}

@keyframes bf-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* 悬停 / 聚焦 / 切后台时暂停进度 */
body.v5-site .bf-carousel.is-paused .bf-dot.is-active i {
  animation-play-state: paused;
}

/* ---------- 6. 窄屏 ---------- */
@media (max-width: 980px) {
  body.v5-site .wf-film-layout {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 24px;
  }
  body.v5-site .bf-slide { aspect-ratio: 1.15; min-height: 470px; }
  body.v5-site .bf-body { padding: 0 24px 62px; }
  body.v5-site .bf-desc { font-size: 13px; }
  body.v5-site .bf-dot { font-size: 11px; letter-spacing: .06em; }
}

@media (max-width: 560px) {
  body.v5-site .bf-slide { aspect-ratio: .92; min-height: 480px; }
  body.v5-site .bf-body { padding: 0 18px 58px; }
  body.v5-site .bf-meta { gap: 8px; }
  body.v5-site .bf-years,
  body.v5-site .bf-tag { font-size: 10.5px; }
}

/* 动效敏感用户：不做位移动画 */
@media (prefers-reduced-motion: reduce) {
  body.v5-site .bf-slide { transition: opacity .2s ease; transform: none; }
  body.v5-site .bf-dot.is-active i { animation: none; opacity: .45; transform: scaleX(1); }
}