/* ========================================
   Blue Archive 官网风格 - 动画系统
   ======================================== */

/* ---- 全局 ---- */
*,
*::before,
*::after {
  transition-timing-function: ease;
}

/* ---- 弹跳动画 ---- */
@keyframes ba-bounce {
  0%   { transform: translateY(-1.667rem); }
  50%  { transform: translateY(0); }
  100% { transform: translateY(-1.667rem); }
}

.bounce-top {
  animation: ba-bounce 1s both infinite;
}

/* ---- 终端打字光标 ---- */
@keyframes typewriter-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

.typewriter::after {
  content: '▍';
  margin-left: 0.1em;
  animation: typewriter-blink 0.8s step-end infinite;
}

/* ---- 淡入 ---- */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.fade-in {
  animation: fade-in 0.5s ease both;
}

/* ---- 上方滑入 ---- */
@keyframes slide-in-top {
  from { transform: translateY(-3.333rem); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.slide-in-top {
  animation: slide-in-top 1s ease both;
}

/* ---- 右侧滑入 ---- */
@keyframes slide-in-right {
  from { transform: translateX(3.333rem); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

.slide-in-right {
  animation: slide-in-right 1s ease both;
}

/* ---- 底部滑入 ---- */
@keyframes slide-in-bottom {
  from { transform: translateY(3.333rem); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.slide-in-bottom {
  animation: slide-in-bottom 0.8s ease both;
}

/* ---- 级联入场动画 ---- */
.cascade-list > *:nth-child(1)  { animation: slide-in-right 0.5s ease 0s both; }
.cascade-list > *:nth-child(2)  { animation: slide-in-right 0.5s ease 0.1s both; }
.cascade-list > *:nth-child(3)  { animation: slide-in-right 0.5s ease 0.2s both; }
.cascade-list > *:nth-child(4)  { animation: slide-in-right 0.5s ease 0.3s both; }
.cascade-list > *:nth-child(5)  { animation: slide-in-right 0.5s ease 0.4s both; }
.cascade-list > *:nth-child(6)  { animation: slide-in-right 0.5s ease 0.5s both; }
.cascade-list > *:nth-child(7)  { animation: slide-in-right 0.5s ease 0.6s both; }
.cascade-list > *:nth-child(8)  { animation: slide-in-right 0.5s ease 0.7s both; }
.cascade-list > *:nth-child(9)  { animation: slide-in-right 0.5s ease 0.8s both; }
.cascade-list > *:nth-child(10) { animation: slide-in-right 0.5s ease 0.9s both; }

/* 底部级联 */
.cascade-up > *:nth-child(1)  { animation: slide-in-bottom 0.5s ease 0s both; }
.cascade-up > *:nth-child(2)  { animation: slide-in-bottom 0.5s ease 0.1s both; }
.cascade-up > *:nth-child(3)  { animation: slide-in-bottom 0.5s ease 0.15s both; }
.cascade-up > *:nth-child(4)  { animation: slide-in-bottom 0.5s ease 0.2s both; }
.cascade-up > *:nth-child(5)  { animation: slide-in-bottom 0.5s ease 0.25s both; }
.cascade-up > *:nth-child(6)  { animation: slide-in-bottom 0.5s ease 0.3s both; }

/* ---- hover 效果 ---- */
.ba-card {
  background: var(--ba-glass-bg);
  border: 1px solid var(--ba-glass-border);
  border-radius: 12px;
  transition: all 0.3s ease;
}
.ba-card:hover {
  background: var(--ba-glass-bg-hover);
  border-color: var(--ba-glass-border-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(210, 224, 4, 0.2);
}

/* ---- 按钮 ---- */
.ba-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  background: var(--ba-primary);
  color: #384057;
  border: none;
  border-radius: 8px;
  font-family: var(--ba-font-heading-zh);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}
.ba-btn:hover {
  background: var(--ba-primary-hover);
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(245, 128, 33, 0.3);
}

/* ---- 标签云 pill ---- */
.tag-pill {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: rgba(210, 224, 4, 0.15);
  color: var(--ba-primary-hover);
  border: 1px solid rgba(210, 224, 4, 0.25);
  border-radius: 999px;
  font-size: 0.8rem;
  text-decoration: none;
  transition: all 0.3s ease;
}
.tag-pill:hover {
  background: rgba(245, 128, 33, 0.2);
  border-color: var(--ba-primary);
  color: var(--ba-text);
}

/* ---- will-change ---- */
.wc-opacity { will-change: opacity; }
.wc-transform { will-change: transform; }
.wc-both { will-change: transform, opacity; }

/* ---- 过渡工具类 ---- */
.transition-fast { transition: all 0.3s ease; }
.transition-normal { transition: all 0.5s ease; }