/* ========================================
   动画效果
   开箱翻转、高亮脉冲、报价弹出等动效
======================================== */

/* ========================================
   箱子翻转动画（核心开箱效果）
======================================== */
.case {
    perspective: 1000px;
}

.case__inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.case__front,
.case__back {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    border-radius: var(--radius-md);
    border: 3px solid var(--color-case-front-border);
}

.case__front {
    background: var(--color-case-front-bg);
    color: var(--color-case-front-text);
    font-family: var(--font-family-display);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xl);
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    z-index: 2;
}

.case__back {
    background: linear-gradient(145deg, var(--color-case-opened), var(--color-case-opened-border));
    color: var(--color-text-on-dark);
    font-family: var(--font-family-mono);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    transform: rotateY(180deg);
    border-color: var(--color-case-opened-border);
}

/* 低值箱子背面 */
.case--low .case__back { background: linear-gradient(145deg, #ff6b6b, #ee5a5a); }

/* 高值箱子背面 */
.case--high .case__back { background: linear-gradient(145deg, var(--color-primary), var(--color-primary-dark)); }

/* 翻转动画触发类 */
.case--flipping .case__inner { transform: rotateY(180deg); }

/* 翻转完成后的状态 - 保持背面朝前 */
.case--opened .case__inner { transform: rotateY(180deg); }
.case--opened .case__front { display: none; }
.case--opened .case__back { transform: rotateY(0); }

/* 玩家箱子不翻转，保持正面 */
.case--player .case__inner { transform: none !important; }
.case--player .case__back { display: none; }

/* ========================================
   金额列表高亮动画
======================================== */
@keyframes moneyHighlight {
    0% { background: transparent; transform: scale(1); }
    20% { background: var(--color-warning); color: var(--color-text-on-primary); transform: scale(1.05); }
    40% { background: var(--color-primary); color: var(--color-text-on-primary); transform: scale(1); }
    60% { background: var(--color-warning); color: var(--color-text-on-primary); transform: scale(1.05); }
    100% { background: var(--color-bg-tertiary); color: var(--color-text-muted); transform: scale(1); }
}

.money-item--animating {
    animation: moneyHighlight 1.2s ease-out forwards;
}

/* ========================================
   银行家电话铃声动画
======================================== */
@keyframes phoneRing {
    0%, 100% { transform: rotate(0deg) scale(1); }
    10% { transform: rotate(-20deg) scale(1.1); }
    20% { transform: rotate(20deg) scale(1.1); }
    30% { transform: rotate(-15deg) scale(1.05); }
    40% { transform: rotate(15deg) scale(1.05); }
    50% { transform: rotate(-10deg) scale(1); }
    60% { transform: rotate(10deg) scale(1); }
    70% { transform: rotate(-5deg) scale(1); }
    80% { transform: rotate(5deg) scale(1); }
    90% { transform: rotate(0deg) scale(1); }
}

.banker-modal__phone--ringing { animation: phoneRing 1.5s ease-in-out infinite; }

/* ========================================
   报价金额数字滚动动画
======================================== */
@keyframes countUp {
    from { opacity: 0; transform: translateY(20px) scale(0.8); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.banker-modal__amount--animating {
    animation: countUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 数字逐位滚动效果（通过JS实现，这里定义基础样式） */
.count-digit {
    display: inline-block;
    min-width: 0.6em;
    text-align: center;
    transition: transform 0.1s ease, opacity 0.1s ease;
}
.count-digit--rolling { animation: digitRoll 0.3s ease-out; }
@keyframes digitRoll {
    0% { transform: translateY(-1.2em); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* ========================================
   按钮点击反馈
======================================== */
@keyframes btnPress {
    0% { transform: scale(1); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
}
.btn:active:not(:disabled) { animation: btnPress 0.1s ease; }

/* ========================================
   模态框入场/离场
======================================== */
.modal-enter { animation: modalEnter 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.modal-exit { animation: modalExit 0.25s ease-in forwards; pointer-events: none; }

@keyframes modalEnter {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes modalExit {
    from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    to { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}

/* 背景遮罩 */
.modal-backdrop-enter { animation: fadeIn 0.3s ease forwards; }
.modal-backdrop-exit { animation: fadeOut 0.25s ease forwards; pointer-events: none; }

/* ========================================
   结果揭示动画
======================================== */
@keyframes resultReveal {
    0% { opacity: 0; transform: scale(0.5) rotate(-10deg); }
    50% { transform: scale(1.1) rotate(2deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.result-modal__summary--reveal { animation: resultReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

@keyframes slideUpFade {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.result-modal__details--reveal {
    animation: slideUpFade 0.6s ease-out 0.3s forwards;
    opacity: 0;
}

.btn--restart--reveal {
    animation: slideUpFade 0.6s ease-out 0.5s forwards;
    opacity: 0;
}

/* ========================================
   玩家箱子发光脉冲
======================================== */
@keyframes playerGlow {
    0%, 100% {
        box-shadow:
            var(--shadow-md),
            0 0 20px var(--color-case-player-glow),
            0 0 40px var(--color-case-player-glow);
    }
    50% {
        box-shadow:
            var(--shadow-md),
            0 0 30px var(--color-case-player-glow),
            0 0 60px var(--color-case-player-glow),
            0 0 80px var(--color-case-player-glow);
    }
}

.case--player,
.player-case__box {
    animation: playerGlow 2.5s ease-in-out infinite;
}

/* 玩家箱子翻转动画（接受报价 / 最终揭晓时打开自己的箱子） */
/* 仅补充 3D 透视与字号，翻转动效复用通用 .case__* 规则 */
.player-case__box { perspective: 1000px; }
.player-case__box .case__front { font-size: var(--font-size-4xl); }

/* ========================================
   轮次进度条动画
======================================== */
@keyframes progressFill {
    from { width: 0%; }
    to { width: 100%; }
}

.round-progress-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    border-radius: var(--radius-full);
    transition: width 0.5s ease-out;
}

/* ========================================
   交换箱子动画
======================================== */
@keyframes caseSwap {
    0% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(-20px) rotate(-5deg); }
    50% { transform: translateX(20px) rotate(5deg); }
    75% { transform: translateX(-10px) rotate(-2deg); }
    100% { transform: translateX(0) rotate(0deg); }
}

.switch-case__box--swapping { animation: caseSwap 0.6s ease-in-out; }

/* ========================================
   粒子/闪光效果（大奖时）
======================================== */
@keyframes sparkle {
    0% { opacity: 0; transform: scale(0) rotate(0deg); }
    50% { opacity: 1; transform: scale(1) rotate(180deg); }
    100% { opacity: 0; transform: scale(0) rotate(360deg); }
}

.sparkle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
    pointer-events: none;
    animation: sparkle 1s ease-out forwards;
}

/* ========================================
   加载/过渡骨架屏
======================================== */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-bg-tertiary) 25%,
        var(--color-border-light) 50%,
        var(--color-bg-tertiary) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

/* ========================================
   减少动画偏好媒体查询
======================================== */
/* ========================================
    选箱动画：飞行、提示离场、网格落位、玩家箱子到达
======================================== */

/* 飞行中的箱子克隆体：从网格飞向"你的箱子"区域 */
.case-fly {
    position: fixed;
    z-index: 1000;
    pointer-events: none;
    will-change: transform;
    /* 柔和的缓出曲线，避免突兀 */
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.case-fly .case__inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
}
.case-fly .case__front {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    border-radius: var(--radius-md);
    border: 3px solid var(--color-case-front-border);
    background: var(--color-case-front-bg);
    color: var(--color-case-front-text);
    font-family: var(--font-family-display);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xl);
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* 选择提示横幅平滑离场（替代生硬的 hidden 立即消失） */
.instruction-banner--leaving {
    animation: bannerLeave 0.5s ease forwards;
    pointer-events: none;
}
@keyframes bannerLeave {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-12px); }
}

/* 选箱后，剩余箱子轻柔落位，避免画面"啪"地一下跳变 */
.cases-grid.is-settling .case {
    animation: caseSettle 0.45s ease both;
}
@keyframes caseSettle {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

/* "你的箱子"区域淡入（仅透明度，避免影响飞行目标定位） */
.player-case-display--fade {
    animation: fadeInSoft 0.45s ease !important;
}
@keyframes fadeInSoft {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 玩家箱子盒子：等待到达时的占位脉冲 & 到达后的轻柔弹入 */
.player-case__box--incoming {
    border-style: dashed;
    animation: playerCaseIncoming 1s ease-in-out infinite;
}
@keyframes playerCaseIncoming {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 0.9; }
}
.player-case__box--arrived {
    /* 覆盖基础 playerGlow，仅本次到达时播放，结束后移除类以恢复发光 */
    animation: playerCaseArrive 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
@keyframes playerCaseArrive {
    from { transform: scale(0.7); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .case__inner { transition: none; }
    .case--flipping .case__inner { transform: rotateY(180deg); }
}

/* ========================================
   焦点可见性增强
======================================== */
:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* 箱子键盘焦点 */
.case:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
    z-index: 10;
    transform: scale(1.05);
}

/* ========================================
   工具提示动画
======================================== */
@keyframes tooltipShow {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.tooltip {
    animation: tooltipShow 0.2s ease-out;
}