/* ===== MATA AI - HERO HOVER SUPER RÁPIDO ===== */
/* Transiciones ultra rápidas para el hero video hover */

/* Transición base súper rápida */
.hero-video {
    transition: filter 0.12s ease-out !important;
    will-change: filter !important;
    backface-visibility: hidden !important;
    transform: translateZ(0) !important;
}

/* Hover inmediato en desktop */
@media (hover: hover) and (pointer: fine) {
    .hero:hover .hero-video,
    .hero-video-wrap:hover .hero-video,
    .hero-video:hover {
        filter: grayscale(0%) !important;
        transition: filter 0.08s ease-out !important;
    }
    
    .hero .hero-video {
        filter: grayscale(100%) !important;
    }
}

/* Mobile: mantener siempre a color sin transiciones */
@media (max-width: 768px) {
    .hero-video {
        filter: none !important;
        transition: none !important;
    }
}

/* Performance optimizations */
.hero {
    will-change: auto !important;
}

.hero-video-wrap {
    will-change: auto !important;
    contain: layout style paint !important;
}

/* Fallback para navegadores que no soportan hover */
@media (hover: none) {
    .hero-video {
        filter: none !important;
        transition: none !important;
    }
}

/* Reducir motion para usuarios con preferencias de accesibilidad */
@media (prefers-reduced-motion: reduce) {
    .hero-video {
        transition: none !important;
    }
}

/* Asegurar que nada más sobrescriba estas reglas */
body .hero .hero-video {
    transition: filter 0.12s ease-out !important;
}

body .hero:hover .hero-video {
    filter: grayscale(0%) !important;
    transition: filter 0.08s ease-out !important;
}