/* ==========================================================================
   RODCARS · Revelado del logotipo al pasar el cursor sobre una imagen
   --------------------------------------------------------------------------
   Al apuntar una foto: la imagen se acerca y se oscurece, el logotipo aparece
   al centro con halo cian, un haz de luz la barre una vez y el marco se
   enciende. Todo con CSS, sin JavaScript, así que también funciona en las
   tarjetas de producto que llegan por AJAX.

   Variables que vienen de includes/header.php:
   --rc-logo   (configuracion.logo, ya normalizada para url())
   --rc-cyan   (configuracion.highlight_color)
   --rc-gold   (configuracion.secondary_color)

   Para sumar un contenedor nuevo basta con ponerle la clase `rc-fx`.
   No se limita a @media (hover: hover): hay navegadores que no declaran esa
   caracteristica y se quedaban sin efecto. En pantallas táctiles no estorba,
   porque todos estos contenedores son enlaces y al tocarlos se navega.
   ========================================================================== */

body.rc-public .image-container,
body.rc-public .product-card > a:first-child,
body.rc-public .rc-fx {
    position: relative;
    display: block;
    overflow: hidden;
    isolation: isolate;
    border-radius: 6px;
    --rcfx-ms: 620ms;
}

/* En las tarjetas la imagen va pegada al borde superior */
body.rc-public .product-card > a:first-child {
    border-radius: 6px 6px 0 0;
}

/* ── La imagen: se acerca y baja de brillo para que el logo resalte ───── */
body.rc-public .image-container > img,
body.rc-public .product-card > a:first-child > img,
body.rc-public .rc-fx > img {
    transition: transform var(--rcfx-ms) cubic-bezier(.22,1,.36,1),
                filter    var(--rcfx-ms) ease;
}

body.rc-public .image-container:hover > img,
body.rc-public .image-container:focus-within > img,
body.rc-public .product-card > a:first-child:hover > img,
body.rc-public .product-card > a:first-child:focus-visible > img,
body.rc-public .rc-fx:hover > img,
body.rc-public .rc-fx:focus-within > img {
    transform: scale(1.075);
    filter: brightness(.42) saturate(1.18) contrast(1.06);
}

/* ── El logotipo, revelado al centro ─────────────────────────────────── */
body.rc-public .image-container::before,
body.rc-public .product-card > a:first-child::before,
body.rc-public .rc-fx::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background-image: var(--rc-logo);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: min(74%, 300px) auto;
    opacity: 0;
    transform: scale(.72) translateY(10px);
    filter: drop-shadow(0 0 24px rgba(53,183,195,.60))
            drop-shadow(0 6px 18px rgba(0,0,0,.55));
    transition: opacity var(--rcfx-ms) ease,
                transform var(--rcfx-ms) cubic-bezier(.22,1,.36,1);
    pointer-events: none;
}

body.rc-public .image-container:hover::before,
body.rc-public .image-container:focus-within::before,
body.rc-public .product-card > a:first-child:hover::before,
body.rc-public .product-card > a:first-child:focus-visible::before,
body.rc-public .rc-fx:hover::before,
body.rc-public .rc-fx:focus-within::before {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* ── El haz de luz que barre la foto una sola vez ─────────────────────── */
body.rc-public .image-container::after,
body.rc-public .product-card > a:first-child::after,
body.rc-public .rc-fx::after {
    content: "";
    position: absolute;
    top: -35%; bottom: -35%;
    left: 0;
    width: 38%;
    z-index: 3;
    background: linear-gradient(100deg,
        transparent,
        rgba(255,255,255,.30) 42%,
        rgba(53,183,195,.55)  60%,
        transparent);
    filter: blur(1px);
    opacity: 0;
    transform: translateX(-170%) rotate(12deg);
    pointer-events: none;
}

body.rc-public .image-container:hover::after,
body.rc-public .image-container:focus-within::after,
body.rc-public .product-card > a:first-child:hover::after,
body.rc-public .product-card > a:first-child:focus-visible::after,
body.rc-public .rc-fx:hover::after,
body.rc-public .rc-fx:focus-within::after {
    animation: rcfxHaz .95s cubic-bezier(.4,0,.2,1) .1s 1;
}

@keyframes rcfxHaz {
    0%   { transform: translateX(-170%) rotate(12deg); opacity: 0; }
    18%  { opacity: 1; }
    75%  { opacity: 1; }
    100% { transform: translateX(400%) rotate(12deg); opacity: 0; }
}

/* ── El marco se enciende ─────────────────────────────────────────────── */
body.rc-public .image-container,
body.rc-public .product-card > a:first-child,
body.rc-public .rc-fx {
    box-shadow: 0 0 0 0 rgba(53,183,195,0);
    transition: box-shadow var(--rcfx-ms) ease;
}
body.rc-public .image-container:hover,
body.rc-public .image-container:focus-within,
body.rc-public .product-card > a:first-child:hover,
body.rc-public .product-card > a:first-child:focus-visible,
body.rc-public .rc-fx:hover,
body.rc-public .rc-fx:focus-within {
    box-shadow: inset 0 0 0 2px var(--rc-cyan, #35b7c3),
                0 0 30px rgba(53,183,195,.38);
}

/* ── Portada: la banda inferior de los dos accesos ────────────────────
   Traía un hover que la volvía blanca; con el revelado en oscuro ahora
   se mantiene negra y solo se le enciende el filo cian. */
body.rc-public .image-container:hover .bottom-band {
    z-index: 4;
    background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.88)) !important;
    color: #fff !important;
    border-top: 1px solid var(--rc-cyan, #35b7c3);
    text-shadow: 0 0 14px rgba(53,183,195,.55);
}

/* ── Menos movimiento a quien lo pide ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    body.rc-public .image-container > img,
    body.rc-public .product-card > a:first-child > img,
    body.rc-public .rc-fx > img {
        transition: filter .2s ease;
    }
    body.rc-public .image-container:hover > img,
    body.rc-public .product-card > a:first-child:hover > img,
    body.rc-public .rc-fx:hover > img {
        transform: none;
    }
    body.rc-public .image-container::before,
    body.rc-public .product-card > a:first-child::before,
    body.rc-public .rc-fx::before {
        transform: none;
        transition: opacity .2s ease;
    }
    body.rc-public .image-container:hover::after,
    body.rc-public .product-card > a:first-child:hover::after,
    body.rc-public .rc-fx:hover::after {
        animation: none;
    }
}