/* Owned by the opening animation lane: agent cursor swarm intro. */
/* The inline head script sets html.vasa-intro before first paint, so the ground is all that shows until the agents
   build the hero. assets/intro.js marks each built layer with data-intro-on (a hard cut) and removes the class at the
   handoff. visibility, not opacity, clip or transforms, so no layer is grouped and every difference blend keeps working;
   !important beats the inline visibility the motion code writes. Without the class none of this applies. */
html.vasa-intro #hero :is(.wordmark, .circular-logo, .statement-line, .statement-effects, .grid-cell, .intro, .partnership, .menu-link, .collaborate, .viewing, .art-slot, #hero-overlay, #coordinates):not([data-intro-on]),
html.vasa-intro #hero :is(.wordmark, .circular-logo, .statement-line, .statement-effects, .grid-cell, .intro, .partnership, .menu-link, .collaborate, .viewing, .art-slot, #hero-overlay, #coordinates):not([data-intro-on]) * {
  visibility: hidden !important;
}
html.vasa-intro .viewing:not([data-intro-on]),
html.vasa-intro .viewing:not([data-intro-on]) * { visibility: hidden !important; }
/* The statement's solid cell fills in when the type agent selects it, not with the grid. */
html.vasa-intro #grid > .grid-cell.solid:not([data-intro-fill]) { background: transparent !important; }

/* Agents, selections, tags and guides: one canvas above every hero layer, below the cookie window (9000) and DialKit. */
.vasa-intro-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 8500;
  pointer-events: none;
}