/* 
 * 现代化点击动画效果库
 * 包含Material Design涟漪效果、缩放动画、淡出过渡等
 * 优化性能，支持移动端和桌面端
 */

/* ===== 基础动画变量 ===== */
:root {
    --ripple-duration: 250ms;
    --scale-duration: 200ms;
    --fade-duration: 300ms;
    --bounce-duration: 280ms;
    --primary-color: #ff6900;
    --ripple-color: rgba(255, 105, 0, 0.3);
    --ripple-color-light: rgba(255, 255, 255, 0.3);
}

/* ===== Material Design 涟漪效果 ===== */
.ripple-effect {
    position: relative;
    overflow: hidden;
    transform: translate3d(0, 0, 0); /* 启用硬件加速 */
}

.ripple-effect::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: var(--ripple-color);
    transform: translate(-50%, -50%);
    transition: width var(--ripple-duration) ease-out, height var(--ripple-duration) ease-out;
    pointer-events: none;
    z-index: 1;
}

.ripple-effect:active::before {
    width: 300px;
    height: 300px;
    transition: width var(--ripple-duration) ease-out, height var(--ripple-duration) ease-out;
}

/* 白色涟漪效果（用于深色背景） */
.ripple-effect-light::before {
    background: var(--ripple-color-light);
}

/* ===== 缩放点击动画 ===== */
.scale-click {
    transition: transform var(--scale-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translate3d(0, 0, 0);
}

.scale-click:active {
    transform: scale(0.95) translate3d(0, 0, 0);
}

/* 微妙缩放效果 */
.scale-subtle {
    transition: transform var(--scale-duration) ease-out;
    transform: translate3d(0, 0, 0);
}

.scale-subtle:active {
    transform: scale(0.98) translate3d(0, 0, 0);
}

/* ===== 弹性缩放动画 ===== */
.bounce-click {
    transition: transform var(--bounce-duration) cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform: translate3d(0, 0, 0);
}

.bounce-click:active {
    transform: scale(0.9) translate3d(0, 0, 0);
}

/* ===== 淡出过渡效果 ===== */
.fade-click {
    transition: opacity var(--fade-duration) ease-out, transform var(--scale-duration) ease-out;
    transform: translate3d(0, 0, 0);
}

.fade-click:active {
    opacity: 0.7;
    transform: scale(0.97) translate3d(0, 0, 0);
}

/* ===== 阴影点击效果 ===== */
.shadow-click {
    transition: box-shadow var(--scale-duration) ease-out, transform var(--scale-duration) ease-out;
    transform: translate3d(0, 0, 0);
}

.shadow-click:active {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(1px) translate3d(0, 0, 0);
}

/* ===== 组合动画效果 ===== */
.ripple-scale {
    position: relative;
    overflow: hidden;
    transition: transform var(--scale-duration) ease-out;
    transform: translate3d(0, 0, 0);
}

.ripple-scale::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: var(--ripple-color);
    transform: translate(-50%, -50%);
    transition: width var(--ripple-duration) ease-out, height var(--ripple-duration) ease-out;
    pointer-events: none;
    z-index: 1;
}

.ripple-scale:active {
    transform: scale(0.96) translate3d(0, 0, 0);
}

.ripple-scale:active::before {
    width: 200px;
    height: 200px;
}

/* ===== 专门为分类侧边栏设计的动画 ===== */
.category-item-animated {
    position: relative;
    overflow: hidden;
    transition: all var(--scale-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translate3d(0, 0, 0);
}

.category-item-animated::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left var(--ripple-duration) ease-out;
    pointer-events: none;
    z-index: 1;
}

.category-item-animated:active {
    transform: scale(0.98) translate3d(0, 0, 0);
    background-color: rgba(255, 105, 0, 0.05);
}

.category-item-animated:active::before {
    left: 100%;
}

/* 激活状态的分类项动画 */
.category-item-animated.active {
    background-color: var(--primary-color);
    color: white;
    box-shadow: 0 2px 8px rgba(255, 105, 0, 0.3);
}

.category-item-animated.active::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

/* ===== 按钮专用动画 ===== */
.btn-animated {
    position: relative;
    overflow: hidden;
    transition: all var(--scale-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translate3d(0, 0, 0);
}

.btn-animated::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width var(--ripple-duration) ease-out, height var(--ripple-duration) ease-out;
    pointer-events: none;
    z-index: 1;
}

.btn-animated:active {
    transform: scale(0.95) translate3d(0, 0, 0);
}

.btn-animated:active::before {
    width: 300px;
    height: 300px;
}

/* ===== 卡片点击动画 ===== */
.card-click {
    transition: all var(--scale-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translate3d(0, 0, 0);
}

.card-click:active {
    transform: scale(0.98) translateY(2px) translate3d(0, 0, 0);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ===== 链接点击动画 ===== */
.link-animated {
    position: relative;
    transition: color var(--fade-duration) ease-out;
    transform: translate3d(0, 0, 0);
}

.link-animated::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: width var(--scale-duration) ease-out;
}

.link-animated:active::after {
    width: 100%;
}

/* ===== 图标旋转动画 ===== */
.icon-rotate {
    transition: transform var(--scale-duration) ease-out;
    transform: translate3d(0, 0, 0);
}

.icon-rotate:active {
    transform: rotate(15deg) translate3d(0, 0, 0);
}

/* ===== 粒子扩散效果 ===== */
@keyframes particle-burst {
    0% {
        opacity: 1;
        transform: scale(0) translate3d(0, 0, 0);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.2) translate3d(0, 0, 0);
    }
    100% {
        opacity: 0;
        transform: scale(1.5) translate3d(0, 0, 0);
    }
}

.particle-effect {
    position: relative;
    overflow: visible;
    transform: translate3d(0, 0, 0);
}

.particle-effect::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
    z-index: 10;
}

.particle-effect:active::after {
    animation: particle-burst var(--ripple-duration) ease-out;
}

/* ===== 移动端优化 ===== */
@media (max-width: 768px) {
    :root {
        --ripple-duration: 200ms;
        --scale-duration: 150ms;
        --fade-duration: 250ms;
        --bounce-duration: 200ms;
    }
    
    /* 增大移动端触摸区域的涟漪效果 */
    .ripple-effect:active::before {
        width: 200px;
        height: 200px;
    }
    
    /* 移动端减少缩放幅度 */
    .scale-click:active {
        transform: scale(0.97) translate3d(0, 0, 0);
    }
    
    .bounce-click:active {
        transform: scale(0.95) translate3d(0, 0, 0);
    }
}

/* ===== 高性能优化 ===== */
/* 为所有动画元素启用硬件加速 */
.ripple-effect,
.scale-click,
.scale-subtle,
.bounce-click,
.fade-click,
.shadow-click,
.ripple-scale,
.category-item-animated,
.btn-animated,
.card-click,
.link-animated,
.icon-rotate,
.particle-effect {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* 减少重绘和重排 */
.ripple-effect::before,
.ripple-scale::before,
.category-item-animated::before,
.btn-animated::before,
.particle-effect::after {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ===== 无障碍支持 ===== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .ripple-effect::before,
    .ripple-scale::before,
    .category-item-animated::before,
    .btn-animated::before,
    .particle-effect::after {
        display: none;
    }
}

/* ===== 深色模式适配 ===== */
@media (prefers-color-scheme: dark) {
    :root {
        --ripple-color: rgba(255, 255, 255, 0.2);
        --ripple-color-light: rgba(255, 255, 255, 0.1);
    }
}