/* Shared kit for the live Signitic product mock-ups (signature-header.css, campaign-*.css). */
/* A mock-up is drawn on a fixed design grid (--mk-w x --mk-h); --u is one design pixel of the container. */
/* Kit selectors are wrapped in :where() so a mock-up's own CSS always wins, even when a later block links the kit again; img rules keep the img weight to beat the site's img rules. */

:where(.sg-mk) {
  --mk-purple: #773bfa;
  --mk-purple-ink: #7c3bf0;
  --mk-purple-soft: #efe9ff;
  --mk-coral: #fd5b48;
  --mk-coral-soft: #ffe2d4;
  --mk-ink: #1f2127;
  --mk-text: #545454;
  --mk-muted: #a2a2a2;
  --mk-line: #f1f1f4;
  --mk-btn: #fbfbfc;
  --mk-white: #fff;
  --mk-font: var(--_typography---font--primary-family, "Inter Variable Optimized", Arial, sans-serif);
  --mk-loop: 9.6s;
  --mk-delay: 1s;
  --mk-ease: cubic-bezier(.4, 0, .2, 1);
  --mk-ease-out: cubic-bezier(.22, .9, .3, 1);
  --mk-w: 750;
  --mk-h: 900;
  position: relative;
  container-type: inline-size;
  aspect-ratio: var(--mk-w) / var(--mk-h);
  overflow: hidden;
  border-radius: var(--_responsive---border-radius--xsmall, .75rem);
}

/* Wrapper that takes the place of a replaced <img> and keeps its classes (sizing, tab switching). */
:where(.sg-mk-host) {
  display: block;
  width: 100%;
  overflow: hidden;
}

:where(.sg-mk-host > .sg-mk) {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: inherit;
}

:where(.sg-mk__stage) {
  --u: calc(100cqw / var(--mk-w));
  position: absolute;
  inset: 0;
  font-family: var(--mk-font);
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
  line-height: 1;
  color: var(--mk-ink);
}

:where(.sg-mk__stage *) { box-sizing: border-box; }

img:where(.sg-mk__stage img) { display: block; max-width: none; }

/* ---- surfaces ---- */

:where(.sg-mk-card) {
  position: absolute;
  background: var(--mk-white);
  border-radius: calc(22 * var(--u));
}

:where(.sg-mk-bar) {
  position: absolute;
  padding: 0 calc(9 * var(--u));
  border-radius: calc(22 * var(--u));
  background: var(--mk-white);
  display: flex;
  align-items: center;
  gap: calc(17 * var(--u));
}

:where(.sg-mk-btn) {
  width: calc(72 * var(--u));
  height: calc(72 * var(--u));
  border-radius: calc(16 * var(--u));
  border: calc(1 * var(--u)) solid var(--mk-line);
  background: var(--mk-btn);
  color: var(--mk-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

:where(.sg-mk-btn.is-on) {
  background: var(--mk-purple);
  border-color: var(--mk-purple);
  color: var(--mk-white);
}

:where(.sg-mk-btn svg) {
  display: block;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
}

:where(.sg-mk-pill) {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  line-height: 1;
}

/* ---- avatars: <span class="sg-mk-avatars"><img class="sg-mk-avatar">…<span class="sg-mk-avatar sg-mk-avatar--more">+5</span></span> ---- */

:where(.sg-mk-avatars) {
  --mk-av: calc(52 * var(--u));
  display: flex;
  align-items: center;
}

:where(.sg-mk-avatar), img:where(.sg-mk-avatar) {
  flex: none;
  width: var(--mk-av);
  height: var(--mk-av);
  margin-left: calc(var(--mk-av) * -.3);
  border-radius: 50%;
  border: calc(2 * var(--u)) solid var(--mk-white);
  object-fit: cover;
  background: var(--mk-purple-soft);
}

img:where(.sg-mk-avatar:first-child), :where(.sg-mk-avatar:first-child) { margin-left: 0; }

:where(.sg-mk-avatar--more) {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mk-purple);
  font-weight: 600;
  font-size: calc(var(--mk-av) * .36);
  white-space: nowrap;
}

/* ---- cursor + label: .sg-mk-cursor > .sg-mk-cursor__in > svg.sg-mk-cursor__arrow + .sg-mk-cursor__pill ---- */

:where(.sg-mk-cursor) {
  --mk-cursor: var(--mk-coral);
  position: absolute;
}

.sg-mk-cursor--purple { --mk-cursor: var(--mk-purple); }

:where(.sg-mk-cursor__in) {
  position: relative;
  transform-origin: calc(10 * var(--u)) calc(6 * var(--u));
  animation: sg-mk-in-pop .5s var(--mk-ease-out) .5s both;
}

:where(.sg-mk-cursor__arrow) {
  display: block;
  width: calc(72 * var(--u));
  height: calc(84 * var(--u));
  transform-origin: calc(10 * var(--u)) calc(6 * var(--u));
  fill: var(--mk-cursor);
}

:where(.sg-mk-cursor__pill) {
  position: absolute;
  left: calc(36 * var(--u));
  top: calc(62 * var(--u));
  height: calc(44 * var(--u));
  padding: 0 calc(14 * var(--u));
  border: calc(2.5 * var(--u)) solid var(--mk-white);
  border-radius: calc(12 * var(--u));
  background: var(--mk-cursor);
  color: var(--mk-white);
  font-size: calc(18 * var(--u));
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

/* ---- typing reveal: pair with an illustration keyframe that animates clip-path to inset(0) ---- */

:where(.sg-mk-type) {
  clip-path: inset(0 100% 0 0);
}

/* ---- timing helpers ---- */

:where(.sg-mk-loop) {
  animation-duration: var(--mk-loop);
  animation-timing-function: var(--mk-ease);
  animation-delay: var(--mk-delay);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

:where(.sg-mk-in-up) { animation: sg-mk-in-up .7s var(--mk-ease-out) var(--mk-in-delay, 0s) both; }
:where(.sg-mk-in-slide) { animation: sg-mk-in-slide .75s var(--mk-ease-out) var(--mk-in-delay, 0s) both; }
:where(.sg-mk-in-pop) { animation: sg-mk-in-pop .5s var(--mk-ease-out) var(--mk-in-delay, 0s) both; }

@keyframes sg-mk-in-up {
  from { opacity: 0; transform: translate3d(0, calc(20 * var(--u)), 0); }
  to { opacity: 1; transform: none; }
}

@keyframes sg-mk-in-slide {
  from { opacity: 0; transform: translate3d(calc(26 * var(--u)), calc(14 * var(--u)), 0); }
  to { opacity: 1; transform: none; }
}

@keyframes sg-mk-in-pop {
  from { opacity: 0; transform: scale(.55); }
  to { opacity: 1; transform: none; }
}

@keyframes sg-mk-press {
  0%, 30% { transform: scale(1); }
  50% { transform: scale(.86); }
  70%, 100% { transform: scale(1); }
}

/* ---- off-screen (mockup-kit.js) and reduced motion ---- */

.sg-mk.is-mk-paused .sg-mk__stage * { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .sg-mk__stage * { animation: none !important; }
}