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

.pulsing-container {
    position: relative;
}

@media (prefers-reduced-motion: no-preference) {
  .pulsing-container::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    z-index: -1;

    --pc1: rgba(52,107,241,0);
    --pc2: rgba(80, 50, 255,0.25);
    --pc3: rgba(255, 80, 255,0.35);

    background: conic-gradient(
      from var(--anglepc),
      var(--pc1),
      var(--pc2),
      var(--pc3),
      var(--pc2),
      var(--pc1)
    );

    filter: blur(4px);
    pointer-events: none;

    animation:
      rotatepc 9s linear infinite,
      pulsepc 12s ease-in-out infinite;
  }

  @keyframes rotatepc {
    to { --anglepc: 360deg; }
  }

  @keyframes pulsepc {
    0%,100% { filter: blur(5px) brightness(0.05); }
    50%     { filter: blur(2px) brightness(0.25); }
  }
}