/* ============================================================
   FILM-STRIP.CSS - ESTRUCTURA CINEMATOGRÁFICA
   ============================================================ */

.film-vault {
    padding: 50px 0 !important;
    display: flex;
    flex-direction: column;
    gap: 120px;
    background-color: #000;
}

.film-strip {
    background: #111; 
    padding: 20px 0;
    width: 140vw !important; 
    margin-left: -20vw !important;
    position: relative;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
    z-index: 10;
    
    /* CURSOR POR DEFECTO: Flecha normal en los huecos negros */
    cursor:default; 
    transition: background 0.6s ease, box-shadow 0.6s ease;
}

.film-strip:hover {
    background: #151515;
    box-shadow: 0 0 80px rgba(255, 255, 255, 0.25); 
}

/* CLASES DINÁMICAS (Activadas por el JS) */
/* Estas son las que muestran la flecha de desplazamiento en los bordes */
.film-strip.moving-left { cursor: w-resize !important; }
.film-strip.moving-right { cursor: e-resize !important; }

/* CONTENEDOR DE IMÁGENES */
.frames-row {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    will-change: transform;
}

.frames-row img {
    height: 350px; /* O el alto que prefieras */
    margin: 0 10px;
    pointer-events: auto;
    transition: filter 0.5s ease;
    filter: grayscale(100%);
    /* MANITA sobre la imagen para que se note el "coloreado" */
    cursor: pointer; 
}

.frames-row img:hover {
    filter: grayscale(0%);
}

/* DEGRADADO DE LOS BORDES (Sombras laterales) */
.film-strip::after {
    content: '';
    position: absolute;
    top: 0; left: 0; 
    width: 100%; height: 100%;
    background: linear-gradient(90deg, 
        rgba(0,0,0,0.9) 0%, 
        transparent 15%, 
        transparent 85%, 
        rgba(0,0,0,0.9) 100%);
    pointer-events: none; /* Crucial para que el mouse atraviese la sombra */
    z-index: 5;
}

@media (max-width: 768px) {
    .film-vault { padding-top: 100px; gap: 60px; }
    .frames-row img { height: 220px !important; }
}