/* Four fixed blur panels surround the active element. The active element is
   never covered, cloned, moved or restyled. */
.bil-spotlight-v2-piece {
  position: fixed;
  z-index: 2147483645;
  pointer-events: none;
  background: var(--bil-spotlight-veil, rgba(8, 13, 36, 0.405));
  -webkit-backdrop-filter: blur(var(--bil-spotlight-blur, 3.05px));
  backdrop-filter: blur(var(--bil-spotlight-blur, 3.05px));
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 180ms ease,
    visibility 180ms ease,
    background 180ms ease,
    -webkit-backdrop-filter 180ms ease,
    backdrop-filter 180ms ease;
}

.bil-spotlight-v2-piece.is-visible {
  opacity: 1;
  visibility: visible;
}

.bil-spotlight-v2-frame {
  position: fixed;
  z-index: 2147483646;
  pointer-events: none;
  border: 1px solid rgba(105, 227, 235, 0.52);
  border-radius: var(--bil-spotlight-radius, 14px);
  opacity: 0;
  visibility: hidden;
  box-shadow:
    0 28px 72px rgba(8, 13, 36, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.24),
    0 0 46px rgba(108, 80, 237, 0.24);
  transition: opacity 180ms ease, visibility 180ms ease;
}

.bil-spotlight-v2-frame.is-visible {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 1040px), (hover: none), (pointer: coarse) {
  .bil-spotlight-v2-piece,
  .bil-spotlight-v2-frame {
    display: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .bil-spotlight-v2-piece {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(8, 13, 36, 0.72);
  }
}

@media (forced-colors: active) {
  .bil-spotlight-v2-piece,
  .bil-spotlight-v2-frame {
    display: none !important;
  }
}