.pc-impact-gradient-border {
    --pci-border-primary: #00aad4;
    --pci-border-highlight: #1fd6ff;
    --pci-border-edge-strength: 22%;
    --pci-border-glow-color: rgba(0, 170, 212, 0.28);
    --pci-border-glow-size: 18px;

    display: block;
    width: 100%;
    max-width: 100%;
    height: 3px;
    box-sizing: border-box;
    pointer-events: none;

    /* Safe fallback for browsers without color-mix(). */
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--pci-border-primary) 15%,
        var(--pci-border-primary) 43%,
        var(--pci-border-highlight) 50%,
        var(--pci-border-primary) 57%,
        var(--pci-border-primary) 85%,
        transparent 100%
    );
}

@supports (color: color-mix(in srgb, #000 50%, transparent)) {
    .pc-impact-gradient-border {
        background: linear-gradient(
            90deg,
            transparent 0%,
            color-mix(
                in srgb,
                var(--pci-border-primary) var(--pci-border-edge-strength),
                transparent
            ) 15%,
            var(--pci-border-primary) 43%,
            var(--pci-border-highlight) 50%,
            var(--pci-border-primary) 57%,
            color-mix(
                in srgb,
                var(--pci-border-primary) var(--pci-border-edge-strength),
                transparent
            ) 85%,
            transparent 100%
        );
    }
}