/* ============================================================
   site-anim.css — 动画层（ReactBits 风格 vanilla 实现，全量）
   配色沿用站点 teal 主色，克制、专业、无障碍友好。
   所有显隐仅在 html.anim-ready 下生效：无 JS 时内容完整可见。
   覆盖：BlurText / GradientText / RotatingText / Aurora /
        SpotlightCard / Tilt / Magnet / ClickSpark / 滚动渐显 / 级联
   ============================================================ */

/* ---- 1. 滚动渐显（通用 .reveal）---- */
html.anim-ready .reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  will-change:opacity, transform;
}
html.anim-ready .reveal.in{ opacity:1; transform:none; will-change:auto; }

/* ---- 2. 文章正文块渐显（JS 自动标记 article 直接子元素）---- */
html.anim-ready article .reveal-block{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
  will-change:opacity, transform;
}
html.anim-ready article .reveal-block.in{ opacity:1; transform:none; will-change:auto; }

/* ---- 3. 标题模糊渐入（BlurText 风格）---- */
html.anim-ready .blur-in{
  animation:blurIn 1.1s cubic-bezier(.16,1,.3,1) both;
}
@keyframes blurIn{
  from{ opacity:0; filter:blur(14px); transform:translateY(10px); }
  to{ opacity:1; filter:blur(0); transform:none; }
}

/* ---- 4. Spotlight Card（鼠标跟随高光边框，ReactBits SpotlightCard）---- */
.spotlight{ position:relative; isolation:isolate; }
.spotlight::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(45,212,191,.7), transparent 62%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .35s ease; pointer-events:none; z-index:2;
}
.spotlight::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(45,212,191,.10), transparent 66%);
  opacity:0; transition:opacity .35s ease; pointer-events:none; z-index:0;
}
.spotlight:hover::before, .spotlight:focus-visible::before{ opacity:1; }
.spotlight:hover::after, .spotlight:focus-visible::after{ opacity:1; }

/* ---- 5. Aurora 背景（ReactBits Aurora 风格）---- */
.aurora{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.aurora i{ position:absolute; border-radius:50%; filter:blur(56px); opacity:.62; }
.aurora i:nth-child(1){ width:440px; height:440px; left:-90px; top:-70px; background:radial-gradient(circle, rgba(20,184,166,.55), transparent 70%); animation:auroraFloat 16s ease-in-out infinite; }
.aurora i:nth-child(2){ width:380px; height:380px; right:-70px; top:30px; background:radial-gradient(circle, rgba(13,148,136,.5), transparent 70%); animation:auroraFloat 20s ease-in-out infinite reverse; }
.aurora i:nth-child(3){ width:320px; height:320px; left:32%; bottom:-130px; background:radial-gradient(circle, rgba(16,163,74,.4), transparent 70%); animation:auroraFloat 24s ease-in-out infinite; }
@keyframes auroraFloat{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(34px,-26px) scale(1.08); }
}

/* ---- 6. 卡片进入级联（stagger-kids 父容器）---- */
html.anim-ready .stagger-kids > *{ opacity:0; transform:translateY(20px); }
html.anim-ready .stagger-kids.in > *{ animation:staggerUp .65s cubic-bezier(.16,1,.3,1) both; }
html.anim-ready .stagger-kids.in > *:nth-child(1){ animation-delay:.04s; }
html.anim-ready .stagger-kids.in > *:nth-child(2){ animation-delay:.10s; }
html.anim-ready .stagger-kids.in > *:nth-child(3){ animation-delay:.16s; }
html.anim-ready .stagger-kids.in > *:nth-child(4){ animation-delay:.22s; }
html.anim-ready .stagger-kids.in > *:nth-child(5){ animation-delay:.28s; }
html.anim-ready .stagger-kids.in > *:nth-child(6){ animation-delay:.34s; }
html.anim-ready .stagger-kids.in > *:nth-child(7){ animation-delay:.40s; }
html.anim-ready .stagger-kids.in > *:nth-child(8){ animation-delay:.46s; }
@keyframes staggerUp{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }

/* ---- 7. 渐变流光文本（ReactBits GradientText）----
   仅在 anim-ready 下生效，无 JS 时文字正常显示。 */
html.anim-ready .gradient-text{
  background:linear-gradient(100deg,#5eead4 0%,#ffffff 22%,#99f6e4 50%,#ffffff 78%,#5eead4 100%);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:gradientShift 5s linear infinite;
}
/* 浅色背景变体（文章标题等深底浅字场景） */
html.anim-ready .gradient-text.alt{
  background:linear-gradient(100deg,var(--primary-deep),var(--primary-2),var(--primary),var(--primary-2),var(--primary-deep));
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:gradientShift 5s linear infinite;
}
/* 全站区块标题统一渐变流光 */
html.anim-ready .sec-title{
  background:linear-gradient(100deg,var(--primary),var(--primary-2),var(--accent),var(--primary-2),var(--primary));
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:gradientShift 7s linear infinite;
}
@keyframes gradientShift{ to{ background-position:200% center; } }

/* ---- 8. 旋转文本（ReactBits RotatingText）---- */
.rotating-text{ display:inline-block; vertical-align:baseline; }
.rotating-text .rt-word{ display:inline-block; }
html.anim-ready .rotating-text .rt-word{ transition:opacity .45s ease, transform .45s cubic-bezier(.16,1,.3,1); }
html.anim-ready .rotating-text .rt-word.is-out{ opacity:0; transform:translateY(-.5em) rotateX(45deg); }

/* ---- 9. 3D 倾斜卡片（ReactBits Tilt 风格）---- */
html.anim-ready .tilt{ transform-style:preserve-3d; transition:transform .25s cubic-bezier(.16,1,.3,1); will-change:transform; }
html.anim-ready .tilt:hover{ box-shadow:var(--shadow-lg); }

/* ---- 10. 磁吸按钮（ReactBits Magnet 风格）---- */
html.anim-ready .magnet{ transition:transform .25s cubic-bezier(.16,1,.3,1); will-change:transform; }

/* ---- 11. 点击火花（ReactBits ClickSpark 风格）---- */
.spark{ position:fixed; width:7px; height:7px; border-radius:50%; pointer-events:none; z-index:9999; background:radial-gradient(circle,#5eead4,#0D9488); }

/* ---- 12. 首屏光标辉光（ReactBits 背景交互）---- */
.hero-glow{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-glow::after{ content:""; position:absolute; inset:0; background:radial-gradient(260px circle at var(--gx,50%) var(--gy,28%), rgba(45,212,191,.20), transparent 60%); transition:background .18s ease; }

/* ---- 首屏旋转标语（首页专用）---- */
.hero-rotate{ margin-bottom:18px; font-size:16px; color:var(--hero-sub); letter-spacing:.5px; }
.hero-rotate .rt-word{ color:var(--primary-2); font-weight:600; }

/* ---- 无障碍：尊重 prefers-reduced-motion ----
   关键：渐变文本必须重置 fill，否则 reduced-motion 下文字会透明不可见。 */
@media (prefers-reduced-motion: reduce){
  html.anim-ready .reveal,
  html.anim-ready article .reveal-block{
    opacity:1 !important; transform:none !important; transition:none !important; will-change:auto;
  }
  html.anim-ready .blur-in{ animation:none !important; filter:none !important; }
  .aurora i{ animation:none !important; }
  html.anim-ready .stagger-kids > *{ opacity:1 !important; transform:none !important; animation:none !important; }
  html.anim-ready .gradient-text,
  html.anim-ready .gradient-text.alt,
  html.anim-ready .sec-title{
    -webkit-text-fill-color:currentColor !important; color:inherit !important;
    background:none !important; animation:none !important;
  }
}

/* ---- 12. 液态铬 WebGL 背景 ---- */
.liquid-chrome-bg{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; opacity:.92;
}
.liquid-chrome-bg canvas{ display:block; width:100%; height:100%; }

/* ---- 13. 渐进模糊带（ProgressiveBlur）---- */
.progressive-blur{
  position:absolute; bottom:0; left:0; right:0; height:120px; z-index:1;
  pointer-events:none; overflow:hidden;
}
.progressive-blur i{ position:absolute; bottom:0; left:0; right:0; display:block; }
.progressive-blur i:nth-child(1){ height:24px; backdrop-filter:blur(1px); -webkit-backdrop-filter:blur(1px); }
.progressive-blur i:nth-child(2){ height:32px; bottom:24px; backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.progressive-blur i:nth-child(3){ height:40px; bottom:56px; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.progressive-blur i:nth-child(4){ height:48px; bottom:96px; backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); }
.progressive-blur i:nth-child(5){ height:56px; bottom:144px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
/* 遮罩：从透明到下一段背景色，平滑过渡 */
.progressive-blur::after{
  content:""; position:absolute; bottom:0; left:0; right:0; height:120px;
  background:linear-gradient(to bottom, transparent 0%, var(--bg) 92%);
}

/* ---- 14. 镜面按钮（Mirror Button）----
   Pinterest 风玻璃拟态：半透底 + 镜面扫光 + 微边框 */
.mirror-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 30px; border-radius:999px; font-size:15px; font-weight:500;
  cursor:pointer; transition:all .32s cubic-bezier(.16,1,.3,1);
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.11);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:#fff; position:relative; overflow:hidden;
  text-decoration:none; letter-spacing:.4px;
}
/* 扫光 */
.mirror-btn::before{
  content:""; position:absolute; top:0; left:-100%; width:70%; height:100%;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.32) 50%, transparent 70%);
  transform:skewX(-18deg); transition:left .55s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.mirror-btn:hover::before{ left:130%; }
.mirror-btn:hover{
  background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.48);
  transform:translateY(-2px); box-shadow:0 10px 32px rgba(0,0,0,.28);
}
.mirror-btn:active{ transform:translateY(0) scale(.97); }
/* 深底变体 */
.mirror-btn.on-dark{ color:#fff; border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.11); }
/* 浅底变体 */
.mirror-btn.on-light{
  color:var(--primary-deep); border-color:rgba(13,148,136,.28);
  background:rgba(255,255,255,.72); backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.mirror-btn.on-light:hover{ background:rgba(255,255,255,.88); border-color:var(--primary); }
.mirror-btn.on-light::before{ background:linear-gradient(105deg, transparent 30%, rgba(13,148,136,.16) 50%, transparent 70%); }

/* ---- 15. 模糊文本渐显（Blur Text Reveal）---- */
html.anim-ready .blur-text{
  opacity:0; filter:blur(18px); transform:translateY(16px);
  transition:opacity 1s cubic-bezier(.16,1,.3,1),
             filter 1s cubic-bezier(.16,1,.3,1),
             transform 1s cubic-bezier(.16,1,.3,1);
  will-change:opacity, filter, transform;
}
html.anim-ready .blur-text.revealed{
  opacity:1; filter:blur(0); transform:none; will-change:auto;
}

/* ---- 16. 博客画廊网格（Blog Gallery Grid）----
   二级文章列表页：玻璃卡片 + 标签筛选项 + 响应式网格 */
.blog-gallery{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:20px; }
@media(max-width:680px){ .blog-gallery{ grid-template-columns:1fr; } }
.blog-gallery .card{
  background:var(--glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px;
  transition:all .3s cubic-bezier(.16,1,.3,1); position:relative; overflow:hidden;
}
.blog-gallery .card:hover{
  transform:translateY(-6px); box-shadow:var(--shadow-lg);
  border-color:var(--primary); background:var(--surface);
}
.blog-gallery .card .tag-badge{
  display:inline-block; padding:4px 12px; border-radius:999px;
  font-size:12px; letter-spacing:.6px; font-weight:500;
  background:var(--tint); color:var(--primary); margin-bottom:14px;
}
.blog-gallery .card h3{
  font-family:var(--font-serif); font-size:19px; color:var(--ink);
  margin-bottom:10px; line-height:1.45;
}
.blog-gallery .card .meta{ font-size:13px; color:var(--muted); }
/* 标签筛选栏 */
.blog-tags{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:36px;
  justify-content:center;
}
.blog-tags button{
  padding:7px 18px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface); color:var(--muted); font-size:13.5px;
  cursor:pointer; transition:.22s; font-family:var(--font-sans);
}
.blog-tags button:hover{ border-color:var(--primary); color:var(--primary); }
.blog-tags button.active{ background:var(--primary); color:#fff; border-color:var(--primary); }

/* ---- 17. 导航玻璃升级 ---- */
.nav-glass{
  background:rgba(255,255,255,.54); backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.22);
}
[data-theme="dark"] .nav-glass{
  background:rgba(10,19,18,.68); backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border-bottom:1px solid rgba(45,212,191,.12);
}

/* ---- 移动端：关闭 Aurora / Tilt / 液态铬（GPU 负担重）与级联位移 ---- */
@media (max-width:768px){
  .aurora{ display:none; }
  .liquid-chrome-bg{ display:none; }
  .progressive-blur{ display:none; }
  html.anim-ready .stagger-kids > *{ opacity:1 !important; transform:none !important; animation:none !important; }
  html.anim-ready .blur-text{ opacity:1 !important; filter:none !important; transform:none !important; transition:none !important; }
}