/* -----------------------------
   Tooltip Base Styles
----------------------------- */
.dynamic-tooltip {
  position: fixed; /* stays in viewport */
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px 12px;
  max-width: 240px;
  font-size: 14px;
  color: #333;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: opacity 0.2s ease;
}

.dynamic-tooltip .tooltip-text {
  line-height: 1.4;
}

/* -----------------------------
   Tooltip Controls
----------------------------- */
.tooltip-controls {
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.tooltip-close {
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  border: none;
  background: none;
  color: #666;
}

.tooltip-close:hover {
  color: #000;
}

.dynamic-tooltip::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 6px;
  background: #fff;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  z-index: -1;
}

/* Top placement */
.arrow-top::after {
  bottom: -6px;       /* attached to tooltip bottom */
  left: 50%;
  transform: translateX(-50%) rotate(180deg); /* point down */
}
.arrow-top-left::after {
  bottom: -6px;
  left: 16px;
  transform: rotate(180deg);
}
.arrow-top-right::after {
  bottom: -6px;
  right: 16px;
  transform: rotate(180deg);
}

/* Bottom placement */
.arrow-bottom::after {
  top: -6px;          /* attached to tooltip top */
  left: 50%;
  transform: translateX(-50%); /* point up */
}
.arrow-bottom-left::after {
  top: -6px;
  left: 16px;
}
.arrow-bottom-right::after {
  top: -6px;
  right: 16px;
}

/* Left placement */
.arrow-left::after {
  top: 50%;
  right: -6px;
  transform: translateY(-50%) rotate(90deg);
}
.arrow-left-top::after {
  top: 16px;
  right: -6px;
  transform: rotate(90deg);
}
.arrow-left-bottom::after {
  bottom: 16px;
  right: -6px;
  transform: rotate(90deg);
}

/* Right placement */
.arrow-right::after {
  top: 50%;
  left: -6px;
  transform: translateY(-50%) rotate(-90deg);
}
.arrow-right-top::after {
  top: 16px;
  left: -6px;
  transform: rotate(-90deg);
}
.arrow-right-bottom::after {
  bottom: 16px;
  left: -6px;
  transform: rotate(-90deg);
}


/* -----------------------------
   Tooltip Animations
   (triggered by JS category mapping)
----------------------------- */

/* Pop (default / intro / marketing) */
.tooltip-animate-pop {
  animation: tooltipPop 0.6s ease forwards;
}
@keyframes tooltipPop {
  0% { opacity: 0; transform: scale(0.8); }
  60% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}

/* Bounce (tips) */
.tooltip-animate-bounce {
  animation: tooltipBounce 0.8s ease forwards;
}
@keyframes tooltipBounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-12px); }
  60% { transform: translateY(6px); }
  80% { transform: translateY(-4px); }
}

/* Slide (trivia) */
.tooltip-animate-slide {
  animation: tooltipSlide 0.5s ease forwards;
}
@keyframes tooltipSlide {
  0% { opacity: 0; transform: translateY(15px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Shake (jokes) */
.tooltip-animate-shake {
  animation: tooltipShake 0.6s ease;
}
@keyframes tooltipShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* Pulse (maintenance) */
.tooltip-animate-pulse {
  animation: tooltipPulse 0.7s ease-in-out forwards;
}
@keyframes tooltipPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.9; }
}

/* -----------------------------
   Button Animations
   (triggered before tooltips)
----------------------------- */

/* Pulse (intro, marketing) */
.btn-pulse {
  animation: btnPulse 0.6s ease;
}
@keyframes btnPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* Wiggle (joke) */
.btn-wiggle {
  animation: btnWiggle 0.6s ease;
}
@keyframes btnWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
  75% { transform: rotate(-6deg); }
}

/* Bounce (trivia) */
.btn-bounce {
  animation: btnBounce 0.6s ease;
}
@keyframes btnBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* Nudge (maintenance) */
.btn-nudge {
  animation: btnNudge 0.5s ease;
}
@keyframes btnNudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(8px); }
}

/* Hop (tips) */
.btn-hop {
  animation: btnHop 0.5s ease;
}
@keyframes btnHop {
  0% { transform: translateY(0); }
  30% { transform: translateY(-14px); }
  60% { transform: translateY(6px); }
  100% { transform: translateY(0); }
}

.tooltip-category-label {
  font-size: 10px;
  font-weight: bold;
  color: #fff;
  background: #666;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.tooltip-category-label.intro       { background: #4caf50; }
.tooltip-category-label.joke        { background: #f44336; }
.tooltip-category-label.trivia      { background: #2196f3; }
.tooltip-category-label.maintenance { background: #ff9800; }
.tooltip-category-label.tip         { background: #9c27b0; }
.tooltip-category-label.marketing   { background: #00bcd4; }