/* Visual Effects Module - Transition Based Shine Effect */

/* 1. Container Setup */
.product-add-to-cart .add-to-cart,
.product-add-to-cart .btn-primary,
.product-add-to-cart .js-buy-now,
.add-to-cart,
.btn-primary,
.cart-content-btn .btn,
.ajax_add_to_cart_button {
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
}

/* 2. Shine Element - BASE STATE (Hidden Left) */
.product-add-to-cart .add-to-cart::before,
.product-add-to-cart .btn-primary::before,
.product-add-to-cart .js-buy-now::before,
.add-to-cart::before,
.btn-primary::before,
.cart-content-btn .btn::before,
.ajax_add_to_cart_button::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;

    /* Start Position: Far Left */
    left: -100% !important;

    width: 100% !important;
    height: 100% !important;
    display: block !important;

    /* White Shine Gradient */
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.6) 50%,
            rgba(255, 255, 255, 0) 100%) !important;

    /* Skew */
    transform: skewX(-20deg) !important;

    /* Optimize Performance */
    will-change: transform !important;

    /* High Z-Index */
    z-index: 99999 !important;
    pointer-events: none !important;
    visibility: visible !important;
    opacity: 1 !important;

    /* RESET TRANSITION (Instant return to start when class removed) */
    transition: transform 0s !important;
}

/* 3. Shine Element - ACTIVE ANIMATION STATE */
/* When JS adds .shine-running class, move to right */
.product-add-to-cart .add-to-cart.shine-running::before,
.product-add-to-cart .btn-primary.shine-running::before,
.product-add-to-cart .js-buy-now.shine-running::before,
.add-to-cart.shine-running::before,
.btn-primary.shine-running::before,
.cart-content-btn .btn.shine-running::before,
.ajax_add_to_cart_button.shine-running::before {
    /* Use TranslateX for GPU acceleration instead of Left */
    /* Start at -100%, End at 200% -> Difference is 300% */
    transform: skewX(-20deg) translateX(300%) !important;

    /* MOVEMENT TRANSITION using Dynamic Speed */
    /* Checks for --shine-speed variable, defaults to 0.8s if missing */
    transition: transform var(--shine-speed, 0.8s) ease-in-out !important;
}