/* Aether — 动画系统 */

/* ===== Mesh 背景缓慢漂移 ===== */

.mesh-blob--1 {
  animation: meshDrift1 55s ease-in-out infinite;
}
.mesh-blob--2 {
  animation: meshDrift2 62s ease-in-out infinite;
}
.mesh-blob--3 {
  animation: meshDrift3 70s ease-in-out infinite;
}
.mesh-blob--4 {
  animation: meshDrift4 58s ease-in-out infinite;
}

@keyframes meshDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(60px, 40px) scale(1.05); }
  50%      { transform: translate(-30px, 80px) scale(0.95); }
  75%      { transform: translate(40px, -20px) scale(1.02); }
}

@keyframes meshDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(-50px, 60px) scale(1.08); }
  66%      { transform: translate(40px, -40px) scale(0.96); }
}

@keyframes meshDrift3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  30%      { transform: translate(70px, -30px) scale(0.97); }
  60%      { transform: translate(-40px, 50px) scale(1.06); }
}

@keyframes meshDrift4 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(-60px, -40px) scale(1.04); }
  80%      { transform: translate(30px, 60px) scale(0.98); }
}

.mesh-bg--paused .mesh-blob {
  animation-play-state: paused;
}

/* ===== 共享轴页面切换 (Shared Axis Z) ===== */

.page--enter {
  animation: pageSharedIn 0.36s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.page--exit {
  animation: pageSharedOut 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes pageSharedIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pageSharedOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-12px) scale(0.98);
  }
}

/* ===== Fade-up 交错入场 ===== */

.fade-up.visible { transition-delay: 0s; }
.fade-up.visible:nth-child(1) { transition-delay: 0s; }
.fade-up.visible:nth-child(2) { transition-delay: 0.06s; }
.fade-up.visible:nth-child(3) { transition-delay: 0.12s; }
.fade-up.visible:nth-child(4) { transition-delay: 0.18s; }
.fade-up.visible:nth-child(5) { transition-delay: 0.24s; }
.fade-up.visible:nth-child(6) { transition-delay: 0.30s; }

/* ===== 环形进度描边动画 ===== */

.ring-fill {
  transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes ringPulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(124, 92, 252, 0.2)); }
  50%      { filter: drop-shadow(0 0 12px rgba(124, 92, 252, 0.4)); }
}

.ring-svg.animated .ring-fill {
  animation: ringPulse 3s ease-in-out infinite;
}

/* ===== countUp 数字闪烁(已由JS完成, 此处提供 fallback 动效) ===== */

@keyframes numberPop {
  0%   { transform: scale(0.8); opacity: 0; }
  60%  { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

.ring-number.counting {
  animation: numberPop 0.5s ease-out;
}

/* ===== 图标条指示器滑动 ===== */

.icon-rail__indicator {
  transition: top 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== 玻璃卡片 hover 浮升 ===== */

.glass-panel {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s ease,
              border-color 0.3s ease;
}

/* ===== 按钮点击波纹 ===== */

.btn-glass { position: relative; overflow: hidden; }

.btn-glass::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(124, 92, 252, 0.15) 0%, transparent 70%);
  opacity: 0;
  transform: scale(0);
  transition: transform 0.4s, opacity 0.4s;
}

.btn-glass:active::after {
  opacity: 1;
  transform: scale(2.5);
  transition: transform 0s, opacity 0s;
}

/* ===== Logo 呼吸辉光 ===== */

@keyframes logoPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 92, 252, 0.2); }
  50%      { box-shadow: 0 0 0 8px rgba(124, 92, 252, 0); }
}

.icon-rail__logo {
  animation: logoPulse 4s ease-in-out infinite;
}

/* ===== Status dot 在线脉冲 ===== */

@keyframes statusPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}

.status-dot.online {
  background: var(--success);
  animation: statusPulse 2s ease-in-out infinite;
}

/* ===== 移动端标签栏入场 ===== */

@keyframes tabBarSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.mobile-tab-bar {
  animation: tabBarSlideUp 0.35s ease-out;
}

/* ===== Drawer 弹窗背景模糊渐入 ===== */

.modal-overlay {
  transition: opacity 0.35s ease;
}

.modal--visible .modal-overlay {
  opacity: 1;
}