/* 已加入生态 — 平面轮播（marquee）+ 悬停暂停 + 生态介绍浮层
   2026-09-03  与 yunling-ecosystem-marquee-20260903-en.js 配套使用 */

.yl-eco-section {
  --yl-eco-duration: 42s;
  --yl-eco-gap: 22px;
}

.yl-eco-section .section-header p {
  color: var(--yl-muted, #95a0a6);
}

/* ---------- 轮播视口 ---------- */
.yl-eco-viewport {
  position: relative;
  overflow: hidden;
  padding: 10px 0 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.yl-eco-track {
  display: flex;
  align-items: stretch;
  gap: var(--yl-eco-gap);
  width: max-content;
  will-change: transform;
  animation: yl-eco-scroll var(--yl-eco-duration) linear infinite;
}

@keyframes yl-eco-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - (var(--yl-eco-gap) / 2)), 0, 0); }
}

/* 鼠标悬停 / 键盘聚焦时暂停轮播 */
.yl-eco-viewport:hover .yl-eco-track,
.yl-eco-viewport:focus-within .yl-eco-track,
.yl-eco-viewport.is-paused .yl-eco-track {
  animation-play-state: paused;
}

/* ---------- 单个生态卡片 ---------- */
.yl-eco-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 208px;
  height: 108px;
  padding: 16px 20px;
  border-radius: 14px;
  background: rgba(244, 246, 247, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: transform .28s ease, box-shadow .28s ease,
              border-color .28s ease, background-color .28s ease;
}

.yl-eco-item:focus-visible {
  outline: 2px solid var(--yl-gold-bright, #d1ba8b);
  outline-offset: 3px;
}

.yl-eco-item:hover,
.yl-eco-item.is-active {
  transform: translateY(-6px);
  background: #fff;
  border-color: var(--yl-gold, #b9a47b);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.42),
              0 0 0 1px rgba(185, 164, 123, 0.45);
}

.yl-eco-logo {
  max-width: 100%;
  max-height: 66px;
  object-fit: contain;
  display: block;
  /* 素材背景多为纯白，正片叠底后与浅色底板自然融合 */
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
}

.yl-eco-item[data-eco="Kunpeng"],
.yl-eco-item[data-eco="Ascend"] {
  padding: 8px 12px;
}

.yl-eco-item[data-eco="Kunpeng"] .yl-eco-logo,
.yl-eco-item[data-eco="Ascend"] .yl-eco-logo {
  max-height: 88px;
  max-width: 98px;
  mix-blend-mode: normal;
}

.yl-eco-wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  pointer-events: none;
}

.yl-eco-wordmark .yl-eco-wm-cn {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #1a365d;
  line-height: 1.2;
}

.yl-eco-wordmark .yl-eco-wm-en {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #7c8894;
}

/* ---------- 生态介绍浮层 ---------- */
.yl-eco-pop {
  position: fixed;
  z-index: 2400;
  width: 340px;
  max-width: calc(100vw - 32px);
  padding: 18px 20px 20px;
  border-radius: 14px;
  background: rgba(20, 23, 25, 0.97);
  border: 1px solid var(--yl-line, #30363a);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
  color: var(--yl-silver, #d7dde0);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  pointer-events: none;
}

.yl-eco-pop.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.yl-eco-pop-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 700;
  color: var(--yl-gold-bright, #d1ba8b);
}

.yl-eco-pop-title span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--yl-quiet, #727d84);
}

.yl-eco-pop-desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--yl-muted, #95a0a6);
}

.yl-eco-pop::after {
  content: '';
  position: absolute;
  left: var(--yl-eco-arrow, 50%);
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: rgba(20, 23, 25, 0.97);
  border: 1px solid var(--yl-line, #30363a);
  transform: rotate(45deg);
}

.yl-eco-pop[data-place="top"]::after {
  bottom: -7px;
  border-top: 0;
  border-left: 0;
}

.yl-eco-pop[data-place="bottom"]::after {
  top: -7px;
  border-bottom: 0;
  border-right: 0;
}

/* ---------- 响应式 ---------- */
@media (max-width: 768px) {
  .yl-eco-section { --yl-eco-gap: 14px; --yl-eco-duration: 30s; }
  .yl-eco-item { width: 152px; height: 84px; padding: 12px 14px; border-radius: 12px; }
  .yl-eco-logo { max-height: 48px; }
  .yl-eco-item[data-eco="Kunpeng"],
  .yl-eco-item[data-eco="Ascend"] { padding: 6px 10px; }
  .yl-eco-item[data-eco="Kunpeng"] .yl-eco-logo,
  .yl-eco-item[data-eco="Ascend"] .yl-eco-logo { max-height: 64px; max-width: 72px; }
  .yl-eco-wordmark .yl-eco-wm-cn { font-size: 17px; }
  .yl-eco-pop { width: 300px; padding: 14px 16px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .yl-eco-track { animation: none; }
  .yl-eco-viewport { overflow-x: auto; }
}

.yl-eco-item[data-eco="Pengteng"] .yl-eco-logo,
.yl-eco-item[data-eco="KylinSoft"] .yl-eco-logo {
  mix-blend-mode: normal;
}