/**
 * TANDEMM Performance Optimizations
 * Reduces heavy visual effects on mobile for better performance
 * Created: 2026-01-31
 */

/* ===========================================
   MOBILE PERFORMANCE OPTIMIZATIONS
   =========================================== */

@media (max-width: 768px) {
    
    /* Reduce all box-shadows to simpler versions */
    .action-btn,
    .card,
    .modal-content,
    .popup,
    .dropdown,
    .toast {
        box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    }
    
    /* Remove complex multi-layer shadows */
    .action-btn.like,
    .action-btn.nope,
    .action-btn.superlike,
    .action-btn.skip {
        box-shadow: 0 3px 10px rgba(0,0,0,0.2) !important;
    }
    
    /* Disable blur effects - very expensive on mobile */
    .blur-bg,
    [class*="blur"] {
        filter: none !important;
        -webkit-filter: none !important;
    }
    
    /* Disable backdrop-filter - extremely expensive */
    *:not(.keep-blur) {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    /* Replace backdrop-filter with solid backgrounds */
    .modal-overlay,
    .popup-overlay,
    .overlay {
        background: rgba(0,0,0,0.7) !important;
        backdrop-filter: none !important;
    }
    
    /* Optimize transitions - only transform and opacity */
    * {
        transition-property: transform, opacity !important;
        transition-duration: 0.2s !important;
    }
    
    /* Disable animations on low-priority elements */
    .swipe-up-hint,
    .swipe-down-hint,
    .bounce,
    .pulse,
    .wiggle {
        animation: none !important;
    }
    
    /* Hardware acceleration hints */
    .card,
    .swipe-card,
    .action-btn,
    .slide,
    .v-slide,
    .modal,
    .chat-message {
        transform: translateZ(0);
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
    
    /* Reduce paint by hiding overflow */
    .swipe-container,
    .cards-container,
    .chat-messages {
        overflow: hidden;
        contain: layout style paint;
    }
    
    /* Optimize images */
    img {
        content-visibility: auto;
    }
    
    /* Reduce repaints on scroll */
    .scrollable,
    .chat-messages,
    .messages-list,
    .matches-list {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
}

/* ===========================================
   SKELETON LOADERS
   =========================================== */

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 8px;
}

.skeleton-circle {
    border-radius: 50%;
}

.skeleton-text {
    height: 14px;
    margin-bottom: 8px;
}

.skeleton-text.short {
    width: 60%;
}

.skeleton-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.skeleton-card {
    width: 100%;
    height: 400px;
    border-radius: 16px;
}

.skeleton-image {
    width: 100%;
    height: 200px;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Dark mode skeletons */
.dark-mode .skeleton {
    background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
    background-size: 200% 100%;
}

/* ===========================================
   LAZY LOADING STATES
   =========================================== */

img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s;
}

img[loading="lazy"].loaded,
img[loading="lazy"]:not([src=""]) {
    opacity: 1;
}

.img-placeholder {
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dark-mode .img-placeholder {
    background: #2a2a2a;
}

/* ===========================================
   OPTIMIZED BUTTONS (no heavy shadows)
   =========================================== */

.btn-optimized {
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.btn-optimized:active {
    transform: scale(0.95);
}

/* ===========================================
   CONTENT VISIBILITY FOR OFF-SCREEN CONTENT
   =========================================== */

.lazy-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

/* ===========================================
   REDUCE MOTION FOR USERS WHO PREFER IT
   =========================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}