/*
 * On-Page Feedback mockup, scoped styles.
 * Source: design-source/Marketing Mockups/On-Page Feedback.dc.html (<helmet>).
 * Every selector is scoped under .mk-onpage (the mockup can embed more than
 * once per page); keyframes carry the mkop- prefix to avoid cross-mockup
 * collisions, and the per-element inline `animation:` shorthands in the
 * template reference those prefixed names.
 *
 * Unlike the gated mockups (upsell-machine, dashboard-illustration), entrance
 * animations here run on load straight from the inline shorthands, exactly as
 * the source does: the base styles never set opacity:0, so the content is fully
 * visible without JS and under reduced motion (where animation is cancelled).
 * The live cursors and floating satellites loop ungated.
 */

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

@keyframes mkop-riseIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes mkop-popIn{ from{ opacity:0; transform:translateY(8px) scale(0.92); } to{ opacity:1; transform:none; } }
@keyframes mkop-drift{ 0%,100%{ transform:translateY(-9px) rotate(-0.5deg); } 50%{ transform:translateY(10px) rotate(0.5deg); } }
@keyframes mkop-cursorA{ 0%,100%{ transform:translate(180px,430px); } 30%{ transform:translate(330px,250px); } 55%{ transform:translate(250px,540px); } 80%{ transform:translate(95px,480px); } }
@keyframes mkop-cursorB{ 0%,100%{ transform:translate(640px,75px); } 28%{ transform:translate(835px,150px); } 55%{ transform:translate(720px,55px); } 78%{ transform:translate(560px,110px); } }
@keyframes mkop-cursorC{ 0%,100%{ transform:translate(470px,565px); } 30%{ transform:translate(660px,610px); } 58%{ transform:translate(540px,500px); } 82%{ transform:translate(380px,610px); } }
@keyframes mkop-cursorD{ 0%,100%{ transform:translate(150px,120px); } 26%{ transform:translate(360px,170px); } 52%{ transform:translate(300px,80px); } 76%{ transform:translate(120px,200px); } }

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

/* Pin tooltips */
.mk-onpage [data-mention]{ position:absolute; }
.mk-onpage [data-mention] [data-tip]{ position:absolute; left:50%; bottom:calc(100% + 7px); transform:translate(-50%, 4px); opacity:0; transition:opacity .18s ease, transform .18s ease; pointer-events:none; white-space:nowrap; z-index:30; }
.mk-onpage [data-mention]:hover [data-tip]{ opacity:1; transform:translate(-50%, 0); }

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