.edge-light { display: none; }

@media (hover: hover) and (pointer: fine) and (min-width: 769px) {

  .usp-card--glow {
    --edge-proximity: 0;
    --cursor-angle: 45deg;

    --edge-sensitivity: 30;

    --glow-padding: 32px;
    --glow-intensity: 0.65;

    --glow-hsl: 218 100% 66%;
    --glow-color-50: hsl(var(--glow-hsl) / calc(50% * var(--glow-intensity)));
    --glow-color-40: hsl(var(--glow-hsl) / calc(40% * var(--glow-intensity)));
    --glow-color-30: hsl(var(--glow-hsl) / calc(30% * var(--glow-intensity)));
    --glow-color-20: hsl(var(--glow-hsl) / calc(20% * var(--glow-intensity)));
    --glow-color-10: hsl(var(--glow-hsl) / calc(10% * var(--glow-intensity)));

    --glow-fade: 750ms;

    position: relative;
    isolation: isolate;
    z-index: 0;
  }

  .usp-card--glow.is-lit {
    z-index: 1;
  }

  .usp-card--glow > .edge-light {
    display: block;
    position: absolute;
    inset: calc(var(--glow-padding) * -1);
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
    transition: opacity 0.25s ease-out;

    mask-image: conic-gradient(
      from var(--cursor-angle) at center,
      black 2.5%, transparent 10%, transparent 90%, black 97.5%
    );

    opacity: calc(
      (var(--edge-proximity) - var(--edge-sensitivity)) /
      (100 - var(--edge-sensitivity))
    );
  }

  .usp-card--glow:not(:hover) > .edge-light {
    opacity: 0;
    transition: opacity var(--glow-fade) ease-in-out;
  }

  .usp-card--glow > .edge-light::before {
    content: "";
    position: absolute;
    inset: var(--glow-padding);
    border-radius: inherit;
    box-shadow:
      inset 0 0 3px 0 var(--glow-color-50),
      inset 0 0 6px 0 var(--glow-color-40),
      inset 0 0 15px 0 var(--glow-color-30),
      inset 0 0 25px 2px var(--glow-color-20),
      inset 0 0 50px 2px var(--glow-color-10),
      0 0 3px 0 var(--glow-color-50),
      0 0 6px 0 var(--glow-color-40),
      0 0 15px 0 var(--glow-color-30),
      0 0 25px 2px var(--glow-color-20),
      0 0 50px 2px var(--glow-color-10);
  }
}