/* Watermelon-inspired animated tooltip.
   Vanilla, no deps. Triggered via [data-tooltip] / .has-tooltip,
   positioned by js/tooltip.js. */

.mm-tooltip {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
  padding: 0.45rem 0.7rem;
  background: var(--text-main);
  color: var(--bg-main);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.35;
  letter-spacing: 0.04em;
  max-width: 240px;
  white-space: normal;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  opacity: 0;
  transform: translate(-50%, calc(-100% - 14px)) scale(0.9);
  transform-origin: bottom center;
  transition:
    opacity 180ms ease,
    transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mm-tooltip.is-visible {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 10px)) scale(1);
}

.mm-tooltip.is-below {
  transform-origin: top center;
  transform: translate(-50%, 14px) scale(0.9);
}
.mm-tooltip.is-below.is-visible {
  transform: translate(-50%, 10px) scale(1);
}

.mm-tooltip::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 8px;
  height: 8px;
  background: var(--text-main);
  transform: translateX(-50%) rotate(45deg);
}
.mm-tooltip.is-below::after {
  top: -5px;
  bottom: auto;
}

/* No cursor override — let the host element keep its own cursor
   (pointer for links, default for spans, etc.) */

@media (prefers-reduced-motion: reduce) {
  .mm-tooltip { transition: opacity 120ms linear; }
  .mm-tooltip.is-visible,
  .mm-tooltip.is-below.is-visible { transform: translate(-50%, calc(-100% - 10px)); }
  .mm-tooltip.is-below.is-visible { transform: translate(-50%, 10px); }
}