/* =====================================================
   particles.css —— 粒子层与微交互相关样式
   粒子本体由 core.js 的 canvas 渲染；这里负责按钮按压、卡片浮现、
   爱心迸发容器、表情面板等过渡动效。

   本次改动要点（只改视觉与动画实现，不改任何功能）：
   1) .fab 的呼吸光圈：原来是 animation 动 box-shadow 的 spread
      （每帧都要重绘阴影），改为 ::before / ::after 两层伪元素
      只动 transform: scale + opacity 的双层光环，观感一致且走合成层；
   2) 闪屏进度条 loadbar：原来是动 width（触发重排），改为
      transform: scaleX，元素宽度固定 100%。
   ===================================================== */

/* canvas 粒子层由 JS 注入，指针穿透 */
#particleCanvas { display: block; }

/* 按钮微交互：按压缩放 + 回弹 */
.btn-primary, .btn-ghost, .btn-danger, .fab, .chip {
  transition: transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, background .25s ease, opacity .2s;
}
.btn-primary:active, .btn-ghost:active, .chip:active { transform: scale(.94); }

/* 主按钮带微光渐变 */
.btn-primary {
  background: var(--gradient);
  color: #fff;
  box-shadow: var(--shadow);
}
.btn-primary:hover { filter: brightness(1.05); }

/* 卡片入场浮起动效 */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.card, .moment-item, .list-card, .msg { animation: cardIn .32s ease both; }

/* 点赞爱心跳动 */
@keyframes heartPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.45); }
  100% { transform: scale(1); }
}
.heart-pop { display: inline-block; animation: heartPop .4s ease; }

/* 点赞按钮已激活态 */
.like-btn.liked { color: var(--accent); }
.like-btn.liked .like-icon { animation: heartPop .4s ease; }

/* 收藏星星 */
.fav-btn.faved { color: #ffb020; }

/* 气泡进场 */
@keyframes bubbleIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.msg { animation: bubbleIn .22s ease; }

/* 发布 FAB 呼吸光圈：
   两层伪元素各画一圈主色圆环，只动 transform: scale 与 opacity，
   不再动 box-shadow 的 spread（阴影动画每帧重绘，手机上很贵）。
   伪元素 pointer-events: none，不会抢 FAB 自己的点击。 */
/* 注意：不要在这里重写 position —— .fab 在 style.css 里是 position: fixed，
   fixed 本身就是绝对定位伪元素的包含块，足够用 */
.fab { box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.fab::before, .fab::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--particle);
  opacity: 0;
  pointer-events: none;
  transform: scale(1);
  will-change: transform, opacity;
}
.fab::before { animation: fabRing 2.6s cubic-bezier(.22,.61,.36,1) infinite; }
.fab::after  { animation: fabRing 2.6s cubic-bezier(.22,.61,.36,1) infinite 1.3s; }
@keyframes fabRing {
  0%   { transform: scale(1);    opacity: .55; }
  70%  { transform: scale(1.42); opacity: 0; }
  100% { transform: scale(1.42); opacity: 0; }
}

/* 时间胶囊锁定摇动 */
@keyframes wiggle { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-4deg)} 75%{transform:rotate(4deg)} }
.capsule-locked { animation: wiggle 2.4s ease-in-out infinite; }

/* 表情回应面板弹出 */
@keyframes panelUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.sheet { animation: panelUp .25s ease; }

/* 顶部加载条：动 transform: scaleX 而不是 width（width 会触发重排） */
@keyframes loadbar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.splash-bar-fill {
  width: 100%;
  transform-origin: left center;
  animation: loadbar 1.6s ease forwards;
}

/* 闪屏心跳 */
@keyframes beat { 0%,100%{transform:scale(1)} 50%{transform:scale(1.18)} }
.heart { animation: beat 1.2s ease-in-out infinite; }

/* 页面切换淡入 */
@keyframes fadePage { from { opacity: 0; } to { opacity: 1; } }
.tab-page.active { animation: fadePage .25s ease; }

/* 角标红点呼吸：改由 ui-pro.css 的伪元素环实现（只动 transform/opacity） */