/*
 * MCP Illustration mockup, scoped styles.
 * Source: design round 7, "Marketing Mockups/MCP Illustration.dc.html" (<helmet>),
 * reworked alongside the MCP page on 18 Sep 2026.
 *
 * Every selector is scoped under .mk-mcp (a mockup may embed more than once per
 * page); keyframes carry the mkmc- prefix to avoid cross-mockup collisions, and
 * the per-element inline `animation:` shorthands in the template reference
 * those prefixed names.
 *
 * Ungated (CSS-only), like on-page-feedback and boards-illustration: the
 * entrance choreography runs on load from the inline shorthands and the base
 * styles never set opacity:0, so the whole illustration is visible with JS off
 * and under reduced motion. The five satellites drift on an infinite loop.
 */

.mk-mcp,
.mk-mcp *{ box-sizing:border-box; }
.mk-mcp{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.mk-mcp [style*="border-radius"]{ corner-shape: squircle; }

@keyframes mkmc-riseIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes mkmc-popIn{ from{ opacity:0; transform:translateY(8px) scale(0.92); } to{ opacity:1; transform:none; } }
@keyframes mkmc-drift{ 0%,100%{ transform:translateY(-9px) rotate(-0.5deg); } 50%{ transform:translateY(10px) rotate(0.5deg); } }

/* Zone hover: lift a region of the editor and reveal its explainer chip. */
.mk-mcp [data-zone]{ transition:box-shadow .25s ease; }
.mk-mcp [data-zone]:hover{ box-shadow:inset 0 0 0 2px rgba(109,93,243,0.32); }
.mk-mcp [data-chip]{ opacity:0; transform:translateY(5px); transition:opacity .22s ease, transform .22s ease; pointer-events:none; }
.mk-mcp [data-zone]:hover [data-chip]{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  .mk-mcp *{ animation:none !important; transition:none !important; }
}