/* ────────────────────────────────────────────────────────────
   Modo Aula — Spotlight
   Overlay escuro com "buraco" ao redor do elemento sob o cursor.
   Borda gradiente azul animada girando ao redor do elemento.
   ──────────────────────────────────────────────────────────── */

#ctrl-aula-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483640;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes girar-borda {
  to { --angle: 360deg; }
}

@keyframes glow-pulso {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

.ctrl-hover-alvo {
  position: relative;
  z-index: 2147483641 !important;
  border-radius: var(--r-md, 6px);
  outline: none !important;
}

.ctrl-hover-alvo::before {
  content: "" !important;
  position: absolute !important;
  inset: -4px !important;
  z-index: -1 !important;
  border-radius: inherit !important;
  padding: 3px !important;

  background: conic-gradient(
    from var(--angle, 0deg),
    #1a53ff,
    #4285f4,
    #6db3f8,
    #4285f4,
    #1a53ff
  ) !important;

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0) !important;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;

  animation: girar-borda 2.5s linear infinite !important;
}

.ctrl-hover-alvo::after {
  content: "" !important;
  position: absolute !important;
  inset: -8px !important;
  z-index: -2 !important;
  border-radius: inherit !important;

  background: conic-gradient(
    from var(--angle, 0deg),
    rgba(26, 83, 255, .35),
    rgba(66, 133, 244, .3),
    rgba(109, 179, 248, .25),
    rgba(66, 133, 244, .3),
    rgba(26, 83, 255, .35)
  ) !important;

  filter: blur(12px) !important;
  animation:
    girar-borda 2.5s linear infinite,
    glow-pulso 2s ease-in-out infinite !important;
}