/* ==========================================================================
   Motion (assets/js/storefront-motion.js adds html.sf-motion; without it, nothing is hidden)
   ========================================================================== */
@keyframes sf-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes sf-pop { 0% { transform: scale(1); } 35% { transform: scale(1.32); } 60% { transform: scale(.92); } 100% { transform: scale(1); } }
@keyframes sf-bump { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.45); } 70% { transform: scale(.9); } }
@keyframes sf-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes sf-shine { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(220%) skewX(-18deg); } }
@keyframes sf-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sf-ring { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary-color) 45%, transparent); } to { box-shadow: 0 0 0 14px transparent; } }

/* Scroll reveal: cards and headings rise in, staggered by --sf-i */
html.sf-motion body.sf-modern .sf-reveal:not(.sf-in) { opacity: 0; transform: translateY(22px); animation: none !important; }
html.sf-motion body.sf-modern .sf-reveal.sf-in {
    animation: sf-rise .7s cubic-bezier(.2, .7, .2, 1) both;
    animation-delay: calc(var(--sf-i, 0) * 70ms);
}
/* The accent bar above section titles draws in */
html.sf-motion body.sf-modern .marketing-title::before { transform-origin: left center; transform: scaleX(0); }
html.sf-motion body.sf-modern[data-language="ar"] .marketing-title::before { transform-origin: right center; }
html.sf-motion body.sf-modern .featured-marketing .marketing-title::before { transform-origin: center; }
html.sf-motion body.sf-modern .sf-in .marketing-title::before,
html.sf-motion body.sf-modern .marketing-content.sf-in .marketing-title::before { animation: sf-bar .6s .2s cubic-bezier(.2, .7, .2, 1) both; }

/* Hero: headline, text and button arrive one after another on every slide change */
body.sf-modern .hero-slide.fade-in h1,
body.sf-modern .hero-slide.fade-in p,
body.sf-modern .hero-slide.fade-in .btn-hero,
html.sf-motion body.sf-modern .hero.sf-hero-ready h1,
html.sf-motion body.sf-modern .hero.sf-hero-ready p,
html.sf-motion body.sf-modern .hero.sf-hero-ready .btn-hero { animation: sf-rise .8s cubic-bezier(.2, .7, .2, 1) both !important; }
body.sf-modern .hero-slide.fade-in p, html.sf-motion body.sf-modern .hero.sf-hero-ready p { animation-delay: .12s !important; }
body.sf-modern .hero-slide.fade-in .btn-hero, html.sf-motion body.sf-modern .hero.sf-hero-ready .btn-hero { animation-delay: .24s !important; }
body.sf-modern .btn-hero { position: relative; overflow: hidden; }
body.sf-modern .btn-hero::after {
    content: ''; position: absolute; inset: 0; width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: translateX(-120%) skewX(-18deg); pointer-events: none;
}
body.sf-modern .btn-hero:hover::after { animation: sf-shine .9s ease; }
body.sf-modern .slide-indicators .indicator, body.sf-modern .slide-indicators > * { transition: width .3s ease, background .3s ease, opacity .3s; }

/* Product cards: a soft light sweep across the photo on hover */
body.sf-modern .product-image-container::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; z-index: 2; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: translateX(-120%) skewX(-18deg);
}
body.sf-modern .product-card:hover .product-image-container::after { animation: sf-shine 1s ease; }
body.sf-modern .btn-add-cart:active, body.sf-modern .category-card-btn:active, body.sf-modern .qty-btn:active { transform: scale(.95) !important; }
body.sf-modern .btn-add-cart.sf-added { animation: sf-ring .7s ease-out; }

/* Heart pops when tapped; cart / wishlist badges bump when their number changes */
body.sf-modern .btn-wishlist.sf-pop, body.sf-modern .btn-wishlist-corner.sf-pop { animation: sf-pop .5s ease; }
body.sf-modern .sf-bump { animation: sf-bump .5s ease; display: inline-flex; }

/* Navbar slims down and gains a shadow once the page scrolls */
body.sf-modern .navbar { transition: padding .25s ease, box-shadow .25s ease, background .25s ease; }
body.sf-modern.sf-scrolled .navbar { box-shadow: 0 6px 24px rgba(20, 22, 31, .08) !important; }
@media (min-width: 992px) {
    body.sf-modern.sf-scrolled .navbar { padding-top: .35rem !important; padding-bottom: .35rem !important; }
}

/* Small living details */
body.sf-modern .separator-icon { animation: sf-float 3.5s ease-in-out infinite; }
body.sf-modern .trust-icon { transition: transform .35s cubic-bezier(.2, .7, .2, 1), background .25s, color .25s; }
body.sf-modern .trust-item:hover .trust-icon { transform: translateY(-3px) rotate(-6deg); background: var(--primary-color) !important; }
body.sf-modern .trust-item:hover .trust-icon i { color: #fff !important; }
body.sf-modern .footer-social-icon { transition: background .2s, transform .2s; }
body.sf-modern .footer-social-icon:hover { transform: translateY(-3px); }
body.sf-modern .mobile-nav-item .mobile-nav-icon { transition: transform .25s cubic-bezier(.2, .7, .2, 1), background .25s; }
body.sf-modern .mobile-nav-item:active .mobile-nav-icon { transform: scale(.85); }
body.sf-modern .mobile-nav-item.active .mobile-nav-icon { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
    body.sf-modern *, body.sf-modern *::before, body.sf-modern *::after { transition: none !important; animation: none !important; }
    /* Elements that start hidden and are revealed by an animation (base styles: .category-card +
       .animate-in, .fade-in-up, hero text, pop-up titles, our scroll reveal) must simply be visible
       when animations are switched off — otherwise they stay invisible (iPhone "Reduce Motion") */
    body.sf-modern .category-card, body.sf-modern .fade-in-up, body.sf-modern .sf-reveal,
    body.sf-modern .hero h1, body.sf-modern .hero p, body.sf-modern .btn-hero, body.sf-modern .swal2-title,
    body.sf-modern .sf-announce-item.is-active, body.sf-modern .sf-mega-link {
        opacity: 1 !important; transform: none !important;
    }
}