/* Highlight animation for toggle button (pretty fade-out) */
:root{
  --highlight-fade-ms: 420ms;
  --highlight-ease: cubic-bezier(.2,.8,.2,1);
}

.highlight {
  position: absolute;                /* sticks to page (not fixed) */
  border: 2px solid #000000;         /* High-tech: black border */
  opacity: 0;                        /* toggled by .visible/.vanish */
  pointer-events: none;              /* non-interactive overlay */
  box-sizing: border-box;
  border-radius: 6px;                /* subtle rounding */
  transform: scale(1);
  filter: blur(0);
  will-change: opacity, transform, filter;
  transition:
    opacity var(--highlight-fade-ms) ease-in-out,
    transform var(--highlight-fade-ms) var(--highlight-ease),
    filter var(--highlight-fade-ms) var(--highlight-ease);
}

/* Creative theme variant */
body.creative-layout .highlight {
  border: 2px solid #A7714F;
}

/* Shown state */
.visible {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* Pretty fade-out state (applied briefly before hiding) */
.vanish {
  opacity: 0 !important;
  transform: scale(1.03);
  filter: blur(1.5px);
}

/* Legacy hook if used elsewhere */
.fade-out { opacity: 0; }