/* ============================================================
   TrueFocus 文字聚焦 · 样式
   移植自 React Bits <https://reactbits.dev/text-animations/true-focus>
   （DavidHDev/react-bits，MIT + Commons Clause；类名与官方 TrueFocus.css
     保持一致，便于对照升级。仅自用，不随组件合集再分发。）
   与官方的两处差异：
   · .focus-word 不写死 3rem/900，字号字重跟随宿主标题（如 .hero-title）；
   · 末尾追加 prefers-reduced-motion 兜底（JS 端已直接跳过初始化）。
   ============================================================ */

.focus-container {
  position: relative;
  display: flex;
  gap: 1em; /* 按空格分词时的官方字距；按单字切分时由 JS 改小 */
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  outline: none;
  user-select: none;
}

.focus-word {
  position: relative;
  cursor: pointer;
  transition:
    filter 0.3s ease,
    color 0.3s ease;
  outline: none;
  user-select: none;
}

.focus-word.active {
  filter: blur(0);
}

.focus-frame {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.focus-highlight {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 6px;
  background-color: var(--highlight-color);
  pointer-events: none;
}

.focus-box {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  border: var(--border-width, 3px) solid var(--border-color, currentColor);
  border-radius: 6px;
  filter: drop-shadow(0 0 4px var(--glow-color, transparent));
}

.focus-underline {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: calc(var(--border-width, 3px) / 2);
  background-color: var(--border-color, currentColor);
  filter: drop-shadow(0 0 4px var(--glow-color, transparent));
}

.corner {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: var(--corner-size, 1rem);
  height: var(--corner-size, 1rem);
  border: var(--border-width, 3px) solid var(--border-color, currentColor);
  border-radius: 3px;
  filter: drop-shadow(0 0 4px var(--glow-color, transparent));
}

.top-left {
  border-right: none;
  border-bottom: none;
}

.top-right {
  border-left: none;
  border-bottom: none;
}

.bottom-left {
  border-right: none;
  border-top: none;
}

.bottom-right {
  border-left: none;
  border-top: none;
}

/* 减少动态效果：停用一切过渡（JS 端同时会跳过初始化，双保险） */
@media (prefers-reduced-motion: reduce) {
  .focus-word,
  .corner,
  .focus-box,
  .focus-underline,
  .focus-highlight {
    transition: none !important;
  }
}