/*!
 * anim.css —— OmegaBrain 公共动画库（v2.25 从首页 16 个 keyframes 抽公共部分下沉到全站）。
 *
 * 用法：直接给元素加 class，例如
 *   <div class="anim-fade-up"> ... </div>     入场淡入上移
 *   <button class="anim-lift"> ... </button>   悬停上浮
 *
 * 设计原则（§3.5 动效白名单）：只动 opacity / transform / filter 三类；200-400ms ease-out；
 * prefers-reduced-motion 降级为静态。
 */

/* ───────────── 入场动画（opacity/transform 组合） ───────────── */

/* 淡入（300ms） */
@keyframes anim-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.anim-fade-in {
  animation: anim-fade-in 300ms ease-out both;
}

/* 上移淡入（400ms，最常用） */
@keyframes anim-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.anim-fade-up {
  animation: anim-fade-up 400ms ease-out both;
}

/* 缩放淡入（pop in，300ms） */
@keyframes anim-pop-in {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
.anim-pop-in {
  animation: anim-pop-in 300ms ease-out both;
}

/* 缩放淡入（更明显，500ms） */
@keyframes anim-scale-in {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}
.anim-scale-in {
  animation: anim-scale-in 500ms ease-out both;
}

/* ───────────── 持续动画（infinite） ───────────── */

/* 缓慢呼吸（点、徽章等） */
@keyframes anim-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.anim-pulse {
  animation: anim-pulse 2s ease-in-out infinite;
}

/* 缓慢 ping 圈点（在线/活动指示） */
@keyframes anim-ping {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 0; }
}
.anim-ping::after,
.anim-ping-after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0.4;
  animation: anim-ping 1.6s ease-out infinite;
}

/* ───────────── 微交互（hover/focus） ───────────── */

/* 悬停上浮（卡片/CTA）—— 用 transform 而非 top/bottom 避免回流 */
.anim-lift {
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}
.anim-lift:hover {
  transform: translateY(-2px);
}

/* 悬停缩放（图标/小元素） */
.anim-scale-hover {
  transition: transform 200ms ease-out;
}
.anim-scale-hover:hover {
  transform: scale(1.05);
}

/* 悬停发光（CTA 强调） */
@keyframes anim-glow-pulse {
  0%, 100% { box-shadow: 0 8px 30px rgb(249 115 22 / 0.35); }
  50% { box-shadow: 0 8px 40px rgb(249 115 22 / 0.55); }
}
.anim-glow {
  animation: anim-glow-pulse 3s ease-in-out infinite;
}

/* ───────────── 错开延迟（让多个元素依次入场） ───────────── */
.anim-delay-1 { animation-delay: 80ms; }
.anim-delay-2 { animation-delay: 160ms; }
.anim-delay-3 { animation-delay: 240ms; }
.anim-delay-4 { animation-delay: 320ms; }
.anim-delay-5 { animation-delay: 400ms; }

/* ───────────── v2.62 滚动进场（scroll-reveal，IntersectionObserver 驱动） ─────────────
 * 观察脚本在 Base.astro 全局注册：元素进视口后加 .is-in。
 * 无 JS 安全：仅当脚本给 <html> 加了 .js 类才隐藏初始态——爬虫/禁用 JS 时内容直接可见。
 * 用法：<div class="reveal">（上浮）/ class="reveal reveal-fade"（仅淡入）/
 *       class="reveal reveal-scale"（缩放进入）；错峰用 style="--reveal-delay: 80ms"。
 */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 560ms ease-out,
    transform 560ms ease-out;
  transition-delay: var(--reveal-delay, 0ms);
}
.js .reveal.reveal-fade {
  transform: none;
}
.js .reveal.reveal-scale {
  transform: scale(0.95);
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ───────────── v2.62 渐变流动背景（终屏 CTA 等大渐变区块，克制慢速） ───────────── */
@keyframes anim-grad-flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.bg-flow {
  background-size: 160% 160%;
  animation: anim-grad-flow 14s ease-in-out infinite;
}

/* ───────────── v2.62 功能图标微动效（卡片加 .group，图标加 .icon-pop） ───────────── */
.icon-pop {
  transition: transform 220ms ease-out;
}
.group:hover .icon-pop {
  transform: translateY(-2px) scale(1.08);
}

/* ───────────── 2026-09-26 高级感动效补充（克制、只动 transform/opacity/filter） ───────────── */

/* 缓慢悬浮（设备 mockup / 场景视觉；6s 呼吸节奏，交错用 .anim-float-late） */
@keyframes anim-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.anim-float {
  animation: anim-float 6s ease-in-out infinite;
  will-change: transform;
}
.anim-float-late {
  animation-delay: -3s;
}

/* 模糊→清晰进场（Hero 视觉/大场景图；外层 reveal 触发） */
.js .reveal.reveal-blur {
  transform: translateY(16px) scale(0.985);
  filter: blur(6px);
  transition:
    opacity 700ms ease-out,
    transform 700ms ease-out,
    filter 700ms ease-out;
  transition-delay: var(--reveal-delay, 0ms);
}
.js .reveal.reveal-blur.is-in {
  filter: blur(0);
}

/* 导航链接下划线生长（hover/focus；配合 .nav-underline 加在 <a> 上） */
.nav-underline {
  position: relative;
}
.nav-underline::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.75;
  transform: translateX(-50%);
  transition: width 220ms ease-out;
}
.nav-underline:hover::after,
.nav-underline:focus-visible::after {
  width: 60%;
}

/* 页脚链接微位移（hover 时轻轻右移，配合 inline-flex 使用） */
.flink {
  transition: color 200ms ease-out, transform 200ms ease-out;
}
.flink:hover {
  transform: translateX(2px);
}

/* 场景图底座阴影（设备 mockup 落地感；椭圆软影，随浮动呼吸反向缩放） */
@keyframes anim-shadow-breath {
  0%, 100% { transform: scaleX(1); opacity: 0.35; }
  50% { transform: scaleX(0.88); opacity: 0.22; }
}
.scene-shadow {
  border-radius: 50%;
  background: rgb(0 0 0 / 0.5);
  filter: blur(18px);
  animation: anim-shadow-breath 6s ease-in-out infinite;
}

/* ───────────── v2.62 补漏：HeroConsole 家庭 Tab 进度条呼吸（此前内联引用未定义 keyframe） ───────────── */
@keyframes hc-meter {
  from { transform: scaleX(0.85); opacity: 0.75; }
  to { transform: scaleX(1); opacity: 1; }
}

/* ───────────── 减弱动效降级（§3.5 一致性） ───────────── */
@media (prefers-reduced-motion: reduce) {
  .anim-fade-in,
  .anim-fade-up,
  .anim-pop-in,
  .anim-scale-in,
  .anim-pulse,
  .anim-glow,
  .bg-flow,
  .anim-float,
  .anim-float-late,
  .scene-shadow,
  .anim-lift:hover,
  .anim-scale-hover:hover {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  /* scroll-reveal 直接呈现，不做位移/淡入/模糊 */
  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    filter: none !important;
  }
}