/*
 * Boards Illustration mockup, scoped styles.
 * Source: design round 7, "Marketing Mockups/Boards Illustration.dc.html" (<helmet>).
 *
 * Every selector is scoped under .mk-boards (a mockup may embed more than once
 * per page); keyframes carry the mkbd- prefix to avoid cross-mockup collisions,
 * and the per-element inline `animation:` shorthands in the template reference
 * those prefixed names.
 *
 * Like on-page-feedback and workflows, this is an ungated (CSS-only) mockup:
 * the entrance choreography runs on load straight from the inline shorthands,
 * and the base styles never set opacity:0, so the whole board is visible with
 * JS off and under reduced motion (where animation is cancelled). The sequence
 * reads: board rises -> columns and cards pop in -> the Aura card drags into
 * Feedback Round 1 -> the undo toast -> the task drawer slides in over a dim.
 */

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

@keyframes mkbd-riseIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes mkbd-popIn{ from{ opacity:0; transform:translateY(8px) scale(0.96); } to{ opacity:1; transform:none; } }
@keyframes mkbd-dragIn{ 0%{ opacity:0; transform:translate(-330px,-30px) rotate(-2deg); box-shadow:0 24px 40px -16px rgba(22,4,46,0.35); } 50%{ opacity:1; transform:translate(-60px,-6px) rotate(-1.5deg); box-shadow:0 24px 40px -16px rgba(22,4,46,0.35); } 100%{ opacity:1; transform:none; box-shadow:none; } }
@keyframes mkbd-drawerIn{ from{ transform:translateX(105%); } to{ transform:none; } }
@keyframes mkbd-dimIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes mkbd-barGrow{ from{ width:0; } }

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

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