/* Miguelito enterprise service diagrams — site token colours */
.mh-scene {
  width: 100%;
  height: auto;
  display: block;
  min-height: 280px;
  overflow: hidden;
  max-width: 100%;
}
.mh-scene .mh-grid {
  stroke: rgba(255,255,255,.04);
  stroke-width: 1;
}
.mh-scene .mh-panel {
  fill: rgba(18,18,26,.88);
  stroke: rgba(255,255,255,.12);
  stroke-width: 1.2;
}
.mh-scene .mh-panel--blue { stroke: rgba(91,140,255,.55); }
.mh-scene .mh-panel--violet { stroke: rgba(168,85,247,.55); }
.mh-scene .mh-core-fill {
  fill: rgba(12,12,18,.92);
  stroke: url(#mhCoreGrad);
  stroke-width: 2;
}
.mh-scene .mh-core-ring {
  fill: none;
  stroke: rgba(91,140,255,.35);
  stroke-width: 1;
}
.mh-scene .mh-title {
  fill: #fff;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.mh-scene .mh-sub {
  fill: var(--mi-muted, #a1a1aa);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 9px;
}
.mh-scene .mh-mono {
  fill: var(--mi-blue, #5b8cff);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mh-scene .mh-bullet {
  fill: var(--mi-muted, #a1a1aa);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 8.5px;
}
.mh-scene .mh-icon { fill: none; stroke: #c4d4ff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mh-scene .mh-icon--violet { stroke: #e9d5ff; }
.mh-scene .mh-path {
  fill: none;
  stroke: rgba(91,140,255,.4);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mh-scene .mh-path--violet { stroke: rgba(168,85,247,.45); }
.mh-scene .mh-path-glow {
  fill: none;
  stroke: rgba(91,140,255,.18);
  stroke-width: 4;
  stroke-linecap: round;
}
.mh-scene .mh-packet {
  fill: #fff;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(91,140,255,.9));
}
.mh-scene .mh-packet--violet {
  filter: drop-shadow(0 0 4px rgba(168,85,247,.9));
}
.mh-scene .mh-foot {
  fill: rgba(18,18,26,.85);
  stroke: rgba(255,255,255,.1);
}
.mh-scene .mh-hit { fill: transparent; cursor: pointer; }
.mh-scene .mh-node.is-hot .mh-panel { stroke: rgba(255,255,255,.45); }
.mh-scene .mh-node.is-lit .mh-panel { stroke: rgba(91,140,255,.85); }
.mh-scene .mh-node.is-lit .mh-panel--violet { stroke: rgba(168,85,247,.9); }

/* Assembly */
.mh-scene .mh-assemble {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
.mh-scene.is-ready .mh-assemble { opacity: 1; transform: none; }
.mh-scene.is-ready .mh-d1 { transition-delay: .05s; }
.mh-scene.is-ready .mh-d2 { transition-delay: .12s; }
.mh-scene.is-ready .mh-d3 { transition-delay: .19s; }
.mh-scene.is-ready .mh-d4 { transition-delay: .26s; }
.mh-scene.is-ready .mh-d5 { transition-delay: .33s; }
.mh-scene.is-ready .mh-d6 { transition-delay: .4s; }
.mh-scene.is-ready .mh-d7 { transition-delay: .47s; }
.mh-scene.is-ready .mh-d8 { transition-delay: .54s; }

.mh-scene .mh-draw {
  stroke-dasharray: 6 9;
  stroke-dashoffset: 80;
  opacity: .45;
}
.mh-scene.is-playing .mh-draw {
  animation: mh-flow 2.6s linear infinite;
  opacity: 1;
}
.mh-scene .mh-pulse-ring {
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
}
.mh-scene.is-playing .mh-pulse-ring {
  animation: mh-pulse 2.8s ease-out infinite;
}
.mh-scene.is-playing .mh-core-breathe {
  animation: mh-breathe 3.2s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes mh-flow { to { stroke-dashoffset: 0; } }
@keyframes mh-pulse {
  0% { opacity: .55; transform: scale(.92); }
  100% { opacity: 0; transform: scale(1.35); }
}
@keyframes mh-breathe {
  0%, 100% { opacity: .85; }
  50% { opacity: 1; }
}

.sd-hero__art[data-mh-art] {
  background:
    radial-gradient(circle at 72% 28%, rgba(91,140,255,.16), transparent 45%),
    radial-gradient(circle at 22% 78%, rgba(168,85,247,.12), transparent 42%),
    rgba(255,255,255,.02);
}
.sd-hero__art-tools {
  position: absolute; right: .7rem; bottom: .7rem; z-index: 4;
}
.sd-hero__art-tools button {
  border: 1px solid var(--mi-line);
  background: rgba(12,12,18,.88);
  color: var(--mi-muted);
  border-radius: 999px;
  padding: .35rem .75rem;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.sd-hero__art-tools button:hover,
.sd-hero__art-tools button:focus-visible {
  color: #fff;
  border-color: rgba(255,255,255,.3);
  outline: none;
}

@media (max-width: 720px) {
  .mh-scene .mh-bullet { display: none; }
  .mh-scene .mh-sub { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .mh-scene .mh-assemble { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mh-scene.is-playing .mh-draw,
  .mh-scene.is-playing .mh-pulse-ring,
  .mh-scene.is-playing .mh-core-breathe { animation: none !important; }
  .mh-scene .mh-draw { stroke-dashoffset: 0; opacity: 1; }
  .mh-scene .mh-packet { opacity: .75 !important; }
}