/* =========================================================================
   WIZAY - VIDEOBOOK (Sala de Cine)
   Ubicación: /css/videobook.css

   Concepto: "un nuevo punto de un dibujo aún por descubrir"
   Se mantienen los puntos-raya (bordes discontinuos naranja) y se enriquecen
   con trama de puntos, marcos punteados y detalles de sala de cine.
   Las clases .vb-* las añade main.js (entrada animada, tilt 3D y luces).
   No cambia ninguna clase de la que dependa main.js
   (.cine-ratio, .btn-play-teatral, .oculto).

   El remate de puntos del título está en base.css (compartido con Book).
   ========================================================================= */

/* Variable animable de las marcas de encuadre */
@property --marca-c {
    syntax: '<color>';
    inherits: false;
    initial-value: rgba(230, 213, 195, 0.5);
}

/* =========================================================================
   1. SECCIÓN: AMBIENTE DE SALA (trama de puntos, resplandor, perforaciones)
   Sin viñeta en los bordes para que el divisor de semitono enlace sin costuras
   ========================================================================= */
#videobook {
    position: relative;
    background-color: var(--color-oscuro);
    background-image:
        radial-gradient(ellipse 70% 36% at 50% 26%, rgba(230, 213, 195, 0.17), transparent 70%),
        radial-gradient(rgba(230, 213, 195, 0.07) 1px, transparent 1.4px);
    background-size: 100% 100%, 6px 6px;
    background-repeat: no-repeat, repeat;
    color: var(--color-beige);
    padding: clamp(80px, 12vh, 150px) 20px;
    /* Luces de sala: se oscurece al reproducir (ver apartado 7) */
    box-shadow: inset 0 0 0 300vmax rgba(0, 0, 0, 0);
    transition: box-shadow 1s ease;
}

/* Perforaciones de película en la parte inferior (muy discretas) */
#videobook::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(10px, 1.6vh, 18px);
    height: 26px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='26'%3E%3Crect x='6' y='8' width='16' height='10' rx='2.5' fill='%23e6d5c3' fill-opacity='0.12'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 28px 26px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.8s ease;
}

.videobook-contenedor {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    counter-reset: escena-videobook;
}

/* =========================================================================
   2. TÍTULO Y DESCRIPCIÓN
   ========================================================================= */
.videobook-titulo {
    color: var(--color-beige);
    margin-bottom: 15px;
    transition: opacity 0.8s ease;
}

.videobook-descripcion {
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: rgba(230, 213, 195, 0.86);
    margin-bottom: clamp(40px, 6vh, 60px);
    text-wrap: balance;
    transition: opacity 0.8s ease;
}

/* =========================================================================
   3. EL VÍDEO: MARCO (puntos-raya) + ENCUADRE DE VISOR + VELO ANTES DEL PLAY
   ========================================================================= */
.cine-contenedor {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    border: 2px dashed var(--color-naranja-trazo);
    border-radius: 8px;
    /* Segundo marco, punteado y exterior (outline no lo recorta el overflow) */
    outline: 1.5px dotted rgba(230, 213, 195, 0.28);
    outline-offset: clamp(6px, 1vw, 12px);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.85),
        0 0 90px rgba(184, 74, 40, 0.1);
    overflow: hidden;
    background: #000;
    transition: box-shadow 0.6s ease, outline-color 0.5s ease, opacity 0.8s ease;
}

.cine-contenedor:hover {
    outline-color: rgba(184, 74, 40, 0.55);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.85),
        0 0 110px rgba(184, 74, 40, 0.2);
}

.cine-ratio {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.cine-ratio video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    outline: none;
}

/* Giro 3D suave + brillo que sigue al cursor (solo vídeo principal y solo
   con ratón: main.js añade .vb-tilt y las variables --tilt-* / --glow-*) */
.vb-tilt {
    transform: perspective(1400px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.6s ease,
        outline-color 0.5s ease,
        opacity 0.8s ease;
    will-change: transform;
}

.vb-tilt::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background: radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(230, 213, 195, 0.16), transparent 45%);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.vb-tilt:hover::after {
    opacity: 1;
}

/* Velo y marcas de encuadre: solo en navegadores con :has() (así se pueden
   apagar al pulsar play sin tocar el JS) */
@supports selector(:has(*)) {

    /* Marcas de encuadre en las 4 esquinas, como el visor de una cámara */
    .cine-ratio::before {
        --marca-l: clamp(14px, 2vw, 22px);
        content: '';
        position: absolute;
        inset: clamp(10px, 1.5vw, 18px);
        z-index: 3;
        pointer-events: none;
        background-image:
            linear-gradient(var(--marca-c), var(--marca-c)), linear-gradient(var(--marca-c), var(--marca-c)),
            linear-gradient(var(--marca-c), var(--marca-c)), linear-gradient(var(--marca-c), var(--marca-c)),
            linear-gradient(var(--marca-c), var(--marca-c)), linear-gradient(var(--marca-c), var(--marca-c)),
            linear-gradient(var(--marca-c), var(--marca-c)), linear-gradient(var(--marca-c), var(--marca-c));
        background-repeat: no-repeat;
        background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
        background-size:
            var(--marca-l) 2px, 2px var(--marca-l),
            var(--marca-l) 2px, 2px var(--marca-l),
            var(--marca-l) 2px, 2px var(--marca-l),
            var(--marca-l) 2px, 2px var(--marca-l);
        transition: --marca-c 0.5s ease, background-size 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s ease;
    }
    .cine-contenedor:hover .cine-ratio::before {
        --marca-c: rgba(184, 74, 40, 0.95);
        --marca-l: clamp(22px, 3vw, 34px);
    }

    /* Velo: viñeta + trama de puntos (la del hero) sobre el primer fotograma */
    .cine-ratio::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        background-image:
            radial-gradient(ellipse 85% 85% at 50% 50%, transparent 45%, rgba(0, 0, 0, 0.55) 100%),
            radial-gradient(rgba(0, 0, 0, 0.38) 1px, transparent 1.4px);
        background-size: 100% 100%, 4px 4px;
        transition: opacity 0.7s ease;
    }
    .cine-contenedor:hover .cine-ratio::after {
        opacity: 0.55;
    }

    /* Al pulsar play (el JS añade .oculto al botón) todo el adorno se retira */
    .cine-ratio:has(.btn-play-teatral.oculto)::before,
    .cine-ratio:has(.btn-play-teatral.oculto)::after {
        opacity: 0 !important;
    }
}

/* =========================================================================
   4. ESCENAS SECUNDARIAS (numeradas, con zigzag automático)
   ========================================================================= */
.escena-secundaria {
    counter-increment: escena-videobook;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    border: 1px dashed rgba(184, 74, 40, 0.35);
    border-radius: 12px;
    padding: clamp(20px, 4vw, 40px);
    margin-top: 70px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: center;
    transition: border-color 0.5s ease, box-shadow 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.8s ease;
}

@media (hover: hover) {
    .escena-secundaria:hover {
        border-color: rgba(184, 74, 40, 0.7);
        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.5), 0 0 40px rgba(184, 74, 40, 0.1);
        transform: translateY(-3px);
    }
}

/* Zigzag: la 2ª, 4ª... escena lleva el vídeo a la izquierda (solo en pantallas anchas).
   Se activará solo cuando haya más de una escena. */
@media (min-width: 860px) {
    .escena-secundaria:nth-of-type(odd) {
        flex-direction: row-reverse;
    }
}

.escena-secundaria-col-info {
    flex: 1 1 300px;
    text-align: left;
}

/* Numeración "Escena 01, 02…" generada con contadores CSS */
.escena-secundaria-titulo::before {
    content: 'Escena ' counter(escena-videobook, decimal-leading-zero);
    display: block;
    font-family: var(--fuente-textos);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(230, 213, 195, 0.6);
    margin-bottom: 12px;
    transition: opacity 0.6s ease 0.35s, letter-spacing 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}

.escena-secundaria-titulo {
    font-family: var(--fuente-titulos);
    font-size: clamp(1.55rem, 2.6vw, 1.95rem);
    line-height: 1.2;
    color: var(--color-naranja-trazo);
    margin-bottom: 12px;
}

.escena-secundaria-desc {
    font-size: 0.97rem;
    font-weight: 400;
    color: rgba(230, 213, 195, 0.82);
    line-height: 1.65;
}

.escena-secundaria-col-video {
    flex: 2 1 400px;
}

.escena-secundaria-contenedor {
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55);
}
.escena-secundaria-contenedor:hover {
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55), 0 0 60px rgba(184, 74, 40, 0.16);
}

/* =========================================================================
   5. BOTÓN DE PLAY TEATRAL (cristal ahumado, burdeos y pespunte)
      Con anillo punteado giratorio y latido suave
   ========================================================================= */
.cine-ratio {
    position: relative;
}

/* Este span del vídeo principal no se usa: el anillo va en los pseudo-elementos
   para que los dos botones (principal y escena) sean idénticos */
.btn-play-anillo {
    display: none;
}

.btn-play-teatral {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(65px, 12vw, 95px);
    height: clamp(65px, 12vw, 95px);
    border-radius: 50%;
    border: 2px dashed var(--color-naranja-trazo, #b84a28);
    background: rgba(18, 18, 18, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 0 30px rgba(107, 15, 26, 0.45);
    transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    padding: 0;
}

/* Anillo punteado que gira muy despacio alrededor del botón */
.btn-play-teatral::before {
    content: '';
    position: absolute;
    inset: calc(-1 * clamp(9px, 1.2vw, 14px));
    border-radius: 50%;
    border: 1.5px dotted rgba(230, 213, 195, 0.5);
    pointer-events: none;
    animation: playGiro 24s linear infinite;
    transition: inset 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s ease;
}

/* Latido: un halo naranja que respira */
.btn-play-teatral::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 0 0 0 rgba(184, 74, 40, 0.38);
    animation: playLatido 3.6s ease-out infinite;
}

@keyframes playGiro {
    to { transform: rotate(360deg); }
}

@keyframes playLatido {
    0%   { box-shadow: 0 0 0 0 rgba(184, 74, 40, 0.38); }
    70%  { box-shadow: 0 0 0 clamp(14px, 2vw, 24px) rgba(184, 74, 40, 0); }
    100% { box-shadow: 0 0 0 0 rgba(184, 74, 40, 0); }
}

.btn-play-teatral:hover {
    background: var(--color-burdeos, #6b0f1a);
    border-color: var(--color-beige, #e6d5c3);
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 0 0 45px rgba(184, 74, 40, 0.7);
}

/* Al pasar por encima el anillo se abre un poco y se enciende en naranja */
.btn-play-teatral:hover::before {
    inset: calc(-1 * clamp(13px, 1.7vw, 20px));
    border-color: rgba(184, 74, 40, 0.95);
}

/* Foco visible para quien navega con teclado */
.btn-play-teatral:focus-visible {
    outline: 2px solid var(--color-beige, #e6d5c3);
    outline-offset: 5px;
    background: var(--color-burdeos, #6b0f1a);
}

/* Triángulo de play dibujado con CSS (evita que "▶" salga como emoji en móviles) */
.btn-play-triangulo {
    display: block;
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    margin-left: 0;
    color: transparent;
    position: relative;
}

.btn-play-triangulo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    transform: translate(-36%, -50%); /* centrado óptico del triángulo */
    border-style: solid;
    border-width: 0.52em 0 0.52em 0.88em;
    border-color: transparent transparent transparent var(--color-beige, #e6d5c3);
    transition: border-left-color 0.3s ease;
}

.btn-play-teatral:hover .btn-play-triangulo::before,
.btn-play-teatral:focus-visible .btn-play-triangulo::before {
    border-left-color: #ffffff;
}

/* Ocultar el botón suavemente al pulsar play (y parar sus animaciones) */
.btn-play-teatral.oculto {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.8);
}
.btn-play-teatral.oculto::before,
.btn-play-teatral.oculto::after {
    animation: none;
}

/* Mientras el vídeo suena, el mismo botón hace de PAUSA: asoma al mover el ratón o tocar el vídeo
   (main.js le pone .ui-pausa durante 2,5 s) y lleva dos barras en vez del triángulo.
   Sin desenfoque de fondo: desenfocar un vídeo en marcha, fotograma a fotograma, ralentiza el móvil. */
.btn-play-teatral.en-marcha {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(18, 18, 18, 0.82);
}
.btn-play-teatral.oculto.ui-pausa,
.btn-play-teatral.oculto.en-marcha:focus-visible {
    opacity: 0.92;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(0.82);
}
.btn-play-teatral.en-marcha .btn-play-triangulo::before {
    width: 0.78em;
    height: 1.04em;
    border: 0;
    transform: translate(-50%, -50%);
    background: linear-gradient(to right,
        var(--color-beige, #e6d5c3) 0 34%, transparent 34% 66%, var(--color-beige, #e6d5c3) 66% 100%);
}
.btn-play-teatral.en-marcha:hover .btn-play-triangulo::before,
.btn-play-teatral.en-marcha:focus-visible .btn-play-triangulo::before {
    border: 0;
    background: linear-gradient(to right, #ffffff 0 34%, transparent 34% 66%, #ffffff 66% 100%);
}

/* Tras el primer play el vídeo usa los controles del navegador (para pausar, avanzar y volumen).
   En móvil y tablet esos controles traen su propio botón de play grande en el centro, que
   asoma al darle a play y se queda al pausar: se oculta para que solo se vea el nuestro
   (antes del primer play) y la barra de controles. En PC no existe, así que no cambia nada. */
.cine-ratio video::-webkit-media-controls-overlay-play-button {
    display: none !important;
}
.cine-ratio video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
}

/* =========================================================================
   6. ENTRADA ANIMADA AL HACER SCROLL (clases que añade main.js)
   Mismo lenguaje que la biografía: desplazamiento corto + desenfoque,
   con la curva cubic-bezier(0.22, 1, 0.36, 1). Tras entrar, main.js retira
   las clases y todo queda en su estado normal.
   ========================================================================= */

/* Título y descripción: cascada */
.videobook-titulo.vb-anim-pendiente,
.videobook-descripcion.vb-anim-pendiente {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(3px);
}
.videobook-titulo.vb-anim-visible,
.videobook-descripcion.vb-anim-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    transition:
        opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.65s ease;
}
.videobook-descripcion.vb-anim-visible {
    transition-delay: 0.18s;
}

/* Remate de puntos del título: se dibuja desde el centro */
.videobook-titulo.vb-anim-pendiente::after {
    clip-path: inset(0 50% 0 50%);
    opacity: 0;
}

/* Vídeo principal: se abre como una pantalla de cine (línea central → fotograma) */
.cine-contenedor.vb-anim-pendiente {
    opacity: 0;
    transform: translateY(34px) scale(0.94);
    filter: blur(6px);
}
.cine-contenedor.vb-anim-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    transition:
        opacity 0.9s ease 0.08s,
        transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.08s,
        filter 0.9s ease 0.08s;
}

/* El botón de play entra el último, con un pequeño rebote */
.cine-contenedor.vb-anim-pendiente .btn-play-teatral,
.escena-secundaria.vb-anim-pendiente .btn-play-teatral {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
}
.cine-contenedor.vb-anim-visible .btn-play-teatral {
    transition: opacity 0.6s ease 0.65s, transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.65s;
}
.escena-secundaria.vb-anim-visible .btn-play-teatral {
    transition: opacity 0.6s ease 0.4s, transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s;
}

/* Las marcas de encuadre "enfocan": empiezan grandes y se cierran sobre el fotograma */
@supports selector(:has(*)) {
    .cine-contenedor.vb-anim-pendiente .cine-ratio::before {
        --marca-l: clamp(70px, 14vw, 170px);
        opacity: 0;
    }
    .cine-contenedor.vb-anim-visible .cine-ratio::before {
        transition:
            background-size 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.45s,
            opacity 0.6s ease 0.45s,
            --marca-c 0.5s ease;
    }
}

/* Escenas secundarias: entran desde el lado en el que está su vídeo
   (main.js pone --vb-signo a 1 o -1 según el zigzag) */
.escena-secundaria.vb-anim-pendiente {
    opacity: 0;
    filter: blur(3px);
    transform: translateX(calc(var(--vb-signo, 1) * 40px));
}
.escena-secundaria.vb-anim-visible {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
    transition:
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.8s ease;
}
.escena-secundaria.vb-anim-pendiente .escena-secundaria-titulo::before {
    opacity: 0;
    letter-spacing: 0.5em;
}

@media (max-width: 859px) {
    .escena-secundaria.vb-anim-pendiente {
        transform: translateX(calc(var(--vb-signo, 1) * 20px));
    }
}

/* =========================================================================
   7. LUCES DE SALA: al reproducir se atenúa todo salvo el vídeo en marcha
      (main.js añade .vb-reproduciendo a la sección al detectar play/pause)
   ========================================================================= */
#videobook.vb-reproduciendo {
    box-shadow: inset 0 0 0 300vmax rgba(0, 0, 0, 0.5);
}

#videobook.vb-reproduciendo::after {
    opacity: 0.2;
}

#videobook.vb-reproduciendo .videobook-titulo,
#videobook.vb-reproduciendo .videobook-descripcion,
#videobook.vb-reproduciendo .escena-secundaria:not(.vb-escena-activa),
#videobook.vb-reproduciendo .videobook-contenedor > .cine-contenedor:not(.vb-activo) {
    opacity: 0.28;
}

/* RENDIMIENTO EN MÓVIL: mientras un vídeo suena, se congelan los anillos decorativos de los botones
   de play (giro y latido). Son animaciones infinitas que obligan al navegador a repintar la pantalla
   en cada fotograma, justo cuando más trabajo tiene decodificando el vídeo. Con la sala en penumbra
   no se nota, y al pausar vuelven a moverse.
   Lo mismo para el marco punteado del visor de fotos del Book, que está cerrado pero seguía animándose. */
#videobook.vb-reproduciendo .btn-play-teatral::before,
#videobook.vb-reproduciendo .btn-play-teatral::after {
    animation-play-state: paused;
}
/* Y fuera de pantalla no se mueven (main.js les pone .fuera-vista cuando el botón no se ve) */
.btn-play-teatral.fuera-vista::before,
.btn-play-teatral.fuera-vista::after {
    animation-play-state: paused;
}

/* Foco cálido sobre el vídeo que está sonando */
#videobook.vb-reproduciendo .cine-contenedor.vb-activo {
    outline-color: rgba(184, 74, 40, 0.6);
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.9),
        0 0 60px rgba(184, 74, 40, 0.25),
        0 0 140px rgba(230, 150, 90, 0.2);
}
#videobook.vb-reproduciendo .escena-secundaria.vb-escena-activa {
    border-color: rgba(184, 74, 40, 0.7);
}

/* =========================================================================
   8. ACCESIBILIDAD: MENOS MOVIMIENTO
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .btn-play-teatral::before,
    .btn-play-teatral::after {
        animation: none;
    }
    .escena-secundaria,
    .escena-secundaria:hover {
        transform: none;
    }
    #videobook,
    #videobook::after,
    .videobook-titulo,
    .videobook-descripcion,
    .escena-secundaria,
    .cine-contenedor {
        transition: none;
    }
}