/* Growth Hacker Game - UI Effects & Animations */
/* 增长黑客游戏 - UI效果与动画样式 */

/* ============================================
   1. 指标更新动画 (Metric Animations)
   ============================================ */

.metric-updating {
    animation: metricPulse 0.6s ease-out;
}

@keyframes metricPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
    }
    100% {
        transform: scale(1);
    }
}

/* 指标脉冲警告效果 */
.metric-pulse-danger {
    animation: pulseDanger 1.5s ease-in-out infinite;
    border: 2px solid #dc3545 !important;
}

.metric-pulse-warning {
    animation: pulseWarning 2s ease-in-out infinite;
    border: 2px solid #ffc107 !important;
}

.metric-pulse-success {
    animation: pulseSuccess 1s ease-in-out;
    border: 2px solid #28a745 !important;
}

@keyframes pulseDanger {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
        background-color: white;
    }
    50% {
        box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
        background-color: #fff5f5;
    }
}

@keyframes pulseWarning {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(255, 193, 7, 0);
    }
}

@keyframes pulseSuccess {
    0% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
    }
    100% {
        box-shadow: 0 0 0 20px rgba(40, 167, 69, 0);
    }
}

/* 指标变化数字动画 */
.metric-change {
    animation: fadeInUp 0.5s ease-out;
}

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

/* ============================================
   2. 里程碑粒子效果 (Milestone Particles)
   ============================================ */

.confetti-particle {
    animation: confettiFall 3s ease-out forwards;
}

@keyframes confettiFall {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, calc(-50% + 600px)) rotate(720deg) scale(0.5);
        opacity: 0;
    }
}

/* 里程碑提示消息 */
.milestone-toast {
    position: fixed;
    top: 20px;
    right: -400px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px 25px;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 10000;
    transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    max-width: 350px;
}

.milestone-toast.show {
    right: 20px;
}

.milestone-icon {
    font-size: 2.5em;
    animation: bounce 0.6s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.milestone-text {
    flex: 1;
    line-height: 1.5;
}

.milestone-text strong {
    font-size: 1.1em;
    display: block;
    margin-bottom: 5px;
}

/* ============================================
   3. 决策卡片动画 (Card Animations)
   ============================================ */

/* 卡片翻转效果 */
.skill-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: visible;
    cursor: grab;
}

.card-flipping {
    animation: cardFlip 0.6s ease-in-out;
}

@keyframes cardFlip {
    0% {
        transform: rotateY(0deg) scale(1);
    }
    50% {
        transform: rotateY(90deg) scale(0.95);
    }
    100% {
        transform: rotateY(0deg) scale(1);
    }
}

/* 卡片拖拽状态 */
.card-dragging {
    cursor: grabbing;
    transition: none !important;
    z-index: 100;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
}

/* 滑动提示 */
.swipe-left-hint {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.5) !important;
    background: linear-gradient(90deg, rgba(220, 53, 69, 0.1) 0%, white 50%);
}

.swipe-right-hint {
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.5) !important;
    background: linear-gradient(90deg, white 50%, rgba(40, 167, 69, 0.1) 100%);
}

/* 卡片选中效果 */
.card-selected {
    border-color: #28a745 !important;
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%) !important;
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 15px 40px rgba(40, 167, 69, 0.3) !important;
    position: relative;
}

.card-glow {
    position: absolute;
    inset: -4px;
    border-radius: 12px;
    background: linear-gradient(45deg, #28a745, #20c997, #28a745);
    background-size: 200% 200%;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: -1;
    filter: blur(10px);
}

.card-glow.active {
    opacity: 0.6;
    animation: glowRotate 3s linear infinite;
}

@keyframes glowRotate {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* 卡片悬浮增强效果 */
.skill-card:hover:not(.card-dragging) {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 35px rgba(102, 126, 234, 0.3);
}

.skill-card:hover .skill-icon {
    animation: iconBounce 0.5s ease-in-out;
}

@keyframes iconBounce {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

/* ============================================
   4. 成就弹窗系统 (Achievement Popup)
   ============================================ */

.achievement-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

.achievement-overlay.show {
    opacity: 1;
}

.achievement-unlock-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: white;
    padding: 50px;
    border-radius: 25px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    max-width: 500px;
    width: 90%;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    overflow: hidden;
}

.achievement-unlock-popup.show {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* 成就光晕背景 */
.achievement-glow {
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
    animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

.achievement-content {
    position: relative;
    z-index: 1;
}

/* 成就徽章 */
.achievement-badge {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 30px;
}

.achievement-icon {
    font-size: 80px;
    text-align: center;
    animation: achievementBounce 0.8s ease-out;
    position: relative;
    z-index: 2;
}

@keyframes achievementBounce {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.2) rotate(10deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* 成就光芒 */
.achievement-rays {
    position: absolute;
    inset: -20px;
    background:
        conic-gradient(from 0deg,
            transparent 0deg,
            rgba(255, 215, 0, 0.5) 45deg,
            transparent 90deg,
            rgba(255, 215, 0, 0.5) 135deg,
            transparent 180deg,
            rgba(255, 215, 0, 0.5) 225deg,
            transparent 270deg,
            rgba(255, 215, 0, 0.5) 315deg,
            transparent 360deg
        );
    animation: raysRotate 4s linear infinite;
    z-index: 1;
}

@keyframes raysRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 成就文本 */
.achievement-label {
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.8;
    margin-bottom: 10px;
    color: #ffd700;
}

.achievement-title {
    font-size: 2em;
    margin-bottom: 15px;
    background: linear-gradient(90deg, #ffd700, #ffed4e, #ffd700);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}

.achievement-description {
    font-size: 1.1em;
    line-height: 1.6;
    opacity: 0.9;
    margin-bottom: 30px;
}

/* 成就按钮 */
.achievement-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.achievement-actions button {
    padding: 12px 30px;
    border: none;
    border-radius: 25px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-share {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.btn-share:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
}

.btn-continue {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.btn-continue:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* 成就粒子 */
.achievement-particle {
    animation: particleFloat 2s ease-out forwards;
}

@keyframes particleFloat {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx, 0), var(--ty, 0)) scale(1);
        opacity: 0;
    }
}

/* 稀有度样式 */
.rarity-common .achievement-badge {
    filter: drop-shadow(0 0 20px rgba(192, 192, 192, 0.8));
}

.rarity-rare .achievement-badge {
    filter: drop-shadow(0 0 20px rgba(30, 144, 255, 0.8));
}

.rarity-epic .achievement-badge {
    filter: drop-shadow(0 0 20px rgba(138, 43, 226, 0.8));
}

.rarity-legendary .achievement-badge {
    filter: drop-shadow(0 0 30px rgba(255, 215, 0, 1));
}

/* ============================================
   5. 办公室场景可视化 (Office Scene)
   ============================================ */

.office-scene {
    position: relative;
    height: 200px;
    margin: 20px 0;
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.5s ease-out;
}

.office-background {
    position: absolute;
    inset: 0;
    transition: all 0.5s ease-out;
}

/* 车库 */
.office-scene.garage .office-background {
    background: linear-gradient(180deg, #4a5568 0%, #2d3748 100%);
}

.office-scene.garage::before {
    content: '🚗';
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-size: 3em;
    opacity: 0.5;
}

.office-scene.garage::after {
    content: '💡';
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2em;
}

/* 小办公室 */
.office-scene.small-office .office-background {
    background: linear-gradient(180deg, #edf2f7 0%, #e2e8f0 100%);
}

.office-scene.small-office::before {
    content: '🪑 🖥️';
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-size: 2em;
}

.office-scene.small-office::after {
    content: '📊';
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2em;
}

/* 中型办公室 */
.office-scene.medium-office .office-background {
    background: linear-gradient(180deg, #fef5e7 0%, #fbeee6 100%);
}

.office-scene.medium-office::before {
    content: '🪑🪑 🖥️🖥️';
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-size: 1.8em;
}

.office-scene.medium-office::after {
    content: '📈 🎯';
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2em;
}

/* 创业总部 */
.office-scene.startup-hq .office-background {
    background: linear-gradient(180deg, #e8f5e9 0%, #c8e6c9 100%);
}

.office-scene.startup-hq::before {
    content: '🏢';
    position: absolute;
    font-size: 5em;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.3;
}

.office-scene.startup-hq::after {
    content: '🚀 💰 🎉';
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2em;
}

.office-label {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.9em;
    backdrop-filter: blur(5px);
}

/* 办公室过渡动画 */
.office-scene.transitioning {
    animation: officeTransition 1s ease-in-out;
}

@keyframes officeTransition {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0;
        transform: scale(0.95);
    }
}

/* ============================================
   6. 屏幕震动效果 (Screen Shake)
   ============================================ */

.screen-shake {
    animation: screenShake 0.3s ease-in-out;
}

@keyframes screenShake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

/* ============================================
   7. 通用提示消息 (Toast Notifications)
   ============================================ */

.toast {
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    color: #333;
    padding: 15px 30px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    transition: bottom 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    font-weight: 500;
    min-width: 250px;
    text-align: center;
}

.toast.show {
    bottom: 30px;
}

.toast-success {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    color: #155724;
    border-left: 4px solid #28a745;
}

.toast-warning {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    color: #856404;
    border-left: 4px solid #ffc107;
}

.toast-error {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    color: #721c24;
    border-left: 4px solid #dc3545;
}

.toast-info {
    background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
    color: #0c5460;
    border-left: 4px solid #17a2b8;
}

/* ============================================
   8. 涟漪效果 (Ripple Effect)
   ============================================ */

.btn, .skill-card, .mode-card {
    position: relative;
    overflow: hidden;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transform: scale(0);
    animation: rippleEffect 0.6s ease-out;
}

@keyframes rippleEffect {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ============================================
   9. 加载与进度动画 (Loading & Progress)
   ============================================ */

.progress-bar {
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-bar.animated {
    animation: progressShine 2s ease-in-out infinite;
}

@keyframes progressShine {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: 200px 0;
    }
}

/* 脉冲加载器 */
.pulse-loader {
    display: inline-block;
    position: relative;
    width: 60px;
    height: 60px;
}

.pulse-loader div {
    position: absolute;
    border: 4px solid #667eea;
    opacity: 1;
    border-radius: 50%;
    animation: pulseLoader 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.pulse-loader div:nth-child(2) {
    animation-delay: -0.5s;
}

@keyframes pulseLoader {
    0% {
        top: 28px;
        left: 28px;
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        top: -1px;
        left: -1px;
        width: 58px;
        height: 58px;
        opacity: 0;
    }
}

/* ============================================
   10. 响应式优化 (Mobile Optimizations)
   ============================================ */

@media (max-width: 768px) {
    .milestone-toast {
        max-width: 90%;
        right: -100%;
        left: auto;
    }

    .milestone-toast.show {
        right: 5%;
    }

    .achievement-unlock-popup {
        padding: 30px 20px;
        max-width: 95%;
    }

    .achievement-title {
        font-size: 1.5em;
    }

    .achievement-icon {
        font-size: 60px;
    }

    .office-scene {
        height: 150px;
    }

    .card-dragging {
        transform: scale(1.05);
    }
}

/* 禁用动画（辅助功能） */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   11. 性能优化 (Performance)
   ============================================ */

/* 使用 GPU 加速 */
.skill-card,
.achievement-unlock-popup,
.confetti-particle,
.achievement-particle {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* 优化渲染 */
.office-background,
.achievement-glow {
    will-change: background;
}