/* ============================================================
   区块图片铺底 section-bg.css
   白底空旷的区块，底下铺一张实拍图，用白色渐变蒙层保证文字可读
   ============================================================ */

.page-section.sec-photo {
  position: relative;
  background-color: #fff;
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  isolation: isolate;
}

.page-section.sec-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(96deg,
      #ffffff 0%,
      #ffffff 40%,
      rgba(255, 255, 255, .92) 52%,
      rgba(255, 255, 255, .52) 68%,
      rgba(255, 255, 255, .18) 86%,
      rgba(255, 255, 255, .06) 100%);
}

.page-section.sec-photo > .container {
  position: relative;
  z-index: 1;
}


/* ---------- 上下白渐隐：相邻两个图片区块相接时不再像两张图硬拼 ---------- */
.page-section.sec-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, .7) 12%, rgba(255, 255, 255, 0) 28%),
    linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, .7) 12%, rgba(255, 255, 255, 0) 28%);
}


/* ---------- 变体：极淡纹理，只让背景不空、不与邻块抢 ---------- */
.page-section.sec-photo.is-tint::before {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, .95) 0%,
      rgba(255, 255, 255, .91) 50%,
      rgba(255, 255, 255, .95) 100%);
}

/* ---------- 各区块配图 ---------- */
.page-section.sec-photo.sec-timeline {
  background-image: url("../images/bg-cleanroom.jpg");
  background-position: 76% 55%;
}

.page-section.sec-photo.sec-honor {
  background-image: url("../images/hero-quality.jpg");
  background-position: 70% 40%;
}

.page-section.sec-photo.sec-base {
  background-image: url("../images/hero-tower.jpg");
  background-position: left center;
}

.page-section.sec-photo.sec-rd {
  background-image: url("../images/lab-reagent.jpg");
  background-position: 74% 45%;
}

.page-section.sec-photo.sec-process {
  background-image: url("../images/lab-glass.jpg");
  background-position: center 45%;
}


/* ---------- 变体：图在左，白在右 ---------- */
.page-section.sec-photo.is-left::before {
  background: linear-gradient(264deg,
      #ffffff 0%,
      #ffffff 34%,
      rgba(255, 255, 255, .9) 48%,
      rgba(255, 255, 255, .5) 64%,
      rgba(255, 255, 255, .18) 82%,
      rgba(255, 255, 255, .06) 100%);
}

/* ---------- 变体：整块淡图通铺 ---------- */
.page-section.sec-photo.is-full {
  background-position: center 45%;
}
.page-section.sec-photo.is-full::before {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, .9) 0%,
      rgba(255, 255, 255, .82) 55%,
      rgba(255, 255, 255, .88) 100%);
}


/* ---------- 其它页面 ---------- */
.page-section.sec-photo.sec-detect {
  background-image: url("../images/equip-lab.jpg");
}

.page-section.sec-photo.sec-qc {
  background-image: url("../images/lab-rack.jpg");
}

.page-section.sec-photo.sec-contact {
  background-image: url("../images/hero-office.jpg");
}

.page-section.sec-photo.sec-news {
  background-image: url("../images/bg-line.jpg");
  background-position: center 40%;
}

.page-section.sec-photo.sec-jobs {
  background-image: url("../images/lab-micro.jpg");
}


/* ---------- 变体：文字密集的列表页，图往下压 ---------- */
.page-section.sec-photo.is-soft {
  background-position: center bottom;
}
.page-section.sec-photo.is-soft::before {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, .97) 0%,
      rgba(255, 255, 255, .95) 55%,
      rgba(255, 255, 255, .88) 80%,
      rgba(255, 255, 255, .8) 100%);
}


/* ---------- 产品详情页 ---------- */
.page-detail .pd-detail {
  position: relative;
  background-color: #fff;
  background-image: url("../images/page-soft.jpg");
  background-size: cover;
  background-position: center 55%;
  background-repeat: no-repeat;
  isolation: isolate;
}
.page-detail .pd-detail::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, .94) 0%,
      rgba(255, 255, 255, .88) 55%,
      rgba(255, 255, 255, .82) 100%);
}
.page-detail .pd-detail > .container {
  position: relative;
  z-index: 1;
}

/* 窄屏：蒙层整体加重，图片退到后面 */
@media (max-width: 900px) {
  .page-section.sec-photo::before,
  .page-section.sec-photo.is-full::before,
  .page-section.sec-photo.is-soft::before,
  .page-section.sec-photo.is-left::before {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, .96) 0%,
        rgba(255, 255, 255, .93) 45%,
        rgba(255, 255, 255, .88) 100%);
  }
  .page-section.sec-photo,
  .page-section.sec-photo.is-left,
  .page-section.sec-photo.is-full,
  .page-section.sec-photo.is-soft {
    background-position: center top;
  }
  .page-detail .pd-detail::before {
    background: rgba(255, 255, 255, .93);
  }
}

/* ============================================================
   数据条：换掉原来的蓝紫渐变，改成实拍图 + 近黑蒙层
   ============================================================ */
.stats {
  background-color: #0d1015;
  background-image: url("../images/bg-film.jpg");
  background-size: cover;
  background-position: center 45%;
  background-repeat: no-repeat;
}

.stats::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 12, 15, .74) 0%, rgba(10, 12, 15, .6) 48%, rgba(10, 12, 15, .8) 100%),
    linear-gradient(90deg, rgba(10, 12, 15, .58), rgba(10, 12, 15, .3));
  pointer-events: none;
}

.stats::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 12% 0%, rgba(77, 216, 232, .1), transparent 62%);
  filter: none;
  transform: none;
  animation: none;
  pointer-events: none;
}

.stat {
  border-right-color: rgba(255, 255, 255, .13);
}
.stat:hover {
  background: rgba(255, 255, 255, .05);
}
.stat strong {
  font-weight: 800;
  text-shadow: 0 2px 26px rgba(0, 0, 0, .5);
}
.stat:hover strong {
  text-shadow: 0 2px 30px rgba(77, 216, 232, .35);
}
.stat .unit {
  color: rgba(255, 255, 255, .62);
}
.stat > span {
  color: rgba(255, 255, 255, .58);
}

/* ---------- 数据条：鼠标移上去放大 ---------- */
.stat {
  position: relative;
  transition: background .45s ease, transform .55s cubic-bezier(.19, 1, .22, 1);
}

.stat strong {
  transition: transform .55s cubic-bezier(.19, 1, .22, 1), text-shadow .45s ease;
  transform-origin: center bottom;
  will-change: transform;
}

.stat > span::before {
  transition: width .5s cubic-bezier(.19, 1, .22, 1), background .35s ease;
}

.stat > span {
  transition: color .4s ease;
}

/* 底部一层背光 */
.stat::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  background: radial-gradient(65% 85% at 50% 100%, rgba(77, 216, 232, .18), transparent 70%);
  transition: opacity .5s ease;
  pointer-events: none;
}

.stat > strong,
.stat > span {
  position: relative;
  z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
  .stat:hover {
    background: rgba(255, 255, 255, .05);
    transform: translateY(-6px);
  }
  .stat:hover strong {
    transform: scale(1.16);
  }
  .stat:hover > span {
    color: rgba(255, 255, 255, .9);
  }
  .stat:hover > span::before {
    width: 38px;
    background: #7fe9f5;
  }
  .stat:hover::after {
    opacity: 1;
  }
}