/* =========================================================
   CuraX Partner Sign In - CSS Only Glowing Border
   No JavaScript Required
   ========================================================= */

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

.cx-signin-glow {
    position: relative;
    isolation: isolate;
    overflow: visible;
    border-radius: 999px;
}

/* Animated cyan border */

.cx-signin-glow::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;

    background: conic-gradient(
        from var(--signin-glow-angle),
        transparent 0deg,
        transparent 210deg,
        #098dff55 245deg,
        #098dff 280deg,
        #61e8ff 310deg,
        #098dff 340deg,
        transparent 360deg
    );

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    -webkit-mask-composite: xor;

    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    mask-composite: exclude;

    pointer-events: none;
    z-index: 2;

    filter: drop-shadow(0 0 5px #0eb4f6);

    animation: signin-glow-rotate 4s linear infinite;
}

/* Stronger glow on hover */

.cx-signin-glow:hover::after,
.cx-signin-glow:focus-visible::after {
    filter: drop-shadow(0 0 9px #61e8ff);
}

/* Clockwise movement */

@keyframes signin-glow-rotate {
    from {
        --signin-glow-angle: 0deg;
    }

    to {
        --signin-glow-angle: 360deg;
    }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
    .cx-signin-glow::after {
        animation: none;
    }
}