/* ================================================================
   interactions.css — 全局交互动画层
   统一各游戏的页面切换、答题反馈、按钮点击等交互体验
   ================================================================ */

/* ===== 1. 页面切换过渡 ===== */
/* 统一的页面进入动画：淡入 + 上移 */
@keyframes ui-page-enter {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 为没有自带 fadeIn 的 .page 提供统一过渡 */
.page { animation: ui-page-enter 0.3s var(--ease-out); }

/* ===== 2. 答题反馈动画 ===== */
/* 统一的错误抖动动画（替代各游戏自定义的 shake） */
@keyframes ui-shake {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-6px); }
    30% { transform: translateX(6px); }
    45% { transform: translateX(-4px); }
    60% { transform: translateX(4px); }
    75% { transform: translateX(-2px); }
    90% { transform: translateX(2px); }
}

.ui-shake { animation: ui-shake 0.4s var(--ease-out); }

/* 答对反馈：绿色脉冲 */
@keyframes ui-correct-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.ui-correct { animation: ui-correct-pulse 0.3s var(--ease-spring); }

/* ===== 3. 通用按钮点击反馈 ===== */
/* 为非 .ui-btn 的游戏专用按钮提供统一的 :active 反馈 */
.ui-back-btn:active,
.btn-nav:active,
.btn-icon:active,
.btn-icon-tool:active,
.btn-reset:active,
.disk-btn:active,
.mode-tab:active,
.mode-card:active,
.diff-card:active,
.level-card:active,
.level-chip:active,
.chapter-card:active,
.classroom-card:active,
.classroom-entry:active,
.option:active,
.option-card:active,
.quiz-option:active,
.tutorial-entry:active,
.tool-btn:active,
.view-rot-btn:active,
.piece-chip:active,
.stage-card:active,
.card-item:active,
.footer-card:active,
.inst-item:active {
    transform: scale(0.96);
    transition: transform var(--duration-fast) var(--ease-out);
}

/* 可点击卡片的 hover 提升效果（通用） */
.mode-card:hover,
.diff-card:hover,
.chapter-card:hover,
.classroom-card:hover,
.classroom-entry:hover,
.stage-card:hover,
.footer-card:hover {
    transform: translateY(-2px);
    transition: transform var(--duration-normal) var(--ease-out);
}

/* ===== 4. 过关庆祝增强 ===== */
/* 弹窗图标的弹性弹出（统一 blocks 的 pop 和 shikaku 的 s2PopIn） */
@keyframes ui-pop {
    0% { transform: scale(0); }
    60% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.ui-modal-emoji { animation: ui-pop 0.5s var(--ease-spring); }

/* ===== 5. 视图切换（orchesta 等用 view 级切换的游戏） ===== */
.ui-view-enter { animation: ui-page-enter 0.25s var(--ease-out); }

/* ===== 6. 数字跳动动画（计分、计时器变化时） ===== */
@keyframes ui-number-bounce {
    0% { transform: scale(1); }
    30% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.ui-number-bounce { animation: ui-number-bounce 0.4s var(--ease-spring); }