/* Soft interactive edge treatment for content panels. */
.edge-glow-panel {
  --glow-x: 50%;
  --glow-y: 50%;
  --glow-strength: 0;
  isolation: isolate;
}

.edge-glow-panel > .panel-edge-glow {
  position: absolute !important;
  inset: 0 !important;
  z-index: 8 !important;
  display: block !important;
  padding: 1.5px;
  border-radius: inherit !important;
  pointer-events: none !important;
  opacity: var(--glow-strength);
  background: radial-gradient(170px circle at var(--glow-x) var(--glow-y), rgba(116, 221, 255, .96) 0%, rgba(124, 75, 255, .92) 24%, rgba(55, 113, 250, .42) 46%, transparent 72%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  box-shadow: 0 0 23px rgba(90, 98, 255, calc(var(--glow-strength) * .55)), 0 0 8px rgba(109, 219, 255, calc(var(--glow-strength) * .82));
  transition: opacity .16s ease, box-shadow .16s ease;
}

.particle-fog {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .88;
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .particle-fog { display: none; }
}