/* ============================= */
/* Tooltip bubble – Glass (EXACT) */
/* ============================= */

.cursor-tip {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 9999;

  padding: 3px 20px;
  border-radius: 50px; /* EXACT match */
  color: #111;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  border: .5px solid #E0E0E0;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.60),
    rgba(255,255,255,0.60)
  );
  
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);

  

  opacity: 0;
  visibility: hidden;
  transform: translate3d(-9999px, -9999px, 0) scale(0.96);
  filter: blur(2px);
  will-change: transform, opacity, filter;

  transition:
    opacity .45s ease,
    filter .45s ease,
    transform .55s cubic-bezier(.2,.8,.2,1),
    visibility 0s linear .45s;
}

/* Disable ONLY movement transition (first show) */
.cursor-tip.no-move {
  transition:
    opacity .45s ease,
    filter .45s ease,
    transform 0s linear,
    visibility 0s linear .45s;
}

.cursor-tip.visible {
  opacity: 1;
  filter: blur(0);
  visibility: visible;
  transition-delay: 0s;
}

.cursor-tip.exiting {
  opacity: 0;
  filter: blur(3px);
}

/* Progressive blur halo */
.cursor-tip::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 30%,
      rgba(255,255,255,0.35),
      rgba(255,255,255,0.15) 40%,
      rgba(255,255,255,0.05) 70%,
      transparent 100%);
  filter: blur(12px);
  opacity: .7;
  z-index: -1;
}

/* Subtle glass grain */
.cursor-tip::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.08;
  background-image:
    repeating-radial-gradient(circle at 0 0, #000 0, transparent 1px),
    repeating-radial-gradient(circle at 100% 100%, #000 0, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
}

/* ============================= */
/* Text + Letter Animations */
/* ============================= */

#cursorText {
  position: relative;
  z-index: 2;
  display: inline-block;
}

.char {
  display: inline-block;
  transform: translateY(10px);
  opacity: 0;
}

/* ENTER */
.cursor-tip.visible .char {
  animation: charIn 420ms forwards;
  animation-delay: var(--in, 0ms);
}

@keyframes charIn {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* EXIT */
.cursor-tip.text-out .char {
  animation: charOut 420ms forwards;
  animation-delay: var(--out, 0ms);
}

@keyframes charOut {
  to {
    transform: translateY(0px);
    opacity: 0;
  }
}