/* ─── Secret auto-demo spotlight ───────────────────────────────── */

.demo-hl {
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  border-radius: 16px;
  pointer-events: none;
  z-index: 99998;
  opacity: 0;
  border: 2px solid transparent;
  transition: opacity 0.5s ease;
}

.demo-hl.visible {
  opacity: 1;
  border-color: rgba(129, 140, 248, 0.9);
  animation: demoGlow 2.4s ease-in-out infinite;
}

@keyframes demoGlow {
  0%, 100% {
    border-color: rgba(99, 102, 241, 0.95);
    box-shadow:
      0 0 0 9999px rgba(0, 0, 0, 0.58),
      0 0 0 3px rgba(255, 255, 255, 0.10),
      0 0 0 5px rgba(99, 102, 241, 0.85),
      0 0  22px  7px rgba(99,  102, 241, 0.70),
      0 0  65px 18px rgba(99,  102, 241, 0.38),
      0 0 110px 38px rgba(129, 140, 248, 0.18);
  }
  50% {
    border-color: rgba(165, 180, 252, 1);
    box-shadow:
      0 0 0 9999px rgba(0, 0, 0, 0.58),
      0 0 0 3px rgba(255, 255, 255, 0.22),
      0 0 0 6px rgba(165, 180, 252, 1.00),
      0 0  38px 14px rgba(129, 140, 248, 0.90),
      0 0  90px 30px rgba(99,  102, 241, 0.55),
      0 0 160px 60px rgba(165, 180, 252, 0.28);
  }
}

/* Tiny red recording dot — bottom-right corner */
.demo-badge {
  display: none;
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100000;
  cursor: pointer;
}

.demo-badge.active { display: block; }

.demo-badge-dot {
  display: block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 10px 3px rgba(239, 68, 68, 0.65);
  animation: demoRecPulse 1.2s ease-in-out infinite;
}

@keyframes demoRecPulse {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%       { transform: scale(1.55); opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-hl, .demo-hl.visible, .demo-badge-dot {
    animation: none !important;
    transition: none !important;
  }
}