/* Mr Charms motion pack (1.5.498) — see inc/motion.php.
   One feel ships: Bouncy (body.mrc-m-c, Blair's pick 2026-10-18); the Smooth feels and the preview switcher were removed.
   Loaded without blocking render. Only transform and opacity animate, and all of it sits inside
   prefers-reduced-motion: no-preference. The JS adds every state class; with no JS nothing here hides anything. */

:root {
  --mm-ease: cubic-bezier(.2, .7, .2, 1);
  --mm-out: cubic-bezier(.16, 1, .3, 1);
  --mm-spring: cubic-bezier(.34, 1.56, .64, 1);
  --mm-neon: #39FF14;
}

/* Effect layers created by mrc-motion.js (confetti, sparkles, "+1", deal rings, toast). */
.mm-fx { position: fixed; inset: 0; z-index: 10045; overflow: hidden; pointer-events: none; }
.mm-fx i { position: absolute; display: block; }
.mm-ring { position: absolute; inset: -3px; z-index: 3; border: 2px solid var(--mm-c, var(--mm-neon)); border-radius: inherit; pointer-events: none; opacity: 0; }
.mm-toast { position: fixed; left: 50%; top: 96px; z-index: 10046; display: flex; align-items: center; gap: 12px; max-width: min(420px, calc(100vw - 32px)); padding: 12px 18px 12px 12px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 16px; background: #141517; box-shadow: 0 18px 44px -12px rgba(0, 0, 0, .8); color: #fff; opacity: 0; transform: translate(-50%, -14px); pointer-events: none; transition: opacity .25s ease, transform .35s var(--mm-out); }
.mm-toast.is-in { opacity: 1; transform: translate(-50%, 0); }
.mm-toast__tick { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: var(--mm-c, var(--mm-neon)); color: #062600; }
.mm-toast__tick svg { width: 18px; height: 18px; }
.mm-toast b { display: block; font: 800 15px/1.25 var(--font-body, Manrope), sans-serif; }
.mm-toast small { display: block; margin-top: 3px; color: #b8bcc2; font: 600 13px/1.35 var(--font-body, Manrope), sans-serif; }
@media (max-width: 920px) { .mm-toast { top: 78px; } }

@media print {
  .mrc-m .mrc-rv { opacity: 1 !important; animation: none !important; }
  .mm-fx, .mm-toast { display: none !important; }
}

@media (prefers-reduced-motion: no-preference) {

  /* ---------- 1. Scroll reveals ----------
     mrc-motion.js adds .mrc-rv only to blocks still below the fold, then .is-in as each scrolls into view
     (--rv-d staggers a row; --rv-r is the sticker tilt). Classes are removed when done. */
  .mrc-m .mrc-rv { opacity: 0; }
  .mrc-m-c .mrc-rv.is-in { animation: mmRvC .62s var(--mm-ease) var(--rv-d, 0ms) both; }
  @keyframes mmRvC {
    0% { opacity: 0; transform: translate3d(0, 26px, 0) scale(.86) rotate(var(--rv-r, 0deg)); }
    60% { opacity: 1; transform: translate3d(0, -4px, 0) scale(1.03) rotate(calc(var(--rv-r, 0deg) * -.3)); }
    100% { opacity: 1; transform: none; }
  }

  /* ---------- 2. Cards & buttons ---------- */
  /* Press feedback on every main button (all feels). */
  html body.mrc-m :is(.mrc-pc__btn, .mx3-btn, .pd-add, .pd-sticky-add, .single_add_to_cart_button, .mrc-qv__add, .mrc-qv__pair-add, .mcx-add, [data-card-qty-plus], [data-card-qty-minus], .mrc-shop-qty-btn):active,
  html body.mrc-m .mrc-pc .mrc-pc__foot .mrc-pc__btn:active { transform: scale(.95) !important; }
  html body.mrc-m :is(.mrc-shop-tier, .mrc-shop-design, .mx3-chip, .mx3-bt, .mx3-cc):active { transform: scale(.98) !important; }
  /* Bouncy: a deeper squash that springs back. */
  html body.mrc-m-c :is(.mrc-pc__btn, .mx3-btn, .pd-add, .pd-sticky-add, .single_add_to_cart_button, .mrc-qv__add, .mrc-qv__pair-add, .mcx-add, [data-card-qty-plus], [data-card-qty-minus], .mrc-shop-qty-btn) { transition-duration: .45s !important; transition-timing-function: var(--mm-spring) !important; }
  html body.mrc-m-c :is(.mrc-pc__btn, .mx3-btn, .pd-add, .pd-sticky-add, .single_add_to_cart_button, .mrc-qv__add, .mrc-qv__pair-add, .mcx-add, [data-card-qty-plus], [data-card-qty-minus], .mrc-shop-qty-btn):active,
  html body.mrc-m-c .mrc-pc .mrc-pc__foot .mrc-pc__btn:active { transform: scale(1.06, .88) !important; transition-duration: .08s !important; }

  /* Bouncy: cards tilt like a sticker being picked up, and the charm bobs. */
  @media (hover: hover) and (pointer: fine) {
    .mrc-m-c .mrc-pc:hover { transform: translateY(-4px) rotate(-1deg); }
    .mrc-m-c .mrc-pc:nth-child(even):hover { transform: translateY(-4px) rotate(1deg); }
    .mrc-m-c .mrc-pc:hover .mrc-pc__media-link > img { animation: mmBob 1.6s ease-in-out infinite; }
    .mrc-m-c :is(.mx3-cc, .mx3-bt):hover { transform: translateY(-4px) rotate(-.6deg); }
  }
  @keyframes mmBob { 0%, 100% { transform: scale(1.05) translateY(0); } 50% { transform: scale(1.05) translateY(-4px); } }

  /* Added to cart: the card's quantity stepper pops in and its bundle band slides up. */
  .mrc-m .mm-added .mrc-pc__band { animation: mmBandIn .45s var(--mm-out) both; }
  .mrc-m-c .mm-added [data-card-cart-controls] { animation: mmPopB .55s var(--mm-spring) both; }
  @keyframes mmBandIn { from { translate: 0 100%; } to { translate: 0 0; } }
  @keyframes mmPopB { from { opacity: 0; scale: .7; } to { opacity: 1; scale: 1; } }

  /* Cart count goes up. */
  .mrc-m-c .cart-badge.mm-bump { animation: mmJelly .65s var(--mm-ease); }
  .mrc-m-c .cart-btn.mm-bump { animation: mmWiggle .6s var(--mm-ease); }
  @keyframes mmJelly { 20% { scale: 1.55 .75; } 40% { scale: .8 1.25; } 60% { scale: 1.15 .92; } 80% { scale: .96 1.04; } }
  @keyframes mmWiggle { 15% { rotate: -12deg; scale: 1.08; } 35% { rotate: 10deg; scale: 1.08; } 55% { rotate: -6deg; scale: 1; } 75% { rotate: 3deg; } }

  /* ---------- 3. Bundle moments ---------- */
  /* Ring that ripples out of the header tracker / drawer meter / deal card when a deal unlocks.
     Pops use the scale/rotate/translate properties, which stack on an element's own transform
     (the bottom cart bar is centred with translateX(-50%)). */
  .mm-ring.is-on { animation: mmRing .9s var(--mm-out) both; }
  .mrc-m-c .mm-ring.is-on { animation-duration: 1.1s; }
  @keyframes mmRing { from { opacity: .95; transform: scale(.97); } to { opacity: 0; transform: scale(1.12); } }
  .mrc-m-c .mm-pop { animation: mmBounce .8s var(--mm-ease); }
  @keyframes mmBounce { 15% { scale: 1.12; rotate: -2deg; } 35% { scale: .95; rotate: 2deg; } 55% { scale: 1.05; rotate: -1deg; } 75% { scale: .99; rotate: .5deg; } }
  /* Bundle Builder deal-card fill eases instead of jumping (the bar itself already has a width transition). */
  .mrc-m-c .mbv2 .mrc-shop-tier-fill i { transition: width .5s var(--mm-spring); }
  .mrc-m-c .mm-toast { transition: opacity .2s ease, transform .5s var(--mm-spring); }

  /* ---------- 4. Menus, drawer ---------- */
  @media (min-width: 921px) {
    .mrc-m-c .mrc-mega.is-open .mrc-mega__panel { transform-origin: 50% 0; animation: mmMegaC .42s var(--mm-ease) both; }
    @keyframes mmMegaC {
      0% { opacity: 0; transform: translate(-50%, -14px) scale(.97); }
      60% { opacity: 1; transform: translate(-50%, 3px) scale(1.005); }
      100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    }
    .mrc-m-c .mrc-mega.is-open .mrc-catnav__top { animation: mmPopIn .42s var(--mm-spring) both; }
    .mrc-m-c .mrc-mega.is-open .mrc-catnav__top:nth-child(2) { animation-delay: 25ms; }
    .mrc-m-c .mrc-mega.is-open .mrc-catnav__top:nth-child(3) { animation-delay: 50ms; }
    .mrc-m-c .mrc-mega.is-open .mrc-catnav__top:nth-child(4) { animation-delay: 75ms; }
    .mrc-m-c .mrc-mega.is-open .mrc-catnav__top:nth-child(5) { animation-delay: 100ms; }
    .mrc-m-c .mrc-mega.is-open .mrc-catnav__top:nth-child(6) { animation-delay: 125ms; }
    .mrc-m-c .mrc-mega.is-open .mrc-catnav__top:nth-child(n+7) { animation-delay: 150ms; }
  }
  /* An opened category section drops in (desktop panel and phone accordion). */
  .mrc-m .mrc-catnav__top[aria-expanded="true"] + .mrc-catnav__pane { animation: mmDrop .26s var(--mm-ease) both; }
  @keyframes mmDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  @keyframes mmPopIn { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
  @keyframes mmInRight { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

  /* Phone menu: rows follow the panel in. */
  @media (max-width: 920px) {
    .mrc-m-c.mrc-menu-open .nav-links.is-open { transition-timing-function: var(--mm-spring); }
    .mrc-m-c.mrc-menu-open .nav-links.is-open > * { animation: mmInRight .45s var(--mm-spring) both; }
    .mrc-m-c.mrc-menu-open .nav-links.is-open > :nth-child(2) { animation-delay: 30ms; }
    .mrc-m-c.mrc-menu-open .nav-links.is-open > :nth-child(3) { animation-delay: 60ms; }
    .mrc-m-c.mrc-menu-open .nav-links.is-open > :nth-child(4) { animation-delay: 90ms; }
    .mrc-m-c.mrc-menu-open .nav-links.is-open > :nth-child(5) { animation-delay: 120ms; }
    .mrc-m-c.mrc-menu-open .nav-links.is-open > :nth-child(n+6) { animation-delay: 150ms; }
  }

  /* Cart drawer: it already slides in; B and C bring its rows in after it (only on open, not on every refresh). */
  .mrc-m-c .mrc-side-cart.mm-opening [data-side-cart-body] > * { animation: mmInRight .5s var(--mm-spring) both; }
  .mrc-m-c .mrc-side-cart.mm-opening [data-side-cart-body] > :nth-child(1) { animation-delay: 90ms; }
  .mrc-m-c .mrc-side-cart.mm-opening [data-side-cart-body] > :nth-child(2) { animation-delay: 140ms; }
  .mrc-m-c .mrc-side-cart.mm-opening [data-side-cart-body] > :nth-child(3) { animation-delay: 190ms; }
  .mrc-m-c .mrc-side-cart.mm-opening [data-side-cart-body] > :nth-child(n+4) { animation-delay: 230ms; }
  .mrc-m-c .mrc-side-cart[aria-hidden="false"] .mrc-side-cart-panel { transition: transform .46s cubic-bezier(.3, 1.22, .5, 1); }
}