/* Motion graphics on the tool guides (landing/new_ui/_motion.html). One 6 s loop per scene:
   move / pop / draw steps share the same clock, staggered with --d. Paused off-screen and by the
   Pause button (.is-paused); a still picture of the end state with prefers-reduced-motion. */
.cover.motion { --mg-t: 6s; display: block; place-items: normal; min-height: 0; padding: 0; margin-left: 0; margin-right: 0; }
.motion__stage { display: block; width: 100%; height: auto; }
/* The caption sits in its own band under the stage, so it never covers the picture */
.motion__caption { position: relative; padding: 12px 18px 14px; color: #fff; font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: 1.35; text-align: center; background: rgba(10, 29, 41, .22); }
.motion__toggle { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); background: rgba(10,29,41,.35); color: #fff; cursor: pointer; display: grid; place-items: center; }
.motion__toggle:hover { background: rgba(10,29,41,.55); }
.motion__toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.motion__toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.motion__play { display: none; fill: currentColor; stroke: none; }
.motion.is-paused-by-user .motion__play { display: block; }
.motion.is-paused-by-user .motion__pause { display: none; }

.mg-text { font-family: var(--font); font-weight: 800; font-size: 26px; fill: #fff; }
.mg-text--sm { font-size: 15px; font-weight: 700; }
.mg-text--xs { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; }
.mg-text--ink { fill: #033d63; }
.mg-text--mark { font-size: 24px; fill: #e6944c; opacity: .75; letter-spacing: .08em; }
.mg-shadow { filter: drop-shadow(0 8px 12px rgba(3, 29, 47, .28)); }

.mg-move, .mg-move-late, .mg-pop, .mg-pop-early, .mg-out, .mg-drop, .mg-dim, .mg-type, .mg-draw, .mg-sweep,
.mg-frame, .mg-meter, .mg-flow, .mg-shackle-close, .mg-shackle-open {
  transform-box: fill-box; transform-origin: center;
  animation-duration: var(--mg-t); animation-iteration-count: infinite; animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  animation-delay: var(--d, 0s); animation-fill-mode: backwards;
}
.motion.is-paused [class*="mg-"], .motion.is-paused-by-user [class*="mg-"] { animation-play-state: paused; }

.mg-move { animation-name: mg-move; }
.mg-move-late { animation-name: mg-move-late; }
.mg-pop { animation-name: mg-pop; }
.mg-pop-early { animation-name: mg-pop-early; }
.mg-out { animation-name: mg-out; }
.mg-drop { animation-name: mg-drop; }
.mg-dim { animation-name: mg-dim; }
.mg-type { animation-name: mg-type; transform-origin: left center; }
.mg-draw { animation-name: mg-draw; stroke-dasharray: 100; }
.mg-sweep { animation-name: mg-sweep; }
.mg-frame { animation-name: mg-frame; }
.mg-meter { animation-name: mg-meter; transform-origin: left center; }
.mg-flow { animation-name: mg-flow; }
.mg-shackle-close { animation-name: mg-shackle-close; }
.mg-shackle-open { animation-name: mg-shackle-open; transform-origin: right bottom; }

@keyframes mg-move {
  0% { transform: none; opacity: 0; } 6%, 16% { transform: none; opacity: 1; }
  44%, 90% { transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, 0deg)) scale(var(--sc, 1)); opacity: 1; }
  98%, 100% { transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, 0deg)) scale(var(--sc, 1)); opacity: 0; }
}
@keyframes mg-move-late {
  0% { transform: none; opacity: 0; } 6%, 46% { transform: none; opacity: 1; }
  64%, 90% { transform: translate(var(--dx, 0px), var(--dy, 0px)); opacity: 1; }
  98%, 100% { transform: translate(var(--dx, 0px), var(--dy, 0px)); opacity: 0; }
}
@keyframes mg-pop {
  0%, 44% { transform: scale(.5); opacity: 0; } 52% { transform: scale(1.06); opacity: 1; }
  57%, 90% { transform: none; opacity: 1; } 98%, 100% { transform: none; opacity: 0; }
}
@keyframes mg-pop-early {
  0%, 12% { transform: scale(.5); opacity: 0; } 20% { transform: scale(1.08); opacity: 1; }
  25%, 90% { transform: none; opacity: 1; } 98%, 100% { transform: none; opacity: 0; }
}
@keyframes mg-out { 0% { opacity: 0; } 6%, 30% { opacity: 1; } 44%, 100% { opacity: 0; } }
@keyframes mg-drop {
  0% { transform: none; opacity: 0; } 6%, 26% { transform: none; opacity: 1; }
  44%, 100% { transform: translateY(70px) rotate(8deg); opacity: 0; }
}
@keyframes mg-dim { 0% { opacity: 0; } 6%, 16% { opacity: 1; } 44%, 90% { opacity: .4; } 98%, 100% { opacity: 0; } }
@keyframes mg-type {
  0%, 14% { transform: scaleX(0); opacity: 0; } 15% { transform: scaleX(0); opacity: 1; }
  34%, 90% { transform: none; opacity: 1; } 98%, 100% { transform: none; opacity: 0; }
}
@keyframes mg-draw { 0%, 40% { stroke-dashoffset: 100; opacity: 1; } 62%, 90% { stroke-dashoffset: 0; opacity: 1; } 98%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes mg-sweep { 0%, 8% { transform: none; opacity: 0; } 10% { opacity: 1; } 40% { transform: translateY(202px); opacity: 1; } 44%, 100% { transform: translateY(202px); opacity: 0; } }
@keyframes mg-frame {
  0% { transform: scale(1.5, 1.9); opacity: 0; } 8%, 14% { transform: scale(1.5, 1.9); opacity: 1; }
  40%, 90% { transform: none; opacity: 1; } 98%, 100% { transform: none; opacity: 0; }
}
@keyframes mg-meter { 0%, 16% { transform: none; } 44%, 90% { transform: scaleX(.38); opacity: 1; } 98%, 100% { transform: scaleX(.38); opacity: 0; } }
@keyframes mg-flow { 0%, 20% { opacity: .25; transform: translateX(-10px); } 40%, 90% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes mg-shackle-close { 0%, 16% { transform: translateY(-20px); } 40%, 100% { transform: none; } }
@keyframes mg-shackle-open { 0%, 16% { transform: none; } 40%, 100% { transform: translateY(-16px) rotate(24deg); } }

@media (prefers-reduced-motion: reduce) {
  .motion [class*="mg-"] { animation: none !important; }
  .mg-move { transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, 0deg)) scale(var(--sc, 1)); }
  .mg-move-late { transform: translate(var(--dx, 0px), var(--dy, 0px)); }
  .mg-out, .mg-drop, .mg-sweep { opacity: 0; }
  .mg-dim { opacity: .4; }
  .mg-meter { transform: scaleX(.38); }
  .mg-shackle-open { transform: translateY(-16px) rotate(24deg); }
  .motion__toggle { display: none; }
}
@media (max-width: 640px) {
  .motion__caption { padding: 10px 14px 12px; font-size: var(--fs-label); }
  .motion__toggle { top: 10px; right: 10px; width: 30px; height: 30px; }
}

/* Views and likes (blog/new_ui/_stats.html) */
.post-stats { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.post-stats__item { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: var(--fs-label); }
.post-stats svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.like-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-label); font-weight: var(--fw-semibold); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.like-btn svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.like-btn:hover { border-color: var(--danger); color: var(--danger-text); }
.like-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.like-btn[aria-pressed="true"] { background: var(--danger-soft); border-color: var(--danger); color: var(--danger-text); }
.like-btn[aria-pressed="true"] svg { fill: currentColor; }
.like-btn.is-bump svg { animation: like-bump .35s ease; }
.like-btn__count { font-variant-numeric: tabular-nums; }
@keyframes like-bump { 40% { transform: scale(1.35); } }
.byline .post-stats { margin-left: auto; }
.article__like { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 26px 0px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); max-width: 720px; }
.article__like p { flex: 1; min-width: 180px; color: var(--text-muted); font-size: var(--fs-label); }
.article__like strong { display: block; color: var(--text); font-size: var(--fs-body-lg); }
.post-meta .post-stats { margin-left: auto; gap: 10px; }
.post-meta .post-stats__item { font-size: var(--fs-small); color: var(--text-faint); gap: 4px; }
.post-meta .post-stats svg { width: 13px; height: 13px; }
@media (prefers-reduced-motion: reduce) { .like-btn.is-bump svg { animation: none; } }