/**
 * ProductImageTooltip - product name tooltip on the product image.
 *
 * The tooltip lives on the body, not inside the image, so it is positioned
 * against the viewport: `fixed`, with tooltip.js writing the inline
 * `translate` on every frame of the cursor's movement.
 *
 * Position therefore stays out of the transition and only the entrance is
 * animated, through the standalone `scale` property. A single `transform`
 * holding both would mean the two overwrite each other, and transitioning the
 * position would leave the tooltip trailing behind the cursor.
 */

.brandy-product-name-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  /* Above sticky headers and the like: the tooltip is transient and follows
     the cursor, so nothing should ever cover it. */
  z-index: 999999;
  width: max-content;
  max-width: min(320px, 80vw);
  padding: 0.5rem 0.85rem;
  border-radius: 0.3rem;
  background: #1d1e20;
  box-shadow: 0 4px 20px #00000026;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  /* The cursor must never sit on the tooltip: it would land between the
     pointer and the image and cut the hover off. */
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  scale: 0.92;
  /* Visibility flips only once the fade has finished, so the tooltip fades
     out instead of vanishing the moment the cursor leaves. */
  transition:
    opacity 0.18s ease,
    scale 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s linear 0.18s;
}

.brandy-product-name-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  scale: 1;
  transition:
    opacity 0.18s ease,
    scale 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s;
}

@media (prefers-reduced-motion: reduce) {

  .brandy-product-name-tooltip,
  .brandy-product-name-tooltip.is-visible {
    scale: 1;
    transition: opacity 0.01ms;
  }
}