/*
 * Storefront motion, driven by html[data-motion] (set from the Theme Builder):
 *   none   — no movement at all (the announcement bar stops scrolling too)
 *   subtle — sections fade up as they scroll in, gentle hover lift
 *   bold   — larger reveals with stagger, hero intro, image zoom, cart bump
 * Reveal states only apply when html.js-motion is present (added in <head>
 * when JS, IntersectionObserver and motion preferences allow), so content is
 * never hidden for visitors without JS or with reduced motion.
 */

:root {
    --mo-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --mo-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- none ---------- */

html[data-motion="none"] .sf-ticker-track {
    animation: none;
    width: auto;
}

html[data-motion="none"] .sf-ticker-list[aria-hidden="true"] {
    display: none;
}

html[data-motion="none"] .sf-ticker-list {
    flex-wrap: wrap;
    justify-content: center;
}

html[data-motion="none"] .sf-product-card,
html[data-motion="none"] .sf-product-card .sf-product-media img,
html[data-motion="none"] .sf-chip-media img {
    transition: none !important;
    transform: none !important;
}

/* ---------- Scroll reveal ---------- */

html.js-motion [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition:
        opacity 560ms var(--mo-ease) var(--reveal-delay, 0ms),
        transform 560ms var(--mo-ease) var(--reveal-delay, 0ms);
}

html.js-motion[data-motion="bold"] [data-reveal] {
    transform: translate3d(0, 36px, 0) scale(0.97);
    transition-duration: 760ms;
}

html.js-motion[data-motion="bold"] [data-reveal="fade"] {
    transform: none;
}

html.js-motion [data-reveal].is-inview {
    opacity: 1;
    transform: none;
}

/* ---------- Hero intro (bold) ---------- */

html[data-motion="bold"] .swiper-slide-active .sf-hero-tag,
html[data-motion="bold"] .swiper-slide-active .sf-hero-title,
html[data-motion="bold"] .swiper-slide-active .sf-hero-text,
html[data-motion="bold"] .swiper-slide-active .sf-btn-light {
    animation: mo-rise 820ms var(--mo-ease) both;
}

html[data-motion="bold"] .swiper-slide-active .sf-hero-title { animation-delay: 90ms; }
html[data-motion="bold"] .swiper-slide-active .sf-hero-text { animation-delay: 200ms; }
html[data-motion="bold"] .swiper-slide-active .sf-btn-light { animation-delay: 310ms; }

@keyframes mo-rise {
    from {
        opacity: 0;
        transform: translate3d(0, 26px, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- Product cards ---------- */

html[data-motion="subtle"] .sf-product-card,
html[data-motion="bold"] .sf-product-card {
    transition: transform 260ms var(--mo-ease), box-shadow 260ms var(--mo-ease), border-color 160ms ease;
}

html[data-motion="subtle"] .sf-product-card:hover {
    transform: translate3d(0, -3px, 0);
}

html[data-motion="bold"] .sf-product-card:hover {
    transform: translate3d(0, -6px, 0);
    box-shadow: var(--theme-shadow-md);
}

html[data-motion="bold"] .sf-product-card .sf-product-media img {
    transition: transform 600ms var(--mo-ease);
}

html[data-motion="bold"] .sf-product-card:hover .sf-product-media img {
    transform: scale(1.07);
}

/* Add-to-cart: quick press feedback */
html[data-motion="subtle"] .btn:active,
html[data-motion="bold"] .btn:active {
    transform: scale(0.97);
}

/* ---------- Category chips & promo tiles ---------- */

html[data-motion="subtle"] .sf-chip-media img,
html[data-motion="bold"] .sf-chip-media img {
    transition: transform 400ms var(--mo-ease);
}

html[data-motion="subtle"] .sf-chip:hover .sf-chip-media img {
    transform: scale(1.05);
}

html[data-motion="bold"] .sf-chip:hover .sf-chip-media img {
    transform: scale(1.12) rotate(-2deg);
}

html[data-motion="bold"] .sf-promo-tile {
    position: relative;
    overflow: hidden;
    transition: transform 300ms var(--mo-ease);
}

html[data-motion="bold"] .sf-promo-tile:hover {
    transform: translate3d(0, -4px, 0);
}

/* Light sweep across a promo tile on hover */
html[data-motion="bold"] .sf-promo-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%);
    transform: translateX(-110%);
    pointer-events: none;
}

html[data-motion="bold"] .sf-promo-tile:hover::after {
    transform: translateX(110%);
    transition: transform 900ms var(--mo-ease);
}

/* ---------- Section titles (bold): accent line draws in ---------- */

html[data-motion="bold"] .sf-row-title {
    position: relative;
}

html[data-motion="bold"] .sf-row-title::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: -6px;
    width: 40px;
    height: 3px;
    border-radius: 3px;
    background: var(--theme-color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 700ms var(--mo-ease) 200ms;
}

[dir="rtl"][data-motion="bold"] .sf-row-title::after {
    transform-origin: right;
}

html[data-motion="bold"] .is-inview .sf-row-title::after,
html[data-motion="bold"]:not(.js-motion) .sf-row-title::after {
    transform: scaleX(1);
}

/* ---------- Cart bump when an item is added ---------- */

.sf-cart-icon.is-bump {
    animation: mo-bump 520ms var(--mo-ease-spring);
}

html[data-motion="bold"] .sf-cart-icon.is-bump {
    animation: mo-bump-bold 700ms var(--mo-ease-spring);
}

@keyframes mo-bump {
    40% { transform: scale(1.18); }
}

@keyframes mo-bump-bold {
    25% { transform: scale(1.3) rotate(-10deg); }
    55% { transform: scale(0.92) rotate(6deg); }
}

/* ---------- Reduced motion always wins ---------- */

@media (prefers-reduced-motion: reduce) {
    html [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }

    html[data-motion] *,
    html[data-motion] *::before,
    html[data-motion] *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}