/* ==========================================================
   Cyberfractal LightBox v2.0
   Control global del tamaño
   ========================================================== */

:root{

    /* Tamaño de la miniatura */
    --cf-mini-width:287px;

    /* Tamaño del LightBox */
    --cf-lightbox-width:98vw;
    --cf-lightbox-height:98vh;

    /* Estilo */
    --cf-borde:#d6b85c;
    --cf-fondo:#111;

}


/* ==========================================================
   Imagen normal
   ========================================================== */

.cf-zoom{

    display:block;

    margin:auto;

    width:var(--cf-mini-width);

    cursor:zoom-in;

    position:relative;

    z-index:10;

    user-select:none;
    -webkit-user-drag:none;

    transform-origin:center center;

    transition:
        transform .35s ease,
        filter .35s ease,
        opacity .35s ease,
        box-shadow .35s ease;

}


/* ==========================================================
   Fondo oscuro
   ========================================================== */

.cf-fondo{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.86);

    backdrop-filter:blur(3px);

    cursor:zoom-out;

    z-index:999998;

    animation:cfFondo .25s ease;

}


/* ==========================================================
   Imagen ampliada
   ========================================================== */

.cf-zoom.cf-ampliada{

    position:fixed;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    width:auto;

    max-width:var(--cf-lightbox-width);

    max-height:var(--cf-lightbox-height);

    object-fit:contain;

    box-sizing:border-box;

    cursor:zoom-out;

    z-index:999999;

    border:3px solid var(--cf-borde);

    border-radius:8px;

    background:var(--cf-fondo);

    box-shadow:

        0 0 18px rgba(214,184,92,.75),

        0 0 60px rgba(214,184,92,.45),

        0 0 140px rgba(0,0,0,.95);

    animation:cfZoom .30s ease;

}


/* ==========================================================
   Animación imagen
   ========================================================== */

@keyframes cfZoom{

    from{

        opacity:0;

        transform:
            translate(-50%,-50%)
            scale(.80);

    }

    to{

        opacity:1;

        transform:
            translate(-50%,-50%)
            scale(1);

    }

}


/* ==========================================================
   Animación fondo
   ========================================================== */

@keyframes cfFondo{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}


/* ==========================================================
   Efecto al pasar el mouse
   ========================================================== */

.cf-zoom:hover{

    filter:brightness(1.08);

}

.cf-marco{
    display:block;
    margin:0 auto;
    border:2px solid #444;
    padding:4px;
    background:#111;
    box-sizing:border-box;
}