/* 团子游戏屋 · 高级动效（fx）
   对应 React Bits：Aurora / Particles / SplitText / CountUp / GradientText。
   只作用于 [data-fx="…"] 与 .fx-* / .fx-demo-* 前缀类。 */

/* ---------- 锚点：给 absolute 背景一个定位父级，并保证内容在背景之上 ---------- */
.fx-anchor { position: relative; }
.fx-anchor > :not([data-fx]) { position: relative; z-index: 2; }

/* ---------- Aurora：2–3 团漂移色斑 + 一次性噪点 ---------- */
[data-fx="aurora"] {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: paint;
  opacity: .9;
  mix-blend-mode: multiply; /* 纸面颜料感；深色主题可改成 screen */
}
.fx-aurora__blob {
  position: absolute;
  display: block;
  width: clamp(260px, 44vmax, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .32;
  background: radial-gradient(circle at 50% 50%, rgba(var(--fx-rgb), .62), rgba(var(--fx-rgb), 0) 68%);
  transform: translate3d(0, 0, 0);
  animation: fx-drift-a 28s ease-in-out infinite alternate;
  will-change: transform;
}
.fx-aurora__blob--1 { --fx-rgb: 200, 22, 30; left: -8%; top: -20%; animation-duration: 26s; }
.fx-aurora__blob--2 { --fx-rgb: 176, 147, 204; right: -16%; top: -22%; animation-name: fx-drift-b; animation-duration: 34s; animation-delay: -6s; }
.fx-aurora__blob--3 { --fx-rgb: 253, 190, 90; left: -16%; bottom: -34%; animation-duration: 31s; animation-delay: -13s; animation-direction: alternate-reverse; }
[data-fx-paused="1"] .fx-aurora__blob { animation-play-state: paused; }

.fx-aurora__noise {
  position: absolute;
  inset: 0;
  display: block;
  background-image: var(--fx-noise, none);
  background-size: 88px 88px;
  background-repeat: repeat;
  opacity: .5;
  mix-blend-mode: multiply;
}
@keyframes fx-drift-a {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(7%, 9%, 0) scale(1.16); }
  100% { transform: translate3d(-6%, 3%, 0) scale(.94); }
}
@keyframes fx-drift-b {
  0% { transform: translate3d(0, 0, 0) scale(1.05); }
  50% { transform: translate3d(-10%, -7%, 0) scale(.92); }
  100% { transform: translate3d(5%, 8%, 0) scale(1.14); }
}

/* ---------- Particles：覆盖在 Aurora 上、文字下 ---------- */
[data-fx="particles"] {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------- SplitText：逐字浮现 ---------- */
.fx-split { --fx-ease: cubic-bezier(.2, .8, .2, 1); }
.fx-split .fx-char {
  display: inline-block;
  white-space: pre;
  opacity: 0;
  transform: translateY(.6em) rotate(var(--fx-rot, 4deg));
}
.fx-split.is-in .fx-char {
  animation: fx-char-in var(--fx-dur, 560ms) var(--fx-ease) both;
  animation-delay: var(--fx-d, 0ms);
}
.fx-split--blur.is-in .fx-char { animation-name: fx-char-in-blur; }
@keyframes fx-char-in {
  from { opacity: 0; transform: translateY(.6em) rotate(var(--fx-rot, 4deg)); }
  to { opacity: 1; transform: translateY(0) rotate(0deg); }
}
@keyframes fx-char-in-blur {
  from { opacity: 0; transform: translateY(.6em) rotate(var(--fx-rot, 4deg)); filter: blur(var(--fx-blur, 6px)); }
  to { opacity: 1; transform: translateY(0) rotate(0deg); filter: blur(0); }
}
.fx-split--static .fx-char { animation: none !important; opacity: 1; transform: none; filter: none; }

/* ---------- CountUp：等宽数字，避免滚动时抖动 ---------- */
[data-fx="count"] {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

/* ---------- Gradient / Shiny Text（默认关闭，[data-shiny] 开启） ----------
   注意：会覆盖元素自身背景，请只加在纯文字元素上。 */
[data-shiny] {
  --fx-shine-base: var(--ink);
  background-image: linear-gradient(100deg,
    var(--fx-shine-base) 0%, var(--fx-shine-base) 44%, #FFE7B0 47%, var(--yellow) 50%,
    #FFE7B0 53%, var(--fx-shine-base) 56%, var(--fx-shine-base) 100%);
  background-size: 200% 100%;
  background-position: 120% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: fx-shine 6.5s linear infinite;
}
@keyframes fx-shine {
  from { background-position: 120% 0; }
  to { background-position: -80% 0; }
}

/* ---------- 减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-aurora__blob { animation: none !important; }
  .fx-split .fx-char { animation: none !important; opacity: 1; transform: none; filter: none; }
  [data-shiny] {
    animation: none !important;
    background: none;
    color: var(--fx-shine-base);
    -webkit-text-fill-color: currentColor;
  }
}

/* ---------- 演示页（fx-demo-* 前缀，不参与站点集成） ---------- */
.fx-demo-stage { position: relative; overflow: hidden; }
.fx-demo-art { pointer-events: none; }
.fx-demo-chip { text-decoration: none; }
.fx-demo-shiny { margin: 18px 0 0; font-size: 12.5px; letter-spacing: .2em; }
.fx-demo-count { margin-top: 12px; font-size: 13px; color: var(--ink-2); }
.fx-demo-num { font-size: 20px; font-weight: 900; color: var(--red); }
.fx-demo-list { padding-top: clamp(46px, 8vw, 90px); }
.fx-demo-facts { padding-top: 0; }

/* 满宽出血：放在 .wrap 里时不要出现矩形边 */
.hero > .fx-aurora { left: 50%; right: auto; width: 100vw; transform: translateX(-50%); }
.hero > .fx-particles { left: 50%; right: auto; width: 100vw; transform: translateX(-50%); }