/**
 * 移动端手势操作相关样式
 * 性能优化版本
 */

/* 全局性能优化 */
.gpu-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
    will-change: transform;
}

/* 滑动返回样式 */
.swipe-back-indicator {
    transform: translate3d(-100%, -50%, 0);
    will-change: transform, background-color;
}

.swipe-back-indicator i {
    transition: transform 0.2s ease;
    will-change: transform;
}

.swipe-back-indicator.active i {
    transform: translateX(5px);
}

/* 下拉刷新样式 */
.pull-to-refresh-indicator {
    color: var(--primary, #8F71D0);
    transform: translate3d(0, -100%, 0);
    will-change: transform;
}

.pull-to-refresh-spinner {
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pull-to-refresh-spinner i {
    font-size: 1.2rem;
    transition: transform 0.2s ease;
    will-change: transform;
}

/* 页面间过渡动画 */
.page-transition-overlay {
    pointer-events: none;
    z-index: 9999;
    will-change: opacity;
}

/* 滚动高亮效果 */
.scroll-highlight {
    position: relative;
    z-index: 1;
    will-change: box-shadow;
}

/* 图片缩放查看器样式 */
.image-zoom-viewer {
    -webkit-user-select: none;
    user-select: none;
    will-change: opacity;
}

.zoom-container {
    will-change: transform;
}

.zoom-container img {
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

.zoom-close-btn {
    opacity: 0.7;
    transition: opacity 0.2s ease, transform 0.2s ease;
    will-change: transform, opacity;
}

.zoom-close-btn:active {
    opacity: 1;
    transform: scale(0.9);
}

.zoom-hint-text {
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

/* 滚动到视图中的动画 - 性能优化 */
@media (prefers-reduced-motion: no-preference) {
    .animate-in {
        animation: bounce-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }

    @keyframes bounce-in {
        0% {
            opacity: 0;
            transform: translate3d(0, 20px, 0);
        }
        70% {
            opacity: 1;
            transform: translate3d(0, -5px, 0);
        }
        100% {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }
}

/* 优化低性能设备体验 */
@media (prefers-reduced-motion: reduce) {
    .animate-in {
        animation: none;
        opacity: 1;
        transform: none;
    }
    
    .will-animate {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* 滑动指示器 */
.swipe-indicator {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: rgba(143, 113, 208, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    will-change: opacity, transform;
}

.swipe-indicator i {
    color: var(--primary, #8F71D0);
    font-size: 1.2rem;
}

.swipe-indicator.visible {
    opacity: 1;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        transform: scale3d(1, 1, 1);
        box-shadow: 0 0 0 0 rgba(143, 113, 208, 0.4);
    }
    70% {
        transform: scale3d(1.1, 1.1, 1);
        box-shadow: 0 0 0 10px rgba(143, 113, 208, 0);
    }
    100% {
        transform: scale3d(1, 1, 1);
        box-shadow: 0 0 0 0 rgba(143, 113, 208, 0);
    }
}

/* 触感反馈增强 - 性能优化 */
.touch-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(143, 113, 208, 0.3);
    pointer-events: none;
    z-index: 10;
    will-change: transform, opacity;
    transform: scale3d(0, 0, 1);
}

@keyframes ripple {
    to {
        transform: scale3d(2.5, 2.5, 1);
        opacity: 0;
    }
}

/* 卡片滑动区域增强 */
.swipe-container {
    position: relative;
    overflow: hidden;
    -webkit-overflow-scrolling: touch; /* 增强iOS滚动性能 */
}

.swipe-hint {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translate3d(0, -50%, 0);
    width: 30px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary, #8F71D0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    animation: fade-in-out 2s infinite;
    pointer-events: none;
    z-index: 5;
    will-change: opacity;
}

@keyframes fade-in-out {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

/* 针对触摸设备的优化 */
@media (hover: none) and (pointer: coarse) {
    /* 增大触摸目标尺寸 */
    .swipe-back-indicator {
        width: 50px;
        height: 100px;
    }
    
    .zoom-close-btn {
        width: 50px;
        height: 50px;
    }
    
    /* 减少不必要的悬停效果，提升性能 */
    * {
        -webkit-tap-highlight-color: transparent;
    }
}

/* 低端设备优化 */
@supports not (backdrop-filter: blur(5px)) {
    .pull-to-refresh-indicator {
        background: rgba(255, 255, 255, 0.95);
    }
}