/* Keep the recorded colors at rest; only the hovered tile responds. */
.creator-heatmap--interactive {
  --heatmap-hover-tone: #050609;
  overflow: visible;
  cursor: default;
}
.creator-heatmap--interactive .heatmap-hit {
  fill: transparent;
  pointer-events: all;
}
.creator-heatmap--interactive .heatmap-cell {
  fill: var(--heatmap-color);
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
}
.creator-heatmap--interactive .heatmap-cell--empty { --heatmap-color: #e9edf2; }
:root[data-theme="dark"] .creator-heatmap--interactive { --heatmap-hover-tone: #fff; }
:root[data-theme="dark"] .creator-heatmap--interactive .heatmap-cell--empty { --heatmap-color: #3b3e46; }

@media (hover: hover) and (pointer: fine) {
  .creator-heatmap--interactive .heatmap-cell {
    transition: transform 420ms cubic-bezier(.2,.8,.2,1), fill 460ms ease;
  }
  /* The transparent hit area stays still, avoiding edge flicker as a tile rises. */
  .creator-heatmap--interactive .heatmap-tile:hover .heatmap-cell {
    fill: color-mix(in srgb, var(--heatmap-color) 86%, var(--heatmap-hover-tone));
    transform: translateY(-2px) scale(1.08);
    transition-duration: 160ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .creator-heatmap--interactive .heatmap-cell,
  .creator-heatmap--interactive .heatmap-tile:hover .heatmap-cell {
    transform: none;
    transition: none;
  }
}