/* --------------------------------------------------------------------------
   Neuron Murmuration
   A vertical flex container. Behind its content, a flock of Cool Gray neuron
   icons follows the mouse like a starling murmuration.
   -------------------------------------------------------------------------- */

/* Webflow sets display: contents on the component's host inline, so layout
   lives on .mu rather than :host. */
:host {
  display: block;
}

.mu {
  position: relative;
  /* Own stacking context, so the canvas can sit behind the content (z-index
     -1) without dropping behind the page itself. */
  isolation: isolate;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  align-self: stretch;
}

/* Covers the whole box, edge to edge. */
.mu-layer {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.mu-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Mobile: the canvas is only as tall as the screen and sticks to the top of
   it. Before the section reaches the top of the screen the flock sits at the
   top of the section; while you scroll through the section it stays on
   screen; at the end it scrolls away with the section. Sticky is handled by
   the browser's own scrolling, so it stays smooth during momentum scrolling.
   svh (the viewport with the browser bars showing) keeps the flock clear of
   the address bar; vh is the fallback for older browsers. */
@media (max-width: 767px) {
  .mu-canvas {
    position: sticky;
    top: 0;
    height: min(100vh, 100%);
    height: min(100svh, 100%);
  }
}

/* Webflow delivers Slot content inside one unclassed <div slot="…">. Made
   transparent, each child you add is its own flex item rather than all of
   them sharing one.

   Scoped to the root, so it stays aimed at this one slot: an unscoped
   ::slotted matches the assigned node of every slot in the shadow root. */
.mu > ::slotted(div:not([class])),
.mu > ::slotted(div[class=""]) {
  display: contents;
}