/**
 * CapsuleCorp Woo — Front-End Styles
 *
 * Minimal CSS to support the GSAP animation engine.
 * Handles ghosting clones, hardware-acceleration hints,
 * and respects reduced-motion user preferences.
 *
 * @package CapsuleCorp_Woo
 * @since   1.0.0
 */

/* ==========================================================================
   1. Ghost Clone — Fly-to-Cart Overlay
   ========================================================================== */

/**
 * The cloned product image that "flies" to the cart.
 *
 * • `position: fixed` — positioned relative to the viewport, not the document.
 * • `pointer-events: none` — ensures the clone never intercepts clicks.
 * • `will-change` — hints the browser to promote the element to its own
 *    compositing layer for silky 60 fps transforms.
 * • `z-index: 99999` — floats above all other content.
 */
.ccwoo-clone {
    position: fixed;
    pointer-events: none;
    z-index: 99999;
    will-change: transform, opacity;

    /* Ensure the clone doesn't inherit layout-shifting properties. */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;

    /* Subtle polish. */
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);

    /* GPU compositing. */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ==========================================================================
   2. Ghosting Trail — Fading After-Images
   ========================================================================== */

/**
 * Ghost trail clones: faint copies spawned along the flight path.
 * They fade out quickly and never interfere with interaction.
 */
.ccwoo-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 99998;
    will-change: transform, opacity;

    margin: 0 !important;
    padding: 0 !important;
    border: none !important;

    border-radius: 8px;
    filter: blur(1px);

    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ==========================================================================
   3. Cart Icon — Pulse Landing Target
   ========================================================================== */

/**
 * The cart icon is briefly scaled by GSAP when the clone "lands".
 * This hint prepares the compositor in advance so the first frame
 * of the pulse doesn't trigger a repaint.
 */
.cart-contents,
.site-header-cart .cart-icon,
.cart-icon {
    will-change: transform;
    transform: translateZ(0);
}

/* ==========================================================================
   4. Accessibility — Reduced Motion
   ========================================================================== */

/**
 * Honour the user's OS-level "Reduce Motion" preference.
 *
 * When enabled, all GSAP-driven transforms are overridden to
 * `none` via `!important`, effectively disabling animations
 * while leaving the rest of the UI intact.
 */
@media (prefers-reduced-motion: reduce) {

    .ccwoo-clone,
    .ccwoo-ghost {
        /* Disable the fly animation — the clone will simply not appear. */
        display: none !important;
    }

    .cart-contents,
    .site-header-cart .cart-icon,
    .cart-icon {
        /* Disable the pulse. */
        transform: none !important;
        will-change: auto;
    }
}