/* Contenedor del video */
.video-fx-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Excepción cuando el contenedor se usa como fondo (hero__bg) */
.video-fx-container.hero__bg {
    position: absolute;
    max-width: none;
    border-radius: 0;
    margin: 0;
    box-shadow: none;
}

.video-fx-container video {
    width: 100%;
    height: auto;
    display: block;
    /* Transición suave para opacidad, transformación (animación) y filtros */
    transition: opacity 0.8s ease-in-out, filter 1s ease-in-out, transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform: scale(1) translateY(0);
}

/* Clases para efectos de transición (desvanecido y movimiento) */
.video-fx-fade-out {
    opacity: 0;
    transform: scale(0.9) translateY(30px);
}

.video-fx-fade-in {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Clases para filtros */
.filter-none {
    filter: none;
}

.filter-grayscale {
    filter: grayscale(100%);
}

.filter-sepia {
    filter: sepia(100%);
}

.filter-blur {
    filter: blur(2px);
}

.filter-brightness {
    filter: brightness(150%);
}

.filter-contrast {
    filter: contrast(150%);
}

.filter-hue-rotate {
    filter: hue-rotate(90deg);
}

/* Opcion de manipulación con el color sólido */
.video-fx-container::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #a0c7ff;
    mix-blend-mode: color; /* Aplica el color manteniendo la luminosidad del video */
    opacity: 0; /* Inactivo por defecto */
    pointer-events: none;
    transition: opacity 0.8s ease-in-out;
}

/* Se activa el color cuando el video tiene esta clase usando el selector :has() */
.video-fx-container:has(> video.filter-custom-color)::after {
    opacity: 0.85; /* Ajusta la intensidad del tinte aquí */
}

/* Opción de manipulación con degradado lineal (de abajo hacia arriba) */
.video-fx-container::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Degradado lineal de abajo (bottom) hacia arriba (top) con dos colores */
    background: linear-gradient(to top, #4B5D16, #ECE2CE); 
    mix-blend-mode: overlay; /* overlay o soft-light suelen verse muy bien con degradados */
    opacity: 0; /* Inactivo por defecto */
    pointer-events: none;
    transition: opacity 0.8s ease-in-out;
    z-index: 1;
}

/* Se activa el degradado cuando el video tiene esta clase */
.video-fx-container:has(> video.filter-gradient-tint)::before {
    opacity: 0.8; /* Ajusta la intensidad del degradado aquí */
}

/* Controles de demostración */
.video-fx-controls {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
    padding: 10px;
}

.video-fx-controls button {
    padding: 8px 16px;
    background: #333;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
    font-size: 14px;
}

.video-fx-controls button:hover {
    background: #555;
}

.video-fx-controls button.active {
    background: #007bff;
}