/* 首页专属视觉增强：动效关键帧 + 装饰元素（亮/暗双主题）。
   仅首页引入，集中在此单文件，避免样式散落。 */

/* ── 滚动入场（仅在 JS 可用时隐藏，避免无 JS 时内容不可见）──── */
.tf-js .tf-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s cubic-bezier(.22, 1, .36, 1),
                transform .7s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}
.tf-js .tf-reveal.tf-in {
    opacity: 1;
    transform: none;
}

/* ── 装饰光球（页面/分区环境光）────────────────────────── */
.tf-orb {
    position: absolute;
    border-radius: 9999px;
    pointer-events: none;
    filter: blur(64px);
    z-index: 0;
}
.tf-orb-float  { animation: tf-float 14s ease-in-out infinite; }
.tf-orb-float2 { animation: tf-float2 18s ease-in-out infinite; }

@keyframes tf-float {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(24px, -28px, 0) scale(1.08); }
}
@keyframes tf-float2 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(-30px, 22px, 0) scale(1.12); }
}

/* ── 渐变流光（hero 徽标 / accent 文本）──────────────────── */
.tf-shimmer {
    background-size: 200% auto;
    animation: tf-pan 6s linear infinite;
}
@keyframes tf-pan {
    to { background-position: 200% center; }
}

/* ── 顶部脉冲条（区块 accent 装饰）──────────────────────── */
.tf-accent-bar {
    height: 3px;
    border-radius: 9999px;
    background: linear-gradient(90deg, var(--tf-accent, #10b981), transparent);
}

/* ── 勋章光环（爆发榜前三）──────────────────────────────── */
.tf-medal { box-shadow: 0 0 0 3px var(--tf-medal-ring, rgba(16,185,129,.15)); }

/* ── 卡片 accent 顶条（hover 显现）─────────────────────── */
.tf-cardline::before {
    content: "";
    position: absolute;
    top: 0; left: 16px; right: 16px;
    height: 2px;
    border-radius: 9999px;
    background: linear-gradient(90deg, transparent, var(--tf-accent, #10b981), transparent);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}
.tf-cardline:hover::before { opacity: .9; }

/* ── 数字滚动占位（避免布局跳动）────────────────────────── */
.tf-countup { font-variant-numeric: tabular-nums; }

/* ── 尊重"减少动态效果"偏好 ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .tf-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .tf-orb-float, .tf-orb-float2, .tf-shimmer { animation: none !important; }
}