/* ============================================================
   GO2, the resident quadruped                    (easter egg)
   Type "go2" anywhere on the page to summon it.

   The overlay is created and destroyed entirely in JS
   (js/features/go2.js). These rules only place it, blend it and
   fade it: everything inside is drawn on the canvas.
   ============================================================ */

/* Fixed, full-viewport, never interactive. z-index 45 puts it above the
   .rail elements (40) and below the fixed site chrome (50/51), so the
   nav pill, brand and motion toggle always stay on top of the robot.

   White strokes + mix-blend-mode: difference is the same trick the
   .rail elements use: the drawing inverts itself against whatever it
   is over, so it reads as var(--bone) on the dark hero / platforms /
   contact and as var(--ink) on the paper path / work sections, with no
   scroll listener and no colour switching. */
.ks-go2-canvas {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 45;
  pointer-events: none;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ks-go2-canvas.ks-go2-is-in { opacity: 1; }

/* The arrival fade is the only CSS motion here; drop it when motion is
   off. The canvas still appears, it just cuts in, and the JS paints a
   static annotated blueprint instead of animating. */
@media (prefers-reduced-motion: reduce) {
  .ks-go2-canvas { transition: none; }
}
html.no-motion .ks-go2-canvas { transition: none; }

/* Text equivalent for the aria-hidden canvas: an off-screen live region
   the JS writes to when the robot arrives or leaves. */
.ks-go2-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* An easter egg has no business on paper. */
@media print {
  .ks-go2-canvas,
  .ks-go2-sr { display: none !important; }
}