/*
 * Mockup: Dashboard illustration (scoped).
 * Converted from design-source/Marketing Mockups/Dashboard Illustration.dc.html.
 *
 * Everything is scoped under .mk-dashboard-illustration (the mockup can embed
 * more than once per page); keyframes carry the mkdi- prefix to avoid
 * cross-mockup collisions. Entrance animations are gated by a .play class the
 * scoped JS adds to each root on intersection; satellite drift loops run
 * ungated via inline animation declarations referencing mkdi-drift.
 */

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

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

/* Hover zones + tooltip chips (from the source helmet). */
.mk-dashboard-illustration [data-zone]{ transition:box-shadow .25s ease; }
.mk-dashboard-illustration [data-zone]:hover{ box-shadow:inset 0 0 0 2px rgba(109,93,243,0.32); }
.mk-dashboard-illustration [data-chip]{ opacity:0; transform:translateY(5px); transition:opacity .22s ease, transform .22s ease; pointer-events:none; }
.mk-dashboard-illustration [data-zone]:hover [data-chip]{ opacity:1; transform:translateY(0); }
.mk-dashboard-illustration [data-mention]{ position:relative; }
.mk-dashboard-illustration [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-dashboard-illustration [data-mention]:hover [data-tip]{ opacity:1; transform:translate(-50%, 0); }

/* Site/folder card lift (from the source style-hover). */
.mk-dashboard-illustration .mkdi-card:hover{ transform:translateY(-4px); box-shadow:0 16px 30px -10px rgba(22,4,46,0.14), 0 0 0 2px rgba(109,93,243,0.22); }

/* Entrance animations, gated by .play (added per instance by the scoped JS).
   Hidden state lives on the not-yet-playing root; once .play lands, the
   backwards fill covers each element's inline animation-delay, then the
   element returns to its natural styles (matching the source's `backwards`). */
.mk-dashboard-illustration:not(.play) .mkdi-rise,
.mk-dashboard-illustration:not(.play) .mkdi-rise-slow,
.mk-dashboard-illustration:not(.play) .mkdi-rise-card,
.mk-dashboard-illustration:not(.play) .mkdi-pop,
.mk-dashboard-illustration:not(.play) .mkdi-pop-fast,
.mk-dashboard-illustration:not(.play) .mkdi-popb{ opacity:0; }

.mk-dashboard-illustration.play .mkdi-rise{ animation:mkdi-riseIn .7s cubic-bezier(.22,.61,.21,1) backwards; }
.mk-dashboard-illustration.play .mkdi-rise-slow{ animation:mkdi-riseIn .8s cubic-bezier(.22,.61,.21,1) backwards; }
.mk-dashboard-illustration.play .mkdi-rise-card{ animation:mkdi-riseIn .6s cubic-bezier(.22,.61,.21,1) backwards; }
.mk-dashboard-illustration.play .mkdi-pop{ animation:mkdi-popIn .45s cubic-bezier(.22,.61,.21,1) backwards; }
.mk-dashboard-illustration.play .mkdi-pop-fast{ animation:mkdi-popIn .4s cubic-bezier(.22,.61,.21,1) backwards; }
.mk-dashboard-illustration.play .mkdi-popb{ animation:mkdi-popIn .45s cubic-bezier(.34,1.45,.45,1) backwards; }

@media (prefers-reduced-motion: reduce){
  .mk-dashboard-illustration *{ animation:none !important; transition:none !important; }
  .mk-dashboard-illustration .mkdi-rise,
  .mk-dashboard-illustration .mkdi-rise-slow,
  .mk-dashboard-illustration .mkdi-rise-card,
  .mk-dashboard-illustration .mkdi-pop,
  .mk-dashboard-illustration .mkdi-pop-fast,
  .mk-dashboard-illustration .mkdi-popb{ opacity:1 !important; }
}