/* =============================================
   TCG Prime — Foil card effects
   Apunta a tarjetas de producto por atributo SKU.
   Requiere :has() — compatible con todos los navegadores modernos.
   ============================================= */

/* Setup: position relativo en el contenedor de imagen */
.product-small:has([data-product_sku$="-holofoil"]) .box-image {
    position: relative;
    overflow: hidden;
}

/* ---- Holofoil: overlay prismático sutil ---- */
.product-small:has([data-product_sku$="-holofoil"]:not([data-product_sku*="reverse"])) .box-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        125deg,
        rgba(255,  60, 100, 0.18)   0%,
        rgba(255, 200,  50, 0.18)  25%,
        rgba( 50, 220, 150, 0.18)  50%,
        rgba( 50, 130, 255, 0.18)  75%,
        rgba(180,  50, 255, 0.18) 100%
    );
    background-size: 300% 300%;
    animation: tcg-holo 8s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.4s ease;
    opacity: 1;
}

.product-small:has([data-product_sku$="-holofoil"]:not([data-product_sku*="reverse"])):hover .box-image::after {
    opacity: 1;
    animation-duration: 3s;
}

@keyframes tcg-holo {
    0%   { background-position:   0%   0%; }
    50%  { background-position: 100%  50%; }
    100% { background-position:  50% 100%; }
}

/* ---- Reverse Holofoil: destello plateado diagonal sutil ---- */
.product-small:has([data-product_sku*="reverse-holofoil"]) .box-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        transparent            20%,
        rgba(255,255,255,0.28) 42%,
        rgba(255,255,255,0.38) 50%,
        rgba(255,255,255,0.28) 58%,
        transparent            80%
    );
    background-size: 200% 200%;
    animation: tcg-reverse 6s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.4s ease;
    opacity: 1;
}

.product-small:has([data-product_sku*="reverse-holofoil"]):hover .box-image::after {
    opacity: 1;
    animation-duration: 3s;
}

@keyframes tcg-reverse {
    0%   { background-position: -50% -50%; }
    100% { background-position: 150% 150%; }
}