/*
 * Upsell Machine mockup, scoped styles.
 * Source: design-source/Marketing Mockups/Upsell Machine v2.dc.html (<helmet>).
 * Every selector is scoped under .mk-upsell-machine (the mockup can embed more
 * than once per page); keyframes carry the mkum- prefix to avoid cross-mockup
 * collisions. Entrance animations (riseIn/popIn) are gated by the .play class,
 * added per instance by assets/js/mockups/upsell-machine.js. Durations and
 * stagger delays live inline on the elements; the satellite drift loops run
 * ungated straight from inline styles.
 */

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

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

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

/* Entrance animations: hidden until the JS adds .play to the instance root.
   Defaults match the source (riseIn .7s, popIn .45s); elements that deviate
   (frame .8s rise, brief stream lines .4s pop) override duration inline,
   and every animated element carries its stagger delay inline. */
.mk-upsell-machine .mkum-rise,
.mk-upsell-machine .mkum-pop{ opacity:0; }
.mk-upsell-machine.play .mkum-rise{ opacity:1; animation-name:mkum-riseIn; animation-duration:.7s; animation-timing-function:cubic-bezier(.22,.61,.21,1); animation-fill-mode:backwards; }
.mk-upsell-machine.play .mkum-pop{ opacity:1; animation-name:mkum-popIn; animation-duration:.45s; animation-timing-function:cubic-bezier(.22,.61,.21,1); animation-fill-mode:backwards; }

@media (prefers-reduced-motion: reduce){
  .mk-upsell-machine *{ animation:none !important; transition:none !important; }
  .mk-upsell-machine .mkum-rise,
  .mk-upsell-machine .mkum-pop{ opacity:1 !important; }
}