/* Pokeball Rare Shimmer Effect CSS */

/* ==========================================
   1. BASE CLASS STYLING
   ========================================== */
.card-3d-container .card-3d.pokeball-rare .holo-layer,
.card-3d-container.pokeball-rare .card-3d .holo-layer,
.card-slot.pokeball-rare .holo-layer,
.wishlist-card-item.pokeball-rare .holo-layer,
.pokeball-rare .holo-layer {
    opacity: 1 !important;
    transition: opacity 0.3s;
    background-color: transparent !important;
}

/* ==========================================
   2. WHITE PARTS FOIL (Vibrant Standard Custom Texture style)
   ========================================== */
.card-3d-container .card-3d.pokeball-rare .holo-layer,
.card-3d-container.pokeball-rare .card-3d .holo-layer,
.card-slot.pokeball-rare .holo-layer,
.wishlist-card-item.pokeball-rare .holo-layer,
.pokeball-rare .holo-layer {
    background-image:
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.7) 40%,
            rgba(255, 255, 255, 1.0) 50%,
            rgba(255, 255, 255, 0.7) 60%,
            rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 0, 0, 0.95) 0%,
            rgba(255, 255, 0, 0.95) 15%,
            rgba(0, 255, 0, 0.95) 30%,
            rgba(0, 255, 255, 0.95) 50%,
            rgba(0, 0, 255, 0.95) 70%,
            rgba(255, 0, 255, 0.95) 85%,
            rgba(255, 0, 0, 0.95) 100%
        );
    background-size: 200% 200%, 400% 400%;
    background-position: calc(var(--mx, 0.5) * 100%) calc(var(--my, 0.5) * 100%), calc(var(--mx, 0.5) * 100%) calc(var(--my, 0.5) * 100%);
    background-blend-mode: multiply;
    mix-blend-mode: color-dodge;

    /* Apply generated white parts mask */
    -webkit-mask-image: var(--pokeball-white-mask, none);
    mask-image: var(--pokeball-white-mask, none);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* ==========================================
   3. RED PARTS FOIL (Extremely Vibrant Reddish Shimmer Style)
   ========================================== */
.card-3d-container .card-3d.pokeball-rare .holo-layer-red,
.card-3d-container.pokeball-rare .card-3d .holo-layer-red,
.card-slot.pokeball-rare .holo-layer-red,
.wishlist-card-item.pokeball-rare .holo-layer-red,
.pokeball-rare .holo-layer-red {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    transform: translate3d(0, 0, 0.1px) !important;
    will-change: transform, opacity;
    opacity: 0;
    transition: opacity 0.3s;

    background-image:
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 200, 200, 0.7) 40%,
            rgba(255, 255, 255, 1.0) 50%,
            rgba(255, 200, 200, 0.7) 60%,
            rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 0, 0, 1.0) 0%,
            rgba(255, 80, 0, 1.0) 25%,
            rgba(220, 0, 70, 1.0) 50%,
            rgba(255, 0, 0, 1.0) 75%,
            rgba(255, 0, 120, 1.0) 100%
        );
    background-size: 200% 200%, 400% 400%;
    background-position: calc(var(--mx, 0.5) * 100%) calc(var(--my, 0.5) * 100%), calc(var(--mx, 0.5) * 100%) calc(var(--my, 0.5) * 100%);
    background-blend-mode: multiply;
    mix-blend-mode: color-dodge;

    /* Apply generated red parts mask */
    -webkit-mask-image: var(--pokeball-red-mask, none);
    mask-image: var(--pokeball-red-mask, none);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Ensure the active opacity is correct */
.card-3d-container .card-3d.pokeball-rare.active .holo-layer-red,
.card-3d-container.pokeball-rare.active .card-3d .holo-layer-red,
.card-slot.pokeball-rare.active .holo-layer-red,
.wishlist-card-item.pokeball-rare.active .holo-layer-red,
.pokeball-rare.active .holo-layer-red,
.card-3d-container .card-3d.pokeball-rare.foil-loop .holo-layer-red,
.card-3d-container.pokeball-rare.foil-loop .card-3d .holo-layer-red,
.card-slot.pokeball-rare.foil-loop .holo-layer-red,
.wishlist-card-item.pokeball-rare.foil-loop .holo-layer-red,
.pokeball-rare.foil-loop .holo-layer-red,
.active .holo-layer-red,
.foil-loop .holo-layer-red {
    opacity: 1 !important;
}

/* 3D container active states */
.card-3d-container .card-3d .holo-layer-red,
#card-3d .holo-layer-red {
    transform: translate3d(0, 0, 12.1px) !important; /* Slightly offset Z to avoid Z-fighting/flickering with holo-layer */
}