/* ══════════════════════════════════════════════════════════════════
   themv.shop — Motion Kit (shared by CMS dashboard + designer builder)
   Additive only: keyframes + .mk-* utilities. Never restyles host UIs.
   Accent adapts per host via --mk-accent (falls back to brand orange).
   All motion is transform/opacity. Disabled under prefers-reduced-motion.
   ────────────────────────────────────────────────────────────────── */
:root {
  --mk-accent: #FF8C00;
  --mk-success: #3ddc97;
  --mk-error: #ff8f94;
  --mk-ease: cubic-bezier(.2, .8, .2, 1);
  --mk-spring: cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes mk-rise {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mk-pop {
  0%   { transform: scale(.6); }
  55%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes mk-shake {
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
@keyframes mk-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@keyframes mk-draw-check {
  to { stroke-dashoffset: 0; }
}
@keyframes mk-spin {
  to { transform: rotate(360deg); }
}
@keyframes mk-ring {
  from { transform: scale(.55); opacity: .9; }
  to   { transform: scale(1.5); opacity: 0; }
}
@keyframes mk-wash {
  from { transform: translateX(-101%); }
  to   { transform: translateX(101%); }
}
@keyframes mk-flip-in {
  from { opacity: 0; transform: perspective(600px) rotateX(-12deg) translateY(10px); }
  to   { opacity: 1; transform: perspective(600px) rotateX(0) translateY(0); }
}
@keyframes mk-blink-dot {
  0%, 100% { opacity: .25; }
  50% { opacity: 1; }
}
@keyframes mk-rewind-sweep {
  from { transform: translateX(-101%); }
  to   { transform: translateX(101%); }
}
@keyframes mk-rewind-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* ── version-restore veil: a sweep rolls the canvas back in time ── */
.mk-rewind-veil {
  position: absolute;
  inset: 0;
  z-index: 500;
  overflow: hidden;
  background: rgba(7, 9, 18, .45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  animation: mk-rewind-veil-in .25s var(--mk-ease);
}
@keyframes mk-rewind-veil-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.mk-rewind-veil::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 140, 0, .28), transparent 80%);
  animation: mk-rewind-sweep .8s var(--mk-ease);
}
.mk-rewind-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(9, 12, 26, .92);
  border: 1px solid rgba(255, 140, 0, .5);
  color: #eaeefc;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 999px;
}
.mk-rewind-tag svg { animation: mk-rewind-spin .8s linear; }

/* ── working button: shimmer sweep + labelled stages ── */
.mk-busy {
  position: relative;
  overflow: hidden;
  pointer-events: none;
}
.mk-busy::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .35), transparent 70%);
  transform: translateX(-100%);
  animation: mk-wash 1.1s var(--mk-ease) infinite;
  pointer-events: none;
}
.mk-busy .mk-stage-dots::after {
  content: '';
  animation: mk-blink-dot 1s infinite;
}

/* ── snap highlight: painter-orange ring that clicks into place ── */
.mk-snap {
  position: relative;
}
.mk-snap::after {
  content: '';
  position: absolute;
  inset: -3px;
  border: 2px solid var(--mk-accent);
  border-radius: 10px;
  pointer-events: none;
  animation: mk-ring .55s ease-out forwards;
}

/* ── one-shot helpers (JS removes the class on animationend) ── */
.mk-shake { animation: mk-shake .4s var(--mk-ease); }
.mk-pop { animation: mk-pop .45s var(--mk-spring); }
.mk-rise { animation: mk-rise .35s var(--mk-ease) both; }
.mk-flip-in { animation: mk-flip-in .5s var(--mk-ease) both; }

/* ── skeleton shimmer for generating / loading regions ── */
.mk-shimmer {
  background: linear-gradient(100deg, rgba(148, 163, 184, .08) 40%, rgba(148, 163, 184, .22) 50%, rgba(148, 163, 184, .08) 60%);
  background-size: 200% 100%;
  animation: mk-shimmer 1.3s linear infinite;
  border-radius: 8px;
  min-height: 14px;
}

/* ── flying dot (publish send-off) + burst particles ── */
.mk-fly-dot {
  position: fixed;
  z-index: 99999;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--mk-accent);
  box-shadow: 0 0 14px var(--mk-accent);
  pointer-events: none;
}
.mk-burst-p {
  position: fixed;
  z-index: 99999;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  pointer-events: none;
}

/* ── hold-to-confirm ring (destructive actions) ── */
.mk-hold {
  position: relative;
}
.mk-hold::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 12px;
  padding: 2px;
  background: conic-gradient(var(--mk-error) calc(var(--mk-p, 0) * 1%), transparent 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ── toast icon chip (hosts keep their own toast shells) ── */
.mk-toast-icon {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.mk-toast-icon.ok { background: rgba(61, 220, 151, .16); color: var(--mk-success); }
.mk-toast-icon.err { background: rgba(255, 143, 148, .14); color: var(--mk-error); }
.mk-toast-icon.info { background: rgba(255, 140, 0, .14); color: var(--mk-accent); }
.mk-toast-icon svg path.check {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: mk-draw-check .45s var(--mk-ease) .05s forwards;
}

/* ── staged progress dots inside buttons ── */
.mk-stages {
  display: inline-flex;
  gap: 5px;
  margin-left: 8px;
  vertical-align: middle;
}
.mk-stages i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .25;
}
.mk-stages i.on { opacity: 1; }
.mk-stages i.doing { animation: mk-blink-dot .8s infinite; }

@media (prefers-reduced-motion: reduce) {
  .mk-busy::after,
  .mk-snap::after,
  .mk-shimmer,
  .mk-toast-icon svg path.check { animation: none !important; }
  .mk-shake, .mk-pop, .mk-rise, .mk-flip-in { animation: none !important; }
}