/* Mr. NB above the Tawk.to bubble (60px at 20px from the corner).
   Not clickable: the wrapper ignores the pointer, only the body takes hover. */

.nb-owl {
  --owl-w: 7.6rem;
  position: fixed;
  right: 18px;
  bottom: 92px;
  z-index: 999;
  width: max(var(--owl-w), 64px);
  aspect-ratio: 1194 / 1600;
  pointer-events: none;
  user-select: none;
  transition: opacity .45s var(--ease, ease), transform .6s var(--ease-out, ease-out), visibility 0s;
}

.nb-owl.is-tucked {
  opacity: 0;
  visibility: hidden;
  transform: translateY(2.4rem) scale(.9);
  transition: opacity .3s ease, transform .4s ease, visibility 0s linear .4s;
}

.nb-owl::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -.3rem;
  height: 1.2rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(217 179 120 / .5), transparent);
  filter: blur(.2rem);
}

.nb-owl-body {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  cursor: default;
  transform-origin: 50% 100%;
  animation: nb-owl-bob 5s ease-in-out infinite;
}
.nb-owl-body img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 .8rem 1.4rem rgb(0 0 0 / .4));
  -webkit-user-drag: none;
}

@keyframes nb-owl-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -.5rem; }
}

/* A happy hop when the cursor visits. */
.nb-owl.is-hop .nb-owl-body { animation: nb-owl-hop .7s var(--ease-out, ease-out); }
@keyframes nb-owl-hop {
  0%   { translate: 0 0; scale: 1; }
  30%  { translate: 0 -1.2rem; scale: 1.04 .97; }
  60%  { translate: 0 0; scale: .97 1.03; }
  100% { translate: 0 0; scale: 1; }
}

@media (max-width: 767px) {
  .nb-owl { --owl-w: 54px; right: 20px; bottom: 88px; width: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  .nb-owl, .nb-owl-body { transition: opacity .2s; animation: none !important; }
}