/**
 * ✅ OPTIMIZADO: TikTok Video Section CSS - Máximo Rendimiento
 * Eliminadas: reglas duplicadas, selectores innecesarios, animaciones no usadas
 */

/* ✅ Contenedor principal optimizado */
#tiktok-videos-container {
    contain: layout style paint;
}

/* ✅ Contenedores de video - GPU acceleration */
.video-container {
    contain: layout style paint;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    aspect-ratio: 9 / 16;
}

/* ✅ Placeholder optimizado - transparente */
.video-placeholder {
    contain: layout style paint;
    transform: translateZ(0);
    backface-visibility: hidden;
    cursor: pointer;
    transition: opacity 0.3s ease-in-out;
    background: transparent;
}

.video-placeholder:hover {
    transform: translateY(-2px) translateZ(0);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* ✅ Videos optimizados */
.tiktok-video {
    will-change: auto;
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
    z-index: 5;
}

.tiktok-video.visible {
    display: block !important;
    opacity: 1 !important;
    z-index: 20 !important;
}

.tiktok-video.hidden {
    display: none !important;
}

/* ✅ Botón de play optimizado */
.group:hover .group-hover\:bg-orange-600 {
    transform: scale(1.05);
}

/* ✅ Optimizaciones móvil */
@media (max-width: 768px) {
    .video-container {
        touch-action: manipulation;
    }
    
    .video-placeholder {
        transition-duration: 0.15s;
    }
}

/* ✅ Reducir movimiento */
@media (prefers-reduced-motion: reduce) {
    .video-placeholder,
    .tiktok-video {
        transition: none;
    }
    
    .group:hover .group-hover\:bg-orange-600 {
        transform: none;
    }
}

/* ✅ Conexiones lentas */
@media (prefers-reduced-data: reduce) {
    .video-placeholder::before {
        content: 'Video disponible - Toca para cargar';
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        color: rgba(255, 255, 255, 0.8);
        font-size: 12px;
        text-align: center;
    }
}

/* ✅ Alta densidad */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .video-placeholder {
        image-rendering: -webkit-optimize-contrast;
    }
}