/* ============================================================
   见丰科技 · 服务 & 案例 动效强化
   设计语言沿用「品牌舞台」：蓝绿能量弧 / HUD 角标 / 扫光 / 轨道
   ============================================================ */

/* conic-gradient 角度动画支持（不支持时退化为静态光弧） */
@property --jf-ang {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes jf-border-run { to { --jf-ang: 360deg; } }

/* ------------------------------------------------------------
   通用：卡片 HUD 角标 + 沿边框行走的能量光弧
   ------------------------------------------------------------ */
.card-hud {
  position: absolute;
  inset: 9px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 4;
}
.card-hud i {
  position: absolute;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(46, 160, 255, 0.8);
}
.card-hud i:nth-child(1) { left: 0;  top: 0;    border-right: 0; border-bottom: 0; }
.card-hud i:nth-child(2) { right: 0; top: 0;    border-left: 0;  border-bottom: 0; }
.card-hud i:nth-child(3) { left: 0;  bottom: 0; border-right: 0; border-top: 0; }
.card-hud i:nth-child(4) { right: 0; bottom: 0; border-left: 0;  border-top: 0; border-color: rgba(70, 224, 122, 0.8); }

.service-card:hover .card-hud,
.case-card:hover .card-hud,
.news-card:hover .card-hud { opacity: 1; }

/* 能量光弧：沿卡片边框环绕 */
.service-card::after,
.case-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--jf-ang),
    transparent 0 52%,
    rgba(46, 160, 255, 0.9) 68%,
    rgba(70, 224, 122, 0.95) 80%,
    transparent 94%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.45s ease;
  animation: jf-border-run 3.8s linear infinite;
  pointer-events: none;
  z-index: 4;
}
.service-card:hover::after,
.case-card:hover::after { opacity: 1; }

/* ------------------------------------------------------------
   服务区
   ------------------------------------------------------------ */
.service-grid { perspective: 1400px; }

.service-card {
  transform-style: preserve-3d;
  transition:
    transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base),
    box-shadow var(--dur-base),
    background-color var(--dur-base);
}
.service-card:hover {
  transform:
    translateY(-8px)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg));
}

/* 序号：悬浮时亮起一颗呼吸绿点 */
.service-card .num::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 8px;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--color-accent-2);
  box-shadow: 0 0 8px rgba(70, 224, 122, 0.9);
  opacity: 0.35;
  transition: opacity var(--dur-base);
  animation: svc-dot 2.6s ease-in-out infinite;
}
.service-card:hover .num::after { opacity: 1; }
@keyframes svc-dot {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 6px rgba(70, 224, 122, 0.6); }
  50%      { transform: scale(1.5); box-shadow: 0 0 12px rgba(70, 224, 122, 1); }
}

/* 标签：hover 时依次点亮 */
.service-card .tags i {
  transition: color var(--dur-base), border-color var(--dur-base), transform var(--dur-base);
}
.service-card:hover .tags i {
  color: #dff0ff;
  border-color: rgba(46, 160, 255, 0.5);
  transform: translateY(-1px);
}
.service-card:hover .tags i:nth-child(2) { transition-delay: 55ms; }
.service-card:hover .tags i:nth-child(3) { transition-delay: 110ms; }
.service-card:hover .tags i:nth-child(4) { transition-delay: 165ms; }

/* feature 卡：常驻一圈慢速环绕的能量弧（旗舰服务） */
.service-card.feature { border-color: rgba(46, 160, 255, 0.28); }
.service-card.feature::after {
  opacity: 0.42;
  animation-duration: 9s;
}
.service-card.feature:hover::after { opacity: 1; }

/* CMS 能力 chips：逐个浮入 */
.cms-chips i {
  transition:
    opacity 0.55s ease,
    transform 0.55s var(--ease-out),
    color var(--dur-fast),
    border-color var(--dur-fast);
  transition-delay: calc(var(--i, 0) * 42ms);
}
html.js .cms-chips i { opacity: 0; transform: translateY(12px); }
html.js .cms-strip.in .cms-chips i { opacity: 1; transform: none; }

/* 技术架构：顶部光条生长 */
.tech-cell {
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base), background var(--dur-base);
}
.tech-cell::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 2px;
  background: var(--color-gradient);
  transition: width 0.55s var(--ease-out);
}
.tech-cell:hover {
  transform: translateY(-4px);
  border-color: rgba(46, 160, 255, 0.45);
  background: rgba(14, 24, 40, 0.72);
}
.tech-cell:hover::after { width: 100%; }

/* ------------------------------------------------------------
   案例区
   ------------------------------------------------------------ */

/* 标题里的 300+ ：渐变数字（渐变层保持静态，动画交给外层 count-wrap） */
#cases-title .count-wrap {
  display: inline-block;
  transform-origin: 50% 85%;
}
#cases-title .count {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 1.06em;
  font-weight: 700;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: #dcebff;
  text-shadow: 0 0 44px rgba(46, 160, 255, 0.35);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  #cases-title .count {
    background: var(--color-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}
#cases-title .plus {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.82em;
  margin-left: 1px;
  color: #8fd4ff;
}

/* 标题右侧 HUD 刻度尺 */
#cases .sec-head { position: relative; }
#cases .sec-head::after {
  content: "";
  position: absolute;
  right: 0; top: 10px;
  width: 116px; height: 11px;
  background: repeating-linear-gradient(90deg, rgba(142, 180, 240, 0.55) 0 1px, transparent 1px 11px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 70%);
  mask: linear-gradient(90deg, transparent, #000 70%);
  opacity: 0.7;
  pointer-events: none;
}
@media (max-width: 760px) { #cases .sec-head::after { display: none; } }

/* 案例卡：LOGO 环绕轨道 + 斜向能量扫光 + 底部光线 */
.case-visual .logo-mark { position: relative; }
.case-visual .logo-mark::before {
  content: "";
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.34);
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 0.4s ease, transform 0.5s var(--ease-out);
  pointer-events: none;
}
.case-card:hover .case-visual .logo-mark::before {
  opacity: 0.8;
  transform: scale(1);
  animation: case-orbit 9s linear infinite;
}
@keyframes case-orbit { to { transform: scale(1) rotate(360deg); } }

.case-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.14) 44%,
    rgba(150, 225, 255, 0.26) 50%,
    transparent 64%);
  opacity: 0;
  transform: translateX(-120%) skewX(-8deg);
  pointer-events: none;
}
.case-card:hover .case-visual::before {
  animation: case-sheen 1.15s var(--ease-out);
}
@keyframes case-sheen {
  0%   { opacity: 0; transform: translateX(-120%) skewX(-8deg); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(120%) skewX(-8deg); }
}

.case-info::after {
  content: "";
  position: absolute;
  left: 20px; right: 20px; bottom: 10px;
  height: 1px;
  background: var(--color-gradient);
  opacity: 0.85;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.65s var(--ease-out);
}
.case-card:hover .case-info::after { transform: scaleX(1); }

/* 案例卡入场：沿用 .reveal 上浮 + data-delay 错峰（此处不再改写 transform，
   避免高优先级选择器压掉 :hover 的抬升效果） */

/* ------------------------------------------------------------
   降级：关闭动效时保持信息完整可见
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .service-card::after,
  .case-card::after,
  .card-hud { animation: none !important; }
  html.js .cms-chips i { opacity: 1; transform: none; }
  .case-card:hover .case-visual::before { animation: none; opacity: 0; }
}