/*
 * Workflows mockup, scoped styles.
 * Source: design-source/Marketing Mockups/Workflows.dc.html (<helmet>).
 * Every selector is scoped under .mk-workflows (the mockup can embed more than
 * once per page); keyframes carry the mkwf- 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 unlike the gated mockups), entrance animations run
 * on load straight from the inline shorthands: the base styles never set
 * opacity:0, so the content is fully visible without JS and under reduced
 * motion (where animation is cancelled). The satellite drift loops ungated.
 */

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

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

/* Zone hover (lift panels) + chip tooltips */
.mk-workflows [data-zone]{ transition:box-shadow .25s ease; }
.mk-workflows [data-zone]:hover{ box-shadow:inset 0 0 0 2px rgba(109,93,243,0.32); }
.mk-workflows [data-chip]{ opacity:0; transform:translateY(5px); transition:opacity .22s ease, transform .22s ease; pointer-events:none; }
.mk-workflows [data-zone]:hover [data-chip]{ opacity:1; transform:translateY(0); }

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