/* Mika Motion — styles for the five primitives only */

.mm-build {
  --mm-build-o: 0;
}

.mm-build .mika-hud-bar,
.mm-build .hv2-section-head,
.mm-build .hv2-kicker {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.mm-build.mm-build-corners::before,
.mm-build.mm-build-corners::after,
.mm-build.mm-build-corners .mika-hud-corners::before,
.mm-build.mm-build-corners .mika-hud-corners::after {
  border-color: var(--mika-cyan);
  opacity: 1;
}

.mm-build.mm-build-edges {
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.18);
}

.mm-build.mm-build-title .mika-hud-bar,
.mm-build.mm-build-title .hv2-section-head,
.mm-build.mm-build-title .hv2-kicker,
.mm-build.mm-build-title .hv2-h2,
.mm-build.mm-build-title .hv2-h3 {
  opacity: 1;
  transform: none;
}

.mm-build.mm-build-content > *:not(.mika-hud-bar):not(.mika-hud-scan):not(.mika-hud-corners),
.mm-build.mm-build-content .hv2-lede,
.mm-build.mm-build-content .hv2-panel,
.mm-build.mm-build-done {
  opacity: 1;
}

.mm-build:not(.mm-build-content):not(.mm-final) > .hv2-lede,
.mm-build:not(.mm-build-content):not(.mm-final) > .hv2-fw-map,
.mm-build:not(.mm-build-content):not(.mm-final) > .hv2-audit-stats,
.mm-build:not(.mm-build-content):not(.mm-final) > .hv2-hg-grid,
.mm-build:not(.mm-build-content):not(.mm-final) > .hv2-bp-flow,
.mm-build:not(.mm-build-content):not(.mm-final) > .hv2-coverage,
.mm-build:not(.mm-build-content):not(.mm-final) > .mika-opp-map,
.mm-build:not(.mm-build-content):not(.mm-final) > .hv2-geo-grid,
.mm-build:not(.mm-build-content):not(.mm-final) > .hv2-q-layout,
.mm-build:not(.mm-build-content):not(.mm-final) > .hv2-entity-grid,
.mm-build:not(.mm-build-content):not(.mm-final) > .hv2-lang-cols,
.mm-build:not(.mm-build-content):not(.mm-final) > .hv2-faq-list,
.mm-build:not(.mm-build-content):not(.mm-final) > .hv2-opps {
  opacity: 0.15;
  transition: opacity 0.4s ease;
}

.mm-build.mm-build-content > .hv2-lede,
.mm-build.mm-build-content > .hv2-fw-map,
.mm-build.mm-build-content > .hv2-audit-stats,
.mm-build.mm-build-content > .hv2-hg-grid,
.mm-build.mm-build-content > .hv2-bp-flow,
.mm-build.mm-build-content > .hv2-coverage,
.mm-build.mm-build-content > .mika-opp-map,
.mm-build.mm-build-content > .hv2-geo-grid,
.mm-build.mm-build-content > .hv2-q-layout,
.mm-build.mm-build-content > .hv2-entity-grid,
.mm-build.mm-build-content > .hv2-lang-cols,
.mm-build.mm-build-content > .hv2-faq-list,
.mm-build.mm-build-content > .hv2-opps,
.mm-build.mm-final > * {
  opacity: 1;
}

/* scan */
.mm-scanning {
  position: relative;
}

.mm-scanning::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--mm-scan-progress, 0) * 100%);
  height: 1px;
  background: var(--mika-cyan);
  opacity: 0.55;
  pointer-events: none;
  z-index: 4;
}

[data-scan-ring] {
  --mm-scan: 0;
  background: conic-gradient(
    var(--mika-green) calc(var(--mm-scan) * 1%),
    var(--mika-border) 0
  );
}

/* flow */
.mm-quiet .mm-flow-path {
  opacity: 0.2;
}

.mm-flow-path {
  transition: stroke-dashoffset 0.9s ease, opacity 0.4s ease;
}

.mm-flow-path.mm-drawn {
  opacity: 1;
}

.mm-node {
  opacity: 0.25;
  transition: opacity 0.35s ease;
}

.mm-node.mm-on {
  opacity: 1;
}

/* signal */
[data-signal],
[data-node],
[data-question],
.mm-signal-node {
  opacity: 0.35;
  filter: grayscale(0.4);
  transition: opacity 0.3s ease, color 0.3s ease, border-color 0.3s ease, filter 0.3s ease;
}

.mm-signal-on,
.mm-on[data-node],
.mm-on[data-question],
.mm-on[data-signal] {
  opacity: 1;
  filter: none;
}

.mm-captured.is-seo {
  border-color: var(--mika-blue) !important;
  color: var(--mika-blue);
}

.mm-captured.is-geo {
  border-color: var(--mika-violet) !important;
  color: var(--mika-violet);
}

/* expand */
.mm-expand-host .mm-expand-node,
.mm-expand-host [data-expand],
.mm-expand-host .hv2-opp {
  opacity: 0;
  transform: scale(0.86);
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.mm-expand-host .mm-expanded,
.mm-expand-host .mm-on {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .mm-build .mika-hud-bar,
  .mm-build .hv2-section-head,
  .mm-build .hv2-kicker,
  .mm-build:not(.mm-build-content) > *,
  .mm-node,
  [data-signal],
  [data-node],
  [data-question],
  .mm-expand-host .mm-expand-node,
  .mm-expand-host [data-expand],
  .mm-expand-host .hv2-opp {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  .mm-scanning::after {
    display: none;
  }

  .mm-flow-path {
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
  }
}