/* ============================================
   MERELINO — Motion-preference toggle
   ============================================
   Loaded by every page via the cart sidebar so customers with vestibular
   sensitivity (and anyone who finds the 3D rotation distracting) can
   pause the artwork spin without changing their OS-level
   prefers-reduced-motion setting.

   Storage state lives in localStorage under `mercelino_motion_paused`
   ("1" = paused, anything else = running). The toggle button lives in
   the cart header next to the existing close button; clicking it flips
   state and fires a toast. State persists across page loads via
   motion-toggle.js.

   IMPORTANT: The actual rotation kill-switch rule
   (`html.motion-paused .product-card-image img.anime-img { animation:none;
   transform:none; }`) is NOT in this file — it's injected as a tiny
   inline <style> block at the end of every page's <head> by
   _inject_motion_toggle.py. The inline placement guarantees the rule
   is in CSSOM before any .anime-img paints (true zero-FOUC, regardless
   of how late this external stylesheet arrives). Keep that in mind
   before adding a duplicate here — external rules arrive too late to
   prevent pre-paint animation frames.

   What lives in THIS file:
     - Toggle button visuals (.motion-toggle + hover/focus/aria states)
     - The hover-while-paused transform override
       (`html.motion-paused .product-card:hover …`) — only applies on
       hover, no FOUC concern, so external stylesheet is fine.
   ============================================ */
.motion-toggle {
  background: none;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--color-foreground);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s, background 0.3s, border-color 0.3s;
  font-family: var(--font-body);
}
.motion-toggle:hover {
  color: var(--color-primary);
  background: var(--color-muted);
}
.motion-toggle:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-muted);
}
/* aria-checked="false" means user has paused rotation — paint it as "active" */
.motion-toggle[aria-checked="false"] {
  color: var(--color-primary);
  background: var(--color-muted);
}
.motion-toggle-icon {
  width: 18px;
  height: 18px;
  display: block;
}

/* On hover, when paused, only show the gentlest lift. No rotation, no
   translate — the card still pops out slightly so users get a static
   affordance response without any motion cue. Hover-only, so safe to
   live in the external stylesheet (no pre-paint concern). */
html.motion-paused .product-card:hover .product-card-image img.anime-img {
  transform: scale(1.04) !important;
  box-shadow: 0 12px 24px rgba(190, 24, 93, 0.25);
}
