/* portal-fx.css — 门户视觉增强层（可整体回滚：删掉 index.html 里的 3 行引用即可）
 * 只做观感与动效，不改变布局结构与交互逻辑。 */

:root {
  --fx-glow: 0 24px 70px -24px rgba(45, 212, 191, 0.45);
  --fx-ring: 0 0 0 1px rgba(120, 220, 210, 0.35);
}

html { scroll-behavior: smooth; }

::selection { background: rgba(45, 212, 191, 0.32); color: #041b18; }

/* 自定义滚动条（桌面） */
@media (pointer: fine) {
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-track { background: transparent; }
  *::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(45,212,191,.35), rgba(96,165,250,.25));
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  *::-webkit-scrollbar-thumb:hover { background-color: rgba(45,212,191,.5); }
}

/* 焦点可见性（无障碍） */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(45, 212, 191, 0.85);
  outline-offset: 3px;
  border-radius: 8px;
}

/* 卡片：悬浮光边 + 轻微抬升（不改 transform，避免与拖拽冲突） */
.dcard {
  position: relative;
  transition:
    box-shadow .35s cubic-bezier(.22,.61,.36,1),
    border-color .35s ease,
    background-color .35s ease;
  will-change: box-shadow;
}
.dcard::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  background:
    radial-gradient(420px 180px at var(--fx-x, 50%) var(--fx-y, 0%), rgba(45,212,191,.14), transparent 65%);
}
.dcard:hover::after { opacity: 1; }
.dcard:hover {
  box-shadow: 0 26px 60px -30px rgba(0,0,0,.75), var(--fx-glow);
  border-color: rgba(45, 212, 191, 0.28);
}

/* 图标呼吸 */
.dcard:hover .dcard-icon-box { animation: fx-icon 1.6s ease-in-out infinite; }
@keyframes fx-icon {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-3px) rotate(-3deg); }
}

/* 标签微交互 */
.dcard-tag, .metric-pill, .filter-chip, .dgo {
  transition: transform .25s ease, background-color .25s ease, border-color .25s ease, color .25s ease;
}
.dcard-tag:hover, .metric-pill:hover {
  transform: translateY(-1px);
  border-color: rgba(45, 212, 191, 0.35);
}
.dgo:hover .dcard-key-badge { transform: translateY(-1px) scale(1.04); }

/* 顶栏滚动后的收敛 */
.topnav { transition: background-color .3s ease, backdrop-filter .3s ease, box-shadow .3s ease, padding .3s ease; }
html.fx-scrolled .topnav {
  background: rgba(8, 14, 26, 0.72);
  backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 10px 30px -22px rgba(0,0,0,.9);
}

/* 跟随光斑（桌面） */
.fx-cursor {
  position: fixed;
  left: 0; top: 0;
  width: 520px; height: 520px;
  margin: -260px 0 0 -260px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  background: radial-gradient(circle, rgba(45,212,191,.10), rgba(96,165,250,.05) 42%, transparent 66%);
  transition: opacity .4s ease;
  mix-blend-mode: screen;
}
@media (pointer: fine) { .fx-cursor.fx-on { opacity: 1; } }

/* 浮动光球（背景层，不拦截事件） */
.fx-orbs { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.fx-orbs i {
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  filter: blur(48px);
  opacity: .20;
  background: radial-gradient(circle, rgba(45,212,191,.75), transparent 68%);
  animation: fx-float 26s ease-in-out infinite;
}
.fx-orbs i:nth-child(1) { left: -6%; top: 12%; animation-delay: -4s; }
.fx-orbs i:nth-child(2) { right: -4%; top: 34%; background: radial-gradient(circle, rgba(96,165,250,.7), transparent 68%); animation-duration: 32s; }
.fx-orbs i:nth-child(3) { left: 32%; bottom: -8%; background: radial-gradient(circle, rgba(167,139,250,.55), transparent 68%); animation-duration: 38s; animation-delay: -12s; }
@keyframes fx-float {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  33% { transform: translate3d(26px,-30px,0) scale(1.06); }
  66% { transform: translate3d(-18px,22px,0) scale(.96); }
}


/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dcard, .dcard::after, .dcard-tag, .metric-pill { transition: none !important; }
  .dcard:hover .dcard-icon-box { animation: none !important; }
  .fx-orbs i { animation: none !important; }
  .fx-cursor { display: none !important; }
}

/* 移动端收一点 */
@media (max-width: 640px) {
  .fx-orbs i { width: 200px; height: 200px; filter: blur(40px); opacity: .16; }
  .dcard:hover { box-shadow: none; }
}