/* ==========================================================================
   凡人修仙 · 文字与面板动效库 (Animations Stylesheet)
   ========================================================================== */

/* 1. 浮现渐入效果：透明度 0->1，向上微移 6px */
@keyframes fadeInEffect {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeInEffect 0.5s cubic-bezier(0.2, 0, 0.2, 1) forwards;
}

/* 2. 右侧滑入动效：用于右侧面板或弹层 */
@keyframes slideInRightEffect {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-right {
  animation: slideInRightEffect 0.4s ease-out forwards;
}

/* 3. 左侧滑入动效：用于左侧面板或属性显现 */
@keyframes slideInLeftEffect {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-left {
  animation: slideInLeftEffect 0.4s ease-out forwards;
}

/* 4. 关键文本高亮闪烁 (Flash) */
@keyframes textFlashEffect {
  0% {
    color: #ffffff;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.95);
  }
  50% {
    color: #f0c27f;
    text-shadow: 0 0 8px rgba(240, 194, 127, 0.7);
  }
  100% {
    text-shadow: none;
  }
}

.flash {
  animation: textFlashEffect 0.8s ease-out;
}

/* 5. 按钮灵光微动呼吸效果 (Pulse) */
@keyframes pulseGlowEffect {
  0%, 100% {
    box-shadow: 0 0 4px rgba(78, 204, 163, 0.2);
    border-color: rgba(78, 204, 163, 0.4);
  }
  50% {
    box-shadow: 0 0 12px rgba(78, 204, 163, 0.6);
    border-color: rgba(78, 204, 163, 0.9);
  }
}

.pulse {
  animation: pulseGlowEffect 2s infinite ease-in-out;
}

/* 6. 冷却遮罩收缩动效：从 100% 收缩至 0% */
@keyframes cooldownShrinkEffect {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

.cooldown-fill {
  animation: cooldownShrinkEffect linear forwards;
}

/* 7. 打字机光标闪烁动效 */
@keyframes typewriterCursor {
  from, to {
    border-right-color: transparent;
  }
  50% {
    border-right-color: var(--accent-color, #4ecca3);
  }
}

.typewriter {
  display: inline-block;
  overflow: hidden;
  white-space: pre-wrap;
  border-right: 2px solid transparent;
  animation: typewriterCursor 0.75s step-end infinite;
}

/* 8. 警示剧烈抖动效果 (Shake) */
@keyframes warningShakeEffect {
  0%, 100% {
    transform: translateX(0);
  }
  20%, 60% {
    transform: translateX(-4px);
  }
  40%, 80% {
    transform: translateX(4px);
  }
}

.shake {
  animation: warningShakeEffect 0.4s ease-in-out;
}

/* 9. 新面板显现动效：微缩放与透明度融合 */
@keyframes panelRevealEffect {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.panel-reveal {
  animation: panelRevealEffect 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}