/**
 * Mystery-box landing card hover effect — 3D tilt + glare sweep.
 *
 * Loaded only on configured category landing pages (see easycarousels.php ::
 * hookActionFrontControllerSetMedia -> $mysteryCardCategories). The marker
 * classes below are added at runtime by mystery-cards.js.
 *
 * The product cards are th3d_effect 3D flip-cards: the front/back faces own
 * their rotateY flip transform, so the mouse-follow tilt is applied to the
 * flip CONTAINER (a.product-thumbnail) — never to the faces — and the glare
 * lives inside the front face. Everything is scoped under .isLandingPage so it
 * can only ever touch landing-page carousels.
 */

/* Perspective for the tilt lives on the image wrapper, the parent of the flip
   container. The action-block / buttons in here are untransformed, so they
   stay flat while the card tilts. */
.isLandingPage .mb-tilt-scene {
    perspective: 1200px;
    perspective-origin: 50% 50%;
}

/* The flip container we tilt. th3d_effect already gives it
   transform-style: preserve-3d; we only add the motion + a soft saturation
   bump while hovered. */
.isLandingPage .mb-tilt-card {
    transform-origin: 50% 50%;
    will-change: transform, filter;
    transition:
        transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
        filter 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.isLandingPage .mb-tilt-card.is-hovered {
    filter: saturate(1.02);
}

/* The element that hosts the glare (the front face, or the wrapper we build
   around a plain <img>). Needs its own positioning context so the absolutely
   positioned glare anchors to it. The thprhtmlimage front face (.product-card)
   already clips with overflow:hidden; the wrapper sets its own below. */
.isLandingPage .mb-tilt-face {
    position: relative;
}

/* Plain-image fallback (products without the thprhtmlimage HTML): an <img>
   can't host the glare child, so mystery-cards.js wraps it. Keep it filling
   and clipping like the rich card. */
.isLandingPage .mb-tilt-imgwrap {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 9px;
}

.isLandingPage .mb-tilt-imgwrap > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Moving glare sweep. Sits inside the front face, which clips it (overflow)
   and hides it when the card is flipped (backface-visibility). Its position
   and opacity are driven by CSS custom properties updated from JS. */
.isLandingPage .mb-tilt-glare {
    position: absolute;
    inset: -18%;
    border-radius: inherit;
    pointer-events: none;
    z-index: 10;
    mix-blend-mode: overlay;
    opacity: var(--mb-glare-opacity, 0);
    background: linear-gradient(
        85deg,
        rgba(255, 255, 255, 0) 24%,
        rgba(255, 255, 255, 0.02) 33%,
        rgba(255, 255, 255, 0.1) 39%,
        rgba(255, 255, 255, 0.78) 50%,
        rgba(255, 255, 255, 0.16) 58%,
        rgba(255, 255, 255, 0.02) 65%,
        rgba(255, 255, 255, 0) 74%
    );
    transform: var(--mb-glare-transform, translateX(-140%) translateZ(1px) skewX(10deg) scale(1.45));
    transition:
        transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform, opacity;
}

/* While the card is flipped to its back face, keep the (front-face) glare off. */
.isLandingPage .product-image.th3d_effect_active .mb-tilt-glare {
    opacity: 0 !important;
}

/* Touch / coarse-pointer devices have no real hover: keep everything flat.
   mystery-cards.js also bails out early — this is belt-and-braces. */
@media (hover: none), (pointer: coarse) {
    .isLandingPage .mb-tilt-card {
        transform: none !important;
    }

    .isLandingPage .mb-tilt-glare {
        display: none !important;
    }
}