/* Nurro on the tutorial callout. Pair with tutorial-callout.css and
   tutorial-callout.js. The default sprite is the small EyeWire II tutorial
   Nurro; a step can name its own with data-holotip-guide (see TUTORIAL.md for
   the small script change that reads it) or by setting --holotip-guide on the
   card. The set in media/nurro/ has transparent backgrounds. */
/* ---- Nurro on the tutorial callout ------------------------------------------
   The callout is scifi-ui's holotip, the EyeWire II tutorial step. Nurro, the
   EyeWire II guide, perches on its top left corner. The bob is ambient and
   small, so it is allowed to loop; motion off stops it. */
/* Nurro sits inside the card's top edge, so a card pinned to the top of a phone
   screen does not lose him above the viewport */
.holotip { padding-top: 112px; }
.holotip::before {
  content: ""; position: absolute; left: 18px; top: 12px; width: 150px; height: 88px;
  background: var(--holotip-guide, url("../media/nurro.png")) left center / contain no-repeat;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55));
  animation: nurro-bob 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes nurro-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .holotip::before { animation: none; } }
.holotip { z-index: 60; }