/* ============================================================
   见丰科技 · 公司介绍「品牌舞台」
   LOGO 衍生动效：轨道环绕 / 脉冲波纹 / 能量粒子 / 能量流分支
   与首屏 hero 的 HUD 光环、星座连线动效语言保持一致
   ============================================================ */

.brand-stage-row {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: var(--space-6);
  align-items: center;
  margin-bottom: var(--space-6);
  perspective: 1100px;
}

/* ---------------- 左：LOGO 舞台 ---------------- */
.brand-stage {
  position: relative;
  width: 340px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  transform-style: preserve-3d;
  transform: rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* 品牌能量底光（呼吸） */
.bs-glow {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(46, 160, 255, 0.20),
    rgba(70, 224, 122, 0.10) 45%,
    transparent 72%);
  animation: bs-breathe 4.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bs-breathe {
  0%, 100% { opacity: 0.7; transform: scale(0.94); }
  50%      { opacity: 1;   transform: scale(1.06); }
}

/* 粒子画布 */
#brand-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 轨道（外层定倾角，内层 ring 自转，卫星挂在 ring 上） */
.bs-orbit {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s ease 0.35s;
  transform-style: preserve-3d;
}
.bs-orbit.o2 { transition-delay: 0.5s; }
.bs-orbit.o3 { transition-delay: 0.65s; }
.brand-stage-row.in .bs-orbit { opacity: 1; }

.bs-orbit .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(142, 180, 240, 0.16);
  animation: bs-spin 16s linear infinite;
}
.bs-orbit.o2 .ring { inset: 7%;  animation-duration: 24s; animation-direction: reverse; }
.bs-orbit.o3 .ring { inset: 15%; animation-duration: 34s; border-style: dashed; border-color: rgba(142, 180, 240, 0.22); }
@keyframes bs-spin { to { transform: rotate(360deg); } }

.bs-orbit .sat {
  position: absolute;
  top: -5px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 14px 3px rgba(46, 160, 255, 0.75);
}
.bs-orbit.o2 .sat {
  width: 7px; height: 7px; margin-left: -3.5px; top: -3.5px;
  background: var(--color-accent-2);
  box-shadow: 0 0 12px 3px rgba(70, 224, 122, 0.75);
}
.bs-orbit.o3 .sat {
  width: 6px; height: 6px; margin-left: -3px; top: -3px;
  background: #9ad6ff;
  box-shadow: 0 0 10px 2px rgba(154, 214, 255, 0.7);
}

/* 脉冲波纹：品牌「被看见」的扩散 */
.bs-pulse {
  position: absolute;
  inset: 17%;
  pointer-events: none;
}
.bs-pulse i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(70, 224, 122, 0.4);
  opacity: 0;
  transform: scale(0.55);
  animation: bs-ripple 4.2s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}
.bs-pulse i:nth-child(2) { animation-delay: 1.4s; }
.bs-pulse i:nth-child(3) { animation-delay: 2.8s; }
@keyframes bs-ripple {
  0%   { opacity: 0;  transform: scale(0.55); }
  10%  { opacity: 0.75; }
  100% { opacity: 0;  transform: scale(1.85); }
}

/* LOGO 本体：入场缩放 + 悬浮 */
.bs-core {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform: translateZ(56px) scale(0.72);
  opacity: 0;
  transition: opacity 0.9s ease, transform 1.05s var(--ease-out);
}
.brand-stage-row.in .bs-core {
  opacity: 1;
  transform: translateZ(56px) scale(1);
}
.bs-core img {
  width: 56%;
  height: auto;
  display: block;
  animation: bs-float 5.4s ease-in-out infinite;
  filter:
    drop-shadow(0 14px 38px rgba(46, 160, 255, 0.38))
    drop-shadow(0 4px 18px rgba(70, 224, 122, 0.22));
}
@keyframes bs-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}

/* hover 关键词时 LOGO 的「回应脉冲」 */
.bs-core::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 56%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) scale(0.6);
  border-radius: 50%;
  border: 2px solid rgba(70, 224, 122, 0.75);
  opacity: 0;
  pointer-events: none;
}
.bs-core.ack::after {
  animation: bs-ack-ring 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes bs-ack-ring {
  0%   { opacity: 0.9; transform: translate(-50%, -50%) scale(0.6); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(2.05); }
}

/* 点击爆发波 */
.bs-burst {
  position: absolute;
  left: 50%; top: 50%;
  width: 130px; height: 130px;
  margin: -65px 0 0 -65px;
  border-radius: 50%;
  border: 2px solid rgba(70, 224, 122, 0.85);
  box-shadow: 0 0 24px rgba(70, 224, 122, 0.4);
  animation: bs-burst 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: none;
}
@keyframes bs-burst {
  from { transform: scale(0.3); opacity: 0.95; }
  to   { transform: scale(3.4); opacity: 0; }
}

/* 爆发瞬间：轨道与卫星提亮 */
.brand-stage.boom .ring { filter: brightness(1.8); }
.brand-stage.boom .sat  { box-shadow: 0 0 20px 6px rgba(70, 224, 122, 0.9); }
.brand-stage.boom .bs-glow { opacity: 1; }

/* ---------------- 右：能量流分支 ---------------- */
.bs-flow {
  position: relative;
  min-height: 320px;
}
.bs-flow svg.energy {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* 基础线：入场时描线生长 */
.bs-flow .e-base {
  fill: none;
  stroke: rgba(142, 180, 240, 0.24);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.35s var(--ease-out);
}
.bs-flow .e-base.p2 { transition-delay: 0.18s; }
.bs-flow .e-base.p3 { transition-delay: 0.36s; }
.brand-stage-row.in .e-base { stroke-dashoffset: 0; }

/* 流光层：虚线流动 */
.bs-flow .e-flow {
  fill: none;
  stroke: url(#jf-energy-grad);
  stroke-width: 1.7;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-dasharray: 5 17;
  animation: e-dash 1.5s linear infinite;
  opacity: 0;
  transition: opacity 0.9s ease 1.15s;
}
.brand-stage-row.in .e-flow { opacity: 0.85; }
@keyframes e-dash { to { stroke-dashoffset: -88; } }

/* 高亮态：hover 关键词 / 点击爆发时 */
.bs-flow.hot .e-flow { animation-duration: 0.55s; opacity: 1; }
.bs-flow .e-flow.hot-path {
  stroke-width: 2.6;
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(70, 224, 122, 0.85));
}

/* 关键词节点 */
.bs-node {
  position: absolute;
  transform: translateY(-50%);
  padding: 13px 20px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: rgba(10, 18, 32, 0.78);
  backdrop-filter: blur(6px);
  min-width: 196px;
  cursor: pointer;
  transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base) var(--ease-out);
}
.bs-node::before {
  content: "";
  position: absolute;
  left: -5px; top: 50%;
  width: 10px; height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--color-gradient);
  box-shadow: 0 0 10px rgba(46, 160, 255, 0.75);
}
.bs-node b { display: block; font-size: 1.02rem; line-height: 1.35; }
a.bs-node { color: inherit; text-decoration: none; }
a.bs-node:focus-visible { outline: 2px solid rgba(46, 160, 255, 0.6); outline-offset: 3px; }
.bs-node span {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-muted);
  letter-spacing: 0.18em;
}
.bs-node:hover,
.bs-node:focus-visible {
  border-color: rgba(46, 160, 255, 0.55);
  box-shadow: var(--shadow-2);
  transform: translateY(-50%) translateX(6px);
  outline: none;
}

/* ---------------- 响应式 ---------------- */
@media (max-width: 960px) {
  .brand-stage-row { grid-template-columns: 1fr; gap: var(--space-4); }
  .brand-stage { width: 280px; }
  .bs-flow { min-height: 300px; }
}
@media (max-width: 560px) {
  .bs-flow { min-height: 280px; }
  .bs-node { min-width: 158px; padding: 10px 14px; }
  .bs-node b { font-size: 0.92rem; }
  .bs-node span { font-size: 9px; }
}