/* ============================================================
   首页样式优化 + 滚动入场动画  (home.css)
   依赖：index.css（基础样式）/ scroll-animate.js（动画引擎）
   ============================================================ */

/* ---------------- 滚动入场动画基础 ---------------- */
.anim {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity .8s cubic-bezier(.22, .61, .36, 1),
              transform .8s cubic-bezier(.22, .61, .36, 1);
}
.anim-fade-up    { transform: translateY(48px); }
.anim-fade-down  { transform: translateY(-48px); }
.anim-fade-left  { transform: translateX(64px); }
.anim-fade-right { transform: translateX(-64px); }
.anim-zoom-in    { transform: scale(.86); }
.anim-fade       { transform: none; }

.anim.in-view { opacity: 1; transform: none; }

/* 子元素错峰出现（父级进入视口后） */
.anim-stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}
.anim-stagger.in-view > * { opacity: 1; transform: none; }
.anim-stagger.in-view > *:nth-child(1) { transition-delay: .05s; }
.anim-stagger.in-view > *:nth-child(2) { transition-delay: .12s; }
.anim-stagger.in-view > *:nth-child(3) { transition-delay: .19s; }
.anim-stagger.in-view > *:nth-child(4) { transition-delay: .26s; }
.anim-stagger.in-view > *:nth-child(5) { transition-delay: .33s; }
.anim-stagger.in-view > *:nth-child(6) { transition-delay: .40s; }
.anim-stagger.in-view > *:nth-child(7) { transition-delay: .47s; }
.anim-stagger.in-view > *:nth-child(8) { transition-delay: .54s; }

@media (prefers-reduced-motion: reduce) {
  .anim,
  .anim-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------------- 区块标题渐变装饰 ---------------- */
.h-title {
  position: relative;
  padding-bottom: 14px;
}
.h-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 56px;
  height: 4px;
  border-radius: 4px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #6a8bff, #8a5cff);
}

/* ---------------- 核心优势：卡片化 ---------------- */
section.py-12.mx-auto.mt-8 .flex {
  width: auto !important;
  max-width: 1100px;
  margin: 0 auto;
  gap: 24px;
  align-items: center;
}
.youshi-item > div {
  margin-bottom: 20px;
  padding: 24px 22px;
  border: 1px solid #eef1f6;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(40, 80, 200, .05);
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.youshi-item > div:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 34px rgba(40, 80, 200, .14);
  background: linear-gradient(180deg, #f5f8ff, #ffffff);
}
.youshi-item h3 { font-size: 19px; }
.youshi-item p { white-space: normal; line-height: 1.9; }
.adv-img {
  display: flex;
  align-items: center;
  justify-content: center;
}
.adv-img img { max-width: 100%; height: auto; }

/* ---------------- 创建不费脑（横向手风琴） ---------------- */
.lc-acc {
  display: flex;
  gap: 16px;
  height: 460px;
  max-width: 1180px;
  margin: 10px auto 0;
}
.lc-item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  border: 1px solid #e6ebf2;
  box-shadow: 0 6px 18px rgba(31, 64, 135, 0.05);
  transition: flex-grow .5s cubic-bezier(.4, 0, .2, 1), box-shadow .3s ease, border-color .3s ease;
}
.lc-item.active {
  border-color: #3b82f6;
  box-shadow: 0 16px 38px rgba(59, 130, 246, 0.18);
}

/* 收起态：竖向标题标签 */
.lc-head {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px 8px;
  background: linear-gradient(180deg, #f5f9ff 0%, #eaf2ff 100%);
  border: 0;
  width: 100%;
  font: inherit;
  color: #1f2937;
  cursor: pointer;
  opacity: 1;
  transition: opacity .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.lc-num {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  color: #fff;
  background: linear-gradient(135deg, #60a5fa, #2563eb);
  transition: background .3s ease, transform .3s ease;
}
.lc-vtitle {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 6px;
  font-size: 20px;
  font-weight: 700;
  color: #1f3a6e;
  white-space: nowrap;
}
.lc-item.active .lc-num { background: linear-gradient(135deg, #f97316, #ea580c); }
.lc-item:hover .lc-num { transform: scale(1.06); }

/* 展开态：正文内容 */
.lc-body {
  position: absolute;
  inset: 0;
  padding: 30px 30px 26px;
  overflow-y: auto;
  opacity: 0;
  transition: opacity .35s ease .05s;
}
.lc-body-inner { height: 100%; }
.lc-body-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid #eef1f6;
}
.lc-body-head h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  color: #111827;
}
.lc-body-head p {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: #9aa3b2;
}
.lc-detail { list-style: none; margin: 0; padding: 0; }
.lc-detail li {
  position: relative;
  padding: 13px 0 13px 22px;
  border-top: 1px dashed #eef1f6;
}
.lc-detail li:first-child { border-top: 0; }
.lc-detail li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 22px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, .12);
}
.lc-detail h4 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: #1f2937;
}
.lc-detail p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: #6b7280;
}

/* 横向手风琴交互 */
/* 1) 未悬停容器：只有 .active 项展开、显示正文、隐藏竖排标题 */
.lc-acc:not(:hover) .lc-item.active { flex-grow: 3.8; }
.lc-acc:not(:hover) .lc-item.active .lc-body { opacity: 1; }
.lc-acc:not(:hover) .lc-item.active .lc-head { opacity: 0; pointer-events: none; }
/* 2) 悬停容器：所有项一律收窄为相同收起态（仅竖排标题），只有被悬停的那栏展开 */
.lc-acc:hover .lc-item { flex-grow: .62; }
.lc-acc:hover .lc-item .lc-body { opacity: 0; }
.lc-acc:hover .lc-item .lc-head { opacity: 1; }
.lc-acc:hover .lc-item:hover { flex-grow: 3.8; }
.lc-acc:hover .lc-item:hover .lc-body { opacity: 1; }
.lc-acc:hover .lc-item:hover .lc-head { opacity: 0; pointer-events: none; }

/* 平板 */
@media (max-width: 900px) {
  .lc-acc { height: 400px; }
}
/* 手机：改为竖向堆叠，标题与正文常显 */
@media (max-width: 640px) {
  .lc-acc {
    flex-direction: column;
    height: auto;
    gap: 14px;
  }
  .lc-item {
    flex: none;
    min-height: 60px;
    overflow: visible;
  }
  .lc-head {
    position: relative;
    inset: auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    padding: 16px 18px;
    opacity: 1 !important;
    background: linear-gradient(135deg, #f5f9ff, #eaf2ff);
  }
  .lc-vtitle {
    writing-mode: horizontal-tb;
    letter-spacing: 2px;
    font-size: 17px;
  }
  .lc-body {
    position: relative;
    inset: auto;
    opacity: 1 !important;
    padding: 4px 18px 18px;
    overflow: visible;
  }
  .lc-acc:hover .lc-item,
  .lc-acc:hover .lc-item:hover { flex-grow: 1; }
}

/* ---------------- 活动展示 响应式 ---------------- */
.activity-show {
  height: auto !important;
  padding: 70px 0 80px !important;
}
.active-box,
.active-intro {
  width: 100% !important;
  max-width: 1180px;
  height: auto !important;
  margin: 0 auto !important;
}
.active-intro {
  align-items: stretch;
  gap: 0;
}
.active-left {
  flex: 1 1 380px !important;
  border-radius: 16px 0 0 16px;
}
.active-right {
  flex: 1 1 380px !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 16px 16px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.active-right .activity-ruuning-box { margin: 30px auto; }

/* ---------------- vote-plat / data-box 去固定高度 ---------------- */
.vote-plat {
  height: auto !important;
  min-height: 280px;
  padding: 70px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.vote-plat h2 { padding-top: 0 !important; }
.data-box {
  height: auto !important;
  padding: 70px 0 !important;
  min-height: auto !important;
}

/* 数据卡片：响应式 + 悬浮 */
.data-intro-box ul {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}
.data-intro-box ul li {
  width: 23.5% !important;
  max-width: 250px;
  transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
}
.data-intro-box ul li:hover { transform: translateY(-8px); }
.data-intro-box ul li p:first-child {
  padding-top: 46px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
}

/* 数据卡片错峰（依赖父级 .in-view） */
.data-intro-box ul li {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .5s ease, transform .5s ease, box-shadow .35s ease, background .35s ease;
}
.data-intro-box ul.in-view li { opacity: 1; transform: none; }
.data-intro-box ul.in-view li:nth-child(1) { transition-delay: .04s; }
.data-intro-box ul.in-view li:nth-child(2) { transition-delay: .10s; }
.data-intro-box ul.in-view li:nth-child(3) { transition-delay: .16s; }
.data-intro-box ul.in-view li:nth-child(4) { transition-delay: .22s; }
.data-intro-box ul.in-view li:nth-child(5) { transition-delay: .28s; }
.data-intro-box ul.in-view li:nth-child(6) { transition-delay: .34s; }
.data-intro-box ul.in-view li:nth-child(7) { transition-delay: .40s; }
.data-intro-box ul.in-view li:nth-child(8) { transition-delay: .46s; }

/* ---------------- 通用卡片悬浮（热点/行业资讯已含，这里补强） ---------------- */
.news-list {
  transition: box-shadow .3s ease, transform .3s ease;
  box-shadow: 0 8px 24px rgba(40, 80, 200, .06);
}
.news-list:hover {
  box-shadow: 0 18px 40px rgba(40, 80, 200, .12);
  transform: translateY(-3px);
}

/* ---------------- 移动端适配 ---------------- */
@media (max-width: 900px) {
  .active-intro { flex-direction: column; }
  .active-left { border-radius: 16px 16px 0 0; }
  .active-right { border-radius: 0 0 16px 16px; }
  .data-intro-box ul li { width: 46% !important; }
}
@media (max-width: 560px) {
  .data-intro-box ul li { width: 100% !important; max-width: 320px; }
  .active-left,
  .active-right { flex: 1 1 100% !important; }
}

/* ---------------- 一站式投票评选活动平台（内容扩充） ---------------- */
.vp-inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}
.vp-eyebrow {
  display: inline-block;
  margin: 0 auto 10px;
  padding: 4px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #fff;
  background: linear-gradient(90deg, #259af7, #3a58f3);
  box-shadow: 0 6px 16px rgba(37, 154, 247, .25);
}
.vp-title {
  font-size: 24px;
  font-weight: 700;
  color: #1f2d3d;
  margin-bottom: 8px;
}
.vp-desc {
  max-width: 640px;
  margin: 0 auto 36px;
  font-size: 15px;
  line-height: 1.7;
  color: #6b7785;
}

/* 投票模式卡片网格 */
.vp-modes {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.vp-mode {
  background: #fff;
  border: 1px solid #eef1f5;
  border-radius: 16px;
  padding: 26px 20px;
  text-align: center;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.vp-mode:hover {
  transform: translateY(-6px);
  border-color: #cfe6ff;
  box-shadow: 0 16px 32px rgba(37, 154, 247, .15);
}
.vp-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  margin-bottom: 14px;
  color: #fff;
  background: linear-gradient(135deg, #259af7, #4fb6ff);
  box-shadow: 0 8px 18px rgba(37, 154, 247, .28);
  transition: transform .3s ease, background .3s ease;
}
.vp-ico svg { width: 28px; height: 28px; }
.vp-mode:hover .vp-ico {
  transform: scale(1.08) rotate(-4deg);
  background: linear-gradient(135deg, #ff9a3d, #ffb866);
}
.vp-mode h4 {
  font-size: 17px;
  font-weight: 700;
  color: #1f2d3d;
  margin-bottom: 6px;
}
.vp-mode p {
  font-size: 13px;
  line-height: 1.6;
  color: #7a8694;
}

/* 能力亮点 */
.vp-feats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 0 0 36px;
}
.vp-feat {
  background: rgba(255, 255, 255, .75);
  border: 1px solid #eef1f5;
  border-radius: 14px;
  padding: 20px 18px;
  text-align: left;
  transition: transform .3s ease, box-shadow .3s ease;
}
.vp-feat:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(37, 154, 247, .12);
}
.vp-feat h5 {
  position: relative;
  font-size: 15px;
  font-weight: 700;
  color: #259af7;
  padding-left: 16px;
  margin-bottom: 8px;
}
.vp-feat h5::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 16px;
  border-radius: 3px;
  background: linear-gradient(180deg, #259af7, #ff9a3d);
}
.vp-feat p {
  font-size: 13px;
  line-height: 1.65;
  color: #6b7785;
}

/* 创建活动按钮（保持原有蓝色胶囊，居中） */
.vote-plat .create_active { margin: 0 auto; }

/* 平板 */
@media (max-width: 900px) {
  .vp-modes { grid-template-columns: repeat(2, 1fr); }
  .vp-feats { grid-template-columns: repeat(2, 1fr); }
}
/* 手机 */
@media (max-width: 560px) {
  .vp-modes { grid-template-columns: 1fr; }
  .vp-feats { grid-template-columns: 1fr; }
  .vp-title { font-size: 20px; }
}