/* =========================================================
   Storefront polish: motion + small visual refinements.
   Everything here is progressive: content is fully visible
   unless enhancements.js has run (it adds .rx-anim to <html>).
   ========================================================= */

html { scroll-behavior: smooth; }

/* ---- page fade-in ---- */
body { animation: rxPageIn .45s ease both; }
@keyframes rxPageIn { from { opacity: 0; } to { opacity: 1; } }

/* ---- scroll reveal ---- */
.rx-anim .rx-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1);
    transition-delay: var(--rx-delay, 0ms);
    will-change: opacity, transform;
}
.rx-anim .rx-reveal.rx-in { opacity: 1; transform: none; }
.rx-anim .rx-reveal.rx-reveal-left  { transform: translateX(-30px); }
.rx-anim .rx-reveal.rx-reveal-right { transform: translateX(30px); }
.rx-anim .rx-reveal.rx-reveal-zoom  { transform: scale(.94); }
.rx-anim .rx-reveal.rx-in.rx-reveal-left,
.rx-anim .rx-reveal.rx-in.rx-reveal-right,
.rx-anim .rx-reveal.rx-in.rx-reveal-zoom { transform: none; }

/* ---- product cards: lift + image zoom ---- */
.rx-product-card,
.rx-grid-product,
.ps-product--standard {
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
}
.rx-product-card:hover,
.rx-grid-product:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 40px -18px rgba(15, 23, 42, .28);
}
.rx-product-card img,
.rx-grid-product img,
.ps-product--standard .ps-product__thumbnail img {
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.rx-product-card:hover img,
.rx-grid-product:hover img { transform: scale(1.06); }

/* action buttons were <button> before; now they are links to the details page */
a.rx-action-btn,
a.rx-action-circle { text-decoration: none; }
.ps-product__actions .ps-product__item > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

/* ---- buttons: soft press + ripple ---- */
.btn, button, .ps-btn, .rx-action-btn, .rx-action-circle { -webkit-tap-highlight-color: transparent; }
.btn:not(.btn-link):active { transform: translateY(1px) scale(.99); }
.rx-ripple { position: relative; overflow: hidden; }
.rx-ripple > .rx-ripple-wave {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    transform: scale(0);
    animation: rxRipple .6s ease-out forwards;
    pointer-events: none;
}
@keyframes rxRipple { to { transform: scale(3.2); opacity: 0; } }

/* ---- add-to-basket confirmation pop on the cart counter ---- */
.rx-pop { animation: rxPop .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes rxPop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* ---- links ---- */
a { transition: color .2s ease; }

/* ---- reduced motion: switch it all off ---- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    body { animation: none; }
    .rx-anim .rx-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .rx-product-card, .rx-grid-product, .rx-product-card img, .rx-grid-product img { transition: none !important; }
    .rx-product-card:hover, .rx-grid-product:hover { transform: none; }
}