/* Keyword Animation Tooltip Grid Styles */

/* Keyword trigger styling */
.keyword {
  cursor: pointer; /* Show pointer cursor on hover */
}

/* Base tooltip structure - matches original implementation */
.tooltip {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 100002; /* Above other tooltips */
  will-change: transform;
}

/* Tooltip visible state */
.tooltip--visible {
  opacity: 1;
}

/* Grid background container */
.tooltip__bg {
  display: grid;
  grid-template-columns: repeat(var(--tt-columns, 10), 1fr);
  grid-template-rows: repeat(var(--tt-rows, 12), 1fr);
  gap: 0; /* No gaps between cells as per user requirement */
  width: var(--tt-width, 260px); /* Default width, can be overridden */
  height: var(--tt-height, 180px); /* Default height, can be overridden */
  /* No background color on tooltip itself as per user requirement */
}

/* Effect-specific grid sizing */
/* Effect 1 - Standard grid (12x10) */
.tooltip[data-effect="effect1"] {
  --tt-width: 280px;
  --tt-height: 200px;
}

/* Effect 2 - Tall narrow grid (9x3) */
.tooltip[data-effect="effect2"] {
  --tt-width: 150px;
  --tt-height: 250px;
}

/* Effect 3 - Medium grid (8x6) */
.tooltip[data-effect="effect3"] {
  --tt-width: 240px;
  --tt-height: 180px;
}

/* Effect 4 - Wide single row (1x14) - needs wider cells */
.tooltip[data-effect="effect4"] {
  --tt-width: 420px;
  --tt-height: 80px;
}

/* Effect 5 - Wide grid (8x12) */
.tooltip[data-effect="effect5"] {
  --tt-width: 360px;
  --tt-height: 160px;
}

/* Effect 6 - Small grid (5x3) */
.tooltip[data-effect="effect6"] {
  --tt-width: 180px;
  --tt-height: 150px;
}

/* Individual grid cells */
.tooltip__bg > div {
  background-color: #000; /* Cell color - solid black */
  opacity: 0; /* Start invisible for animation */
  /* No scale transform as per user requirement - only opacity animation */
}

/* Content overlay */
.tooltip__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  font-size: 14px;
  padding: 20px;
  pointer-events: none;
  opacity: 0; /* Start invisible for animation */
  z-index: 1;
  white-space: normal; /* Allow text wrapping for wider tooltips */
  width: calc(100% - 40px); /* Account for padding */
  max-width: 100%;
  box-sizing: border-box;
}

/* Adjust content for narrow tooltips */
.tooltip[data-effect="effect2"] .tooltip__content,
.tooltip[data-effect="effect6"] .tooltip__content {
  font-size: 12px;
  padding: 15px;
}

/* Adjust content for wide tooltips */
.tooltip[data-effect="effect4"] .tooltip__content,
.tooltip[data-effect="effect5"] .tooltip__content {
  white-space: nowrap; /* Keep single line for wide tooltips */
}

/* Ensure tooltip content is visible */
.tooltip__content p {
  margin: 0;
  color: white;
  font-family: inherit;
}