/* ================================================================
   HOME MOTION LAB (trial layer)
   Interaction motion only: no colour, layout or design changes.
   Everything is scoped to html.rw-motion-lab, which is set by
   resources/views/frontend/redwave/partials/motion_lab.blade.php.
   Compare: add ?motion=off / ?motion=on to the home URL.
   Revert: remove the motion_lab @include in app-home.blade.php.
   ================================================================ */

:root {
    --rw-ml-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --rw-ml-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 1. Product photos fade + settle in once lazysizes has loaded them,
      instead of popping from invisible to visible. */
@keyframes rw-ml-photo-in {
    /* filter: opacity(), because the theme pins this image to opacity: 1 !important */
    from { filter: opacity(0); transform: scale(1.035); }
    to   { filter: opacity(1); transform: scale(1); }
}
html.rw-motion-lab .redwave-home .redwave-product-card .redwave-product-media img.product-main-image.lazyloaded {
    animation: rw-ml-photo-in 0.55s var(--rw-ml-ease-out) both;
}

/* 2. Hover: slow photo zoom inside the (already clipped) media box.
      Desktop pointers only, so touch devices never get a stuck zoom. */
@media (hover: hover) and (pointer: fine) {
    html.rw-motion-lab .redwave-home .redwave-product-card .redwave-product-media img.product-main-image.lazyloaded {
        transition: transform 0.7s var(--rw-ml-ease-out) !important;
    }
    html.rw-motion-lab .redwave-home .redwave-product-card.hov-scale-img .redwave-product-media:hover img.product-main-image.lazyloaded {
        transform: scale(1.045) !important;
    }
}

/* 3. Press feedback on the product photo (tap or click). */
html.rw-motion-lab .redwave-home .redwave-product-card .redwave-product-media {
    transition: transform 0.18s var(--rw-ml-ease-out);
}
html.rw-motion-lab .redwave-home .redwave-product-card .redwave-product-media:active {
    transform: scale(0.985);
}

/* 4. Wishlist heart pop, triggered by the lab script on click. */
@keyframes rw-ml-heart-pop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.32); }
    65%  { transform: scale(0.92); }
    100% { transform: scale(1); }
}
html.rw-motion-lab .redwave-home .rw-listing-wishlist-btn.rw-ml-pop .rw-listing-wishlist-icon {
    animation: rw-ml-heart-pop 0.45s var(--rw-ml-ease-out);
}
html.rw-motion-lab .redwave-home .rw-listing-wishlist-btn:active .rw-listing-wishlist-icon {
    transform: scale(0.88);
}

/* 5. Hot categories: circles lean a few px toward the cursor.
      The lab script writes --rw-ml-mx / --rw-ml-my on the link; the
      existing hover lift on .rw-hot-cat-media is left untouched. */
@media (hover: hover) and (pointer: fine) {
    html.rw-motion-lab .redwave-home a.rw-hot-cat-circle {
        transform: translate3d(var(--rw-ml-mx, 0px), var(--rw-ml-my, 0px), 0);
        transition: transform 0.45s var(--rw-ml-ease-out);
    }
    html.rw-motion-lab .redwave-home a.rw-hot-cat-circle.rw-ml-tracking {
        transition: transform 0.12s linear;
    }
}
html.rw-motion-lab .redwave-home a.rw-hot-cat-circle:active .rw-hot-cat-media {
    transform: translateY(-2px) scale(0.97);
    transition-duration: 0.15s;
}

/* 6. Hero banner: gentle depth fade as it scrolls out of view.
      Pure CSS scroll timeline; browsers without support stay static. */
@keyframes rw-ml-hero-exit {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0.55; transform: translateY(36px) scale(0.985); }
}
@supports (animation-timeline: view()) {
    @media (min-width: 1200px) {
        html.rw-motion-lab .redwave-home > .home-banner-area:not(.rw-new-arrival-banner) .rw-banner-slider-shell {
            animation: rw-ml-hero-exit linear both;
            animation-timeline: view();
            animation-range: exit 0% exit 100%;
        }
    }
}

/* Reduced motion: the lab layer switches off completely. */
@media (prefers-reduced-motion: reduce) {
    html.rw-motion-lab .redwave-home .redwave-product-card .redwave-product-media img.product-main-image.lazyloaded,
    html.rw-motion-lab .redwave-home .rw-listing-wishlist-btn.rw-ml-pop .rw-listing-wishlist-icon,
    html.rw-motion-lab .redwave-home > .home-banner-area .rw-banner-slider-shell {
        animation: none !important;
    }
    html.rw-motion-lab .redwave-home .redwave-product-card .redwave-product-media,
    html.rw-motion-lab .redwave-home .redwave-product-card .redwave-product-media img.product-main-image,
    html.rw-motion-lab .redwave-home a.rw-hot-cat-circle {
        transform: none !important;
        transition: none !important;
    }
}