/* Every animation sits under html:not([data-motion="paused"]), so the Animations switch removes them all at once. */

/* ---------- keyframes ---------- */
@keyframes m-fade { from { opacity: 0; } }
@keyframes m-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes m-pop { from { opacity: 0; transform: scale(.6); } }
/* Transform-only pop for content that is already painted at load: it must never start at opacity 0. */
@keyframes m-scale { from { transform: scale(.6); } }
@keyframes m-ring { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
@keyframes m-wipe { from { -webkit-clip-path: inset(-8px 100% -8px 0); clip-path: inset(-8px 100% -8px 0); } }
@keyframes m-heart { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes m-fly { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0; } }
@keyframes m-bell { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-16deg); } 35% { transform: rotate(13deg); } 55% { transform: rotate(-8deg); } 75% { transform: rotate(4deg); } }
@keyframes m-shimmer { to { background-position: -200% 0; } }
@keyframes m-flash { 0%, 100% { color: inherit; } 40% { color: var(--best-ink); } }
@keyframes m-dim { from { opacity: .45; } }

/* ---------- always-on structure (no motion) ---------- */
[data-m~="draw"] { isolation: isolate; }
.m-sk, .m-sk-line { display: block; height: 12px; border-radius: var(--radius-s); background: linear-gradient(90deg, var(--surface-2) 0, var(--surface-3) 50%, var(--surface-2) 100%); background-size: 200% 100%; }
.m-sk.m-w2 { width: 90%; height: 14px; }
.m-dot { position: fixed; z-index: 80; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--primary); pointer-events: none; }
.m-bump { display: inline-block; }

/* ---------- 1 price-drop moment ---------- */
html:not([data-motion="paused"]) .m-drop .pdp-amount { animation: m-flash calc(var(--dur-slow) * 2) var(--ease-standard); }
html:not([data-motion="paused"]) .m-drop .pdp-was span { display: inline-block; animation: m-scale var(--dur-3) var(--ease-spring) calc(var(--dur-slow) + 80ms) backwards; }

/* ---------- 2 best-offer highlight ---------- */
.m-go .offer { position: relative; }
html:not([data-motion="paused"]) .m-go .offer { animation: m-rise var(--dur-4) var(--ease-out) calc(var(--m-i, 0) * 60ms) backwards; }
html:not([data-motion="paused"]) .m-go .offer.best::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px var(--best); pointer-events: none; animation: m-ring calc(var(--dur-slow) * 2) var(--ease-standard) calc(var(--dur-slow) + 60ms) backwards; opacity: 0; }
html:not([data-motion="paused"]) .m-go .offer .badge-best { animation: m-pop var(--dur-3) var(--ease-spring) var(--dur-slow) backwards; }

/* ---------- 3 save heart + compare-add ---------- */
html:not([data-motion="paused"]) .m-pop .icon { animation: m-heart var(--dur-4) var(--ease-spring); }
html:not([data-motion="paused"]) .m-dot { animation: m-fly var(--dur-4) var(--ease-standard) forwards; }
html:not([data-motion="paused"]) .m-bump { animation: m-heart var(--dur-4) var(--ease-spring); }

/* ---------- 4 alert bell ---------- */
.m-bellbox .icon { transform-origin: 50% 12%; }
html:not([data-motion="paused"]) .m-ring .icon { animation: m-bell calc(var(--dur-slow) * 1.5) var(--ease-standard); }

/* ---------- 5 skeleton shimmer ---------- */
html:not([data-motion="paused"]) .m-sk, html:not([data-motion="paused"]) .m-sk-line { animation: m-shimmer calc(var(--dur-slow) * 3.3) linear infinite; }

/* ---------- 6 filters: badge pop, grid dim ---------- */
html:not([data-motion="paused"]) .m-bounce { animation: m-pop var(--dur-3) var(--ease-spring); }
html:not([data-motion="paused"]) .m-dim { animation: m-dim var(--dur-3) var(--ease-standard); }

/* ---------- 7 price-history draw-in ---------- */
html:not([data-motion="paused"]) .chart.m-go svg { animation: m-wipe calc(var(--dur-slow) * 2) var(--ease-out) backwards; }
html:not([data-motion="paused"]) .chart.m-go .area { animation: m-fade var(--dur-slow) var(--ease-standard) var(--dur-slow) backwards; }
html:not([data-motion="paused"]) .chart.m-go .now-dot { animation: m-pop var(--dur-3) var(--ease-spring) calc(var(--dur-slow) * 2) backwards; }

/* ---------- 9 theme crossfade (colours only) ---------- */
html:not([data-motion="paused"]).m-theme-fade, html:not([data-motion="paused"]).m-theme-fade * { transition: background-color var(--dur-4) var(--ease-standard), color var(--dur-4) var(--ease-standard), border-color var(--dur-4) var(--ease-standard), fill var(--dur-4) var(--ease-standard), stroke var(--dur-4) var(--ease-standard) !important; }

/* ---------- 10 section reveal ---------- */
html.m-js:not([data-motion="paused"]) .m-pend { opacity: 0; }
html:not([data-motion="paused"]) .m-in { animation: m-rise var(--dur-4) var(--ease-out) calc(var(--m-i, 0) * 50ms) backwards; }

/* ---------- reduced motion (only when IGNORE_REDUCED_MOTION is false): fades, no movement ---------- */
@media (prefers-reduced-motion: reduce) {
  html:not([data-ignore-rm]) .m-go .offer, html:not([data-ignore-rm]) .m-go .offer .badge-best, html:not([data-ignore-rm]) .m-in,
  html:not([data-ignore-rm]) .m-bounce, html:not([data-ignore-rm]) .m-drop .pdp-was span, html:not([data-ignore-rm]) .chart.m-go svg,
  html:not([data-ignore-rm]) .chart.m-go .now-dot, html:not([data-ignore-rm]) .m-pop .icon, html:not([data-ignore-rm]) .m-bump, html:not([data-ignore-rm]) .m-ring .icon {
    animation-name: m-fade !important; animation-duration: var(--dur-3) !important; animation-delay: 0s !important; animation-timing-function: var(--ease-standard) !important;
  }
  html:not([data-ignore-rm]) .m-sk, html:not([data-ignore-rm]) .m-sk-line { animation: none; }
  html:not([data-ignore-rm]) .m-dot { display: none; }
}

/* ---------- ignore Reduce Motion (IGNORE_REDUCED_MOTION = true): undo the base components.css reduced-motion block ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-ignore-rm] .btn-primary, html[data-ignore-rm] .btn-secondary, html[data-ignore-rm] .btn-tertiary, html[data-ignore-rm] .btn-icon, html[data-ignore-rm] .chip, html[data-ignore-rm] .pcard, html[data-ignore-rm] .offer-cta, html[data-ignore-rm] .pcard-save { transition: transform var(--dur-1) var(--ease-standard), background-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard), opacity var(--dur-2) var(--ease-standard); }
  html[data-ignore-rm] .btn-primary:active, html[data-ignore-rm] .btn-secondary:active, html[data-ignore-rm] .btn-tertiary:active, html[data-ignore-rm] .btn-icon:active, html[data-ignore-rm] .chip:active { transform: scale(.97); }
  html[data-ignore-rm] .pcard:active { transform: scale(.98); }
  html[data-ignore-rm] .pcard-save:active { transform: scale(.9); }
  html[data-ignore-rm] .sheet, html[data-ignore-rm] .toast { transition: transform var(--dur-3) var(--ease-standard), opacity var(--dur-3) var(--ease-standard); }
  html[data-ignore-rm] .sheet:not(.settings) { transform: translateY(100%) !important; }
  html[data-ignore-rm] .sheet:not(.settings):not(.open) { opacity: 1; }
  html[data-ignore-rm] .sheet.open { transform: none !important; }
  html[data-ignore-rm] .toast { transform: translateY(12px) !important; }
  html[data-ignore-rm] .toast.show { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 720px) {
  html[data-ignore-rm] .settings.sheet { transform: scale(.94) !important; opacity: 0; }
  html[data-ignore-rm] .settings.sheet.open { transform: none !important; opacity: 1; }
}

/* ---------- Animations switch off ---------- */
html[data-motion="paused"] .m-dot { display: none; }