/* ════════════════════════════════════════════════════════════════════
   NexaStore — Motion & Scroll Effects
   All animations gated by body:not(.motion-off) so the toggle works.
   prefers-reduced-motion is always respected (overrides toggle).
   ════════════════════════════════════════════════════════════════════ */

/* ── Smooth scroll ─────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body.motion-off,
body.motion-off html { scroll-behavior: auto; }

/* ── Base reveal: hidden until in-view ─────────────────────────────── */
body:not(.motion-off) [data-anim="reveal"],
body:not(.motion-off) .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.75s cubic-bezier(.2,.8,.2,1),
        transform 0.75s cubic-bezier(.2,.8,.2,1);
    will-change: opacity, transform;
}
body:not(.motion-off) [data-anim="reveal"].in-view,
body:not(.motion-off) .reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* ── Variants ──────────────────────────────────────────────────────── */
body:not(.motion-off) [data-anim="left"]  { opacity: 0; transform: translateX(-36px); transition: opacity 0.75s cubic-bezier(.2,.8,.2,1), transform 0.75s cubic-bezier(.2,.8,.2,1); will-change: opacity, transform; }
body:not(.motion-off) [data-anim="right"] { opacity: 0; transform: translateX( 36px); transition: opacity 0.75s cubic-bezier(.2,.8,.2,1), transform 0.75s cubic-bezier(.2,.8,.2,1); will-change: opacity, transform; }
body:not(.motion-off) [data-anim="scale"] { opacity: 0; transform: scale(0.94);     transition: opacity 0.75s cubic-bezier(.2,.8,.2,1), transform 0.75s cubic-bezier(.2,.8,.2,1); will-change: opacity, transform; }
body:not(.motion-off) [data-anim="fade"]  { opacity: 0;                              transition: opacity 0.75s cubic-bezier(.2,.8,.2,1); will-change: opacity; }
body:not(.motion-off) [data-anim="left"].in-view,
body:not(.motion-off) [data-anim="right"].in-view { opacity: 1; transform: translateX(0); }
body:not(.motion-off) [data-anim="scale"].in-view { opacity: 1; transform: scale(1); }
body:not(.motion-off) [data-anim="fade"].in-view  { opacity: 1; }

/* RTL flips horizontal directions */
body[dir="rtl"]:not(.motion-off) [data-anim="left"]  { transform: translateX( 36px); }
body[dir="rtl"]:not(.motion-off) [data-anim="right"] { transform: translateX(-36px); }
body[dir="rtl"]:not(.motion-off) [data-anim="left"].in-view,
body[dir="rtl"]:not(.motion-off) [data-anim="right"].in-view { transform: translateX(0); }

/* ── Stagger: children inside .stagger-parent reveal sequentially ──── */
body:not(.motion-off) .stagger-parent.in-view > .reveal:nth-child(1)  { transition-delay: 0ms; }
body:not(.motion-off) .stagger-parent.in-view > .reveal:nth-child(2)  { transition-delay: 70ms; }
body:not(.motion-off) .stagger-parent.in-view > .reveal:nth-child(3)  { transition-delay: 140ms; }
body:not(.motion-off) .stagger-parent.in-view > .reveal:nth-child(4)  { transition-delay: 210ms; }
body:not(.motion-off) .stagger-parent.in-view > .reveal:nth-child(5)  { transition-delay: 280ms; }
body:not(.motion-off) .stagger-parent.in-view > .reveal:nth-child(6)  { transition-delay: 350ms; }
body:not(.motion-off) .stagger-parent.in-view > .reveal:nth-child(7)  { transition-delay: 420ms; }
body:not(.motion-off) .stagger-parent.in-view > .reveal:nth-child(8)  { transition-delay: 490ms; }
body:not(.motion-off) .stagger-parent.in-view > .reveal:nth-child(9)  { transition-delay: 560ms; }
body:not(.motion-off) .stagger-parent.in-view > .reveal:nth-child(10) { transition-delay: 630ms; }
body:not(.motion-off) .stagger-parent.in-view > .reveal:nth-child(11) { transition-delay: 700ms; }
body:not(.motion-off) .stagger-parent.in-view > .reveal:nth-child(12) { transition-delay: 770ms; }

/* ── Hero subtle drift (Ken Burns) ─────────────────────────────────── */
body:not(.motion-off) .hero-slide.active .hero-slide-img {
    animation: nx-kenburns 14s ease-in-out infinite alternate;
}
@keyframes nx-kenburns {
    from { transform: scale(1) translate(0, 0); }
    to   { transform: scale(1.06) translate(-1%, -1%); }
}

/* ── Image hover zoom (apply via .img-zoom container) ──────────────── */
body:not(.motion-off) .img-zoom { overflow: hidden; }
body:not(.motion-off) .img-zoom img { transition: transform 0.7s cubic-bezier(.2,.8,.2,1); }
body:not(.motion-off) .img-zoom:hover img { transform: scale(1.07); }

/* ── Product card lift refinement (works even with toggle off) ─────── */
.product-card { transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease, border-color 0.2s; }
body:not(.motion-off) .product-card:hover { transform: translateY(-4px); }

/* Card image subtle zoom on card hover */
body:not(.motion-off) .product-card .card-image img,
body:not(.motion-off) .product-card .card-image-slider img.active {
    transition: transform 0.6s cubic-bezier(.2,.8,.2,1), opacity 0.3s;
}
body:not(.motion-off) .product-card:hover .card-image-slider img.active { transform: scale(1.05); }

/* ── Button hover micro-interaction ────────────────────────────────── */
body:not(.motion-off) .hero-btn,
body:not(.motion-off) .cs-feature-link,
body:not(.motion-off) .cart-sidebar-checkout {
    position: relative;
    overflow: hidden;
}
body:not(.motion-off) .hero-btn::after,
body:not(.motion-off) .cs-feature-link::after,
body:not(.motion-off) .cart-sidebar-checkout::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
    pointer-events: none;
}
body:not(.motion-off) .hero-btn:hover::after,
body:not(.motion-off) .cs-feature-link:hover::after,
body:not(.motion-off) .cart-sidebar-checkout:hover::after {
    width: 240px; height: 240px;
}

/* ── Section-divider gradient sweep (decorative) ───────────────────── */
body:not(.motion-off) .home-section { position: relative; }

/* ── Floating attention pulse (e.g. flash sale section) ────────────── */
body:not(.motion-off) .flash-sale-section .countdown .cd-box {
    animation: nx-cdpulse 2s ease-in-out infinite;
}
body:not(.motion-off) .flash-sale-section .countdown .cd-box:nth-child(2) { animation-delay: 0.2s; }
body:not(.motion-off) .flash-sale-section .countdown .cd-box:nth-child(3) { animation-delay: 0.4s; }
body:not(.motion-off) .flash-sale-section .countdown .cd-box:nth-child(4) { animation-delay: 0.6s; }
@keyframes nx-cdpulse {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

/* ── Announcement bar marquee ──────────────────────────────────────── */
body:not(.motion-off) .announcement-bar > * {
    display: inline-block;
    padding-left: 100%;
    animation: nx-marquee 22s linear infinite;
}
.announcement-bar { overflow: hidden; white-space: nowrap; }
@keyframes nx-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-200%); }
}
body[dir="rtl"]:not(.motion-off) .announcement-bar > * {
    animation-name: nx-marquee-rtl;
    padding-left: 0;
    padding-right: 100%;
}
@keyframes nx-marquee-rtl {
    0%   { transform: translateX(0); }
    100% { transform: translateX(200%); }
}

/* ── Nav link underline hover ──────────────────────────────────────── */
body:not(.motion-off) .header-nav a {
    position: relative;
}
body:not(.motion-off) .header-nav a::before {
    content: '';
    position: absolute;
    bottom: -4px; left: 50%;
    width: 0; height: 2px;
    background: var(--primary);
    transform: translateX(-50%);
    transition: width 0.3s cubic-bezier(.2,.8,.2,1);
}
body:not(.motion-off) .header-nav a:hover::before,
body:not(.motion-off) .header-nav a.active::before { width: 70%; }

/* ── Cart bounce on add (triggered via JS adding .cart-bounce) ─────── */
body:not(.motion-off) .header-action-btn.cart-bounce {
    animation: nx-cartbounce 0.5s cubic-bezier(.36,0,.66,-0.56);
}
@keyframes nx-cartbounce {
    0%, 100% { transform: scale(1); }
    25%      { transform: scale(0.85); }
    50%      { transform: scale(1.18) rotate(-8deg); }
    75%      { transform: scale(0.95) rotate(4deg); }
}

/* ── Scroll progress bar (top of page) ─────────────────────────────── */
.scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    width: 0;
    z-index: 1000;
    transition: width 0.1s ease-out;
    pointer-events: none;
}
body.motion-off .scroll-progress { display: none; }

/* ════════════════════════════════════════════════════════════════════
   MOTION TOGGLE BUTTON
   ════════════════════════════════════════════════════════════════════ */
.motion-toggle {
    position: fixed;
    bottom: 24px; left: 24px;
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    cursor: pointer;
    z-index: 95;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    transition: transform 0.25s cubic-bezier(.2,.8,.2,1), background 0.2s;
    user-select: none;
}
body[dir="rtl"] .motion-toggle { left: auto; right: 24px; }
.motion-toggle:hover {
    background: rgba(15, 23, 42, 1);
    transform: translateY(-2px);
}
.motion-toggle svg { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.4s; }
.motion-toggle.is-off svg { opacity: 0.5; transform: rotate(180deg); }
.motion-toggle .mt-state {
    font-weight: 800;
    color: #4ade80;
    letter-spacing: 0.5px;
}
.motion-toggle.is-off .mt-state { color: #94a3b8; }
.motion-toggle .mt-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 6px #4ade80;
    transition: all 0.3s;
}
.motion-toggle.is-off .mt-dot {
    background: #475569;
    box-shadow: none;
}

/* On mobile push it above bottom nav */
@media (max-width: 768px) {
    .motion-toggle { bottom: 80px; left: 12px; padding: 7px 11px; font-size: 10px; }
    body[dir="rtl"] .motion-toggle { right: 12px; }
}

/* ════════════════════════════════════════════════════════════════════
   ACCESSIBILITY: prefers-reduced-motion always wins
   ════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    [data-anim="reveal"], [data-anim="left"], [data-anim="right"], [data-anim="scale"], [data-anim="fade"], .reveal {
        opacity: 1 !important;
        transform: none !important;
    }
    .scroll-progress { display: none; }
}