/* ==========================================================================
   Company Intro — 公司简介板块（业务体系上方）
   · 板块标题 + 左侧公司信息 + 右侧 4 个跳转卡片
   · 4 张卡片各挂一层 ShapeBlur（three.js shader）作为描边
   ========================================================================== */

.company-intro {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 620px at 82% 42%, rgba(20, 53, 123, 0.06), rgba(20, 53, 123, 0) 68%),
    linear-gradient(180deg, #ffffff 0%, #f7f9fd 100%);
}

.ci-inner {
  position: relative;
  z-index: 1;
}

/* ---------- 板块标题（与"业务体系""最新动态"同一套 section-title 语言） ---------- */
.company-intro .ci-head {
  margin-bottom: clamp(26px, 3.8vh, 46px);
}

.company-intro .ci-head .title {
  margin-bottom: clamp(8px, 1.2vh, 14px);
}

.company-intro .ci-head p {
  margin: 0;
  font-size: clamp(11px, 0.8vw, 14px);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #8b98ac;
}

/* ---------- 左侧：公司信息 ---------- */
.ci-en {
  margin: 0 0 10px;
  font-size: clamp(10px, 0.7vw, 13px);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.6;
  color: #8b98ac;
  text-transform: uppercase;
}

.ci-name {
  margin: 0 0 clamp(14px, 1.8vh, 20px);
  font-size: clamp(21px, 1.9vw, 36px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: #10203f;
}

/* 业务标签组 */
.ci-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(14px, 1.8vh, 22px);
}

.ci-tags span {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: clamp(12px, 0.82vw, 14px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #14357b;
  background: rgba(20, 53, 123, 0.07);
  border: 1px solid rgba(20, 53, 123, 0.14);
}

.ci-tags span.ci-tags__key {
  color: #ffffff;
  background: #14357b;
  border-color: #14357b;
}

/* 简介正文 */
.ci-desc {
  margin: 0 0 clamp(18px, 2.2vh, 30px);
  max-width: 60ch;
  font-size: clamp(13px, 0.92vw, 16px);
  line-height: 1.95;
  color: #58657a;
}

.ci-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(13px, 0.9vw, 15px);
  font-weight: 600;
}

.ci-more i {
  transition: transform 0.28s ease;
}

.ci-more:hover i {
  transform: translateX(4px);
}

/* ---------- 右侧：4 个跳转卡片 ---------- */
.ci-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 26px);
}

.ci-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.1vh, 14px);
  min-height: clamp(104px, 13.6vh, 150px);
  padding: clamp(14px, 1.5vh, 22px) 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(20, 53, 123, 0.06);
  box-shadow: 0 8px 24px -18px rgba(16, 32, 63, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

/* ShapeBlur 描边层：等比外扩，描边落在卡片边缘上 */
.ci-card__blur {
  position: absolute;
  left: -8%;
  right: -8%;
  top: -8%;
  bottom: -8%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s ease 0.2s;
}

.ci-card__blur canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.ci-card__blur.shape-blur--ready {
  opacity: 1;
}

.ci-card > svg,
.ci-card > .ci-card__label {
  position: relative;
  z-index: 1;
}

.ci-card:hover,
.ci-card:focus-visible {
  transform: translateY(-4px);
  background: #ffffff;
  border-color: rgba(20, 53, 123, 0.28);
  box-shadow: 0 18px 38px -22px rgba(16, 32, 63, 0.5);
  outline: none;
}

.ci-card svg {
  width: clamp(26px, 2.05vw, 38px);
  height: clamp(26px, 2.05vw, 38px);
  color: #14357b;
  transition: color 0.3s ease;
}

.ci-card:hover svg {
  color: #1f4fa8;
}

.ci-card__label {
  font-size: clamp(13px, 0.95vw, 16px);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #14357b;
  text-align: center;
  line-height: 1.4;
}

/* ---------- 窄屏 ---------- */
@media (max-width: 991.98px) {
  .ci-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 8px;
  }
  /* 移动端不跑 4 个 WebGL 上下文：卡片保留 CSS 边框，观感与性能兼顾 */
  .ci-card__blur {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .ci-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .ci-card {
    min-height: 92px;
  }
}

/* ==========================================================================
   入场动效：从右向左滑入（每次滚到该屏都重播）
   · 用 CSS animation 而非 transition —— 移除 .is-inview 时动画瞬间撤销、
     元素立刻回到初始态，重新加上就完整重播，不会像 transition 那样
     出现"反向过渡刚起步就被打断"的假播放。
   · 初始隐藏态只在 JS 就绪时挂上 .ci-motion，JS 失效则内容原样可见（不会白屏）
   ========================================================================== */
@keyframes ci-in-right {
  from {
    opacity: 0;
    -webkit-transform: translate3d(160px, 0, 0);
    transform: translate3d(160px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes ci-in-down {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -24px, 0);
    transform: translate3d(0, -24px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes ci-in-far {
  from {
    opacity: 0;
    -webkit-transform: translate3d(210px, 0, 0);
    transform: translate3d(210px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

/* 初始隐藏态 */
.company-intro.ci-motion .ci-head,
.company-intro.ci-motion .ci-en,
.company-intro.ci-motion .ci-name,
.company-intro.ci-motion .ci-tags,
.company-intro.ci-motion .ci-desc,
.company-intro.ci-motion .ci-more,
.company-intro.ci-motion .ci-card {
  opacity: 0;
}

/* 进入视口：逐项滑入 */
.company-intro.ci-motion.is-inview .ci-head {
  -webkit-animation: ci-in-down 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation: ci-in-down 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.company-intro.ci-motion.is-inview .ci-en {
  -webkit-animation: ci-in-right 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) 0.06s both;
  animation: ci-in-right 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) 0.06s both;
}
.company-intro.ci-motion.is-inview .ci-name {
  -webkit-animation: ci-in-right 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) 0.12s both;
  animation: ci-in-right 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) 0.12s both;
}
.company-intro.ci-motion.is-inview .ci-tags {
  -webkit-animation: ci-in-right 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) 0.18s both;
  animation: ci-in-right 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) 0.18s both;
}
.company-intro.ci-motion.is-inview .ci-desc {
  -webkit-animation: ci-in-right 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) 0.24s both;
  animation: ci-in-right 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) 0.24s both;
}
.company-intro.ci-motion.is-inview .ci-more {
  -webkit-animation: ci-in-right 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s both;
  animation: ci-in-right 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s both;
}
.company-intro.ci-motion.is-inview .ci-card:nth-child(1) {
  -webkit-animation: ci-in-far 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.22s both;
  animation: ci-in-far 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.22s both;
}
.company-intro.ci-motion.is-inview .ci-card:nth-child(2) {
  -webkit-animation: ci-in-far 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s both;
  animation: ci-in-far 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s both;
}
.company-intro.ci-motion.is-inview .ci-card:nth-child(3) {
  -webkit-animation: ci-in-far 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.38s both;
  animation: ci-in-far 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.38s both;
}
.company-intro.ci-motion.is-inview .ci-card:nth-child(4) {
  -webkit-animation: ci-in-far 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.46s both;
  animation: ci-in-far 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.46s both;
}

/* 尊重系统的"减少动态效果" */
@media (prefers-reduced-motion: reduce) {
  .company-intro.ci-motion .ci-head,
  .company-intro.ci-motion .ci-en,
  .company-intro.ci-motion .ci-name,
  .company-intro.ci-motion .ci-tags,
  .company-intro.ci-motion .ci-desc,
  .company-intro.ci-motion .ci-more,
  .company-intro.ci-motion .ci-card {
    opacity: 1 !important;
  }
  .company-intro.ci-motion.is-inview .ci-head,
  .company-intro.ci-motion.is-inview .ci-en,
  .company-intro.ci-motion.is-inview .ci-name,
  .company-intro.ci-motion.is-inview .ci-tags,
  .company-intro.ci-motion.is-inview .ci-desc,
  .company-intro.ci-motion.is-inview .ci-more,
  .company-intro.ci-motion.is-inview .ci-card {
    -webkit-animation: none !important;
    animation: none !important;
  }
}