/* HoverBorderGradient Component - Smooth CSS Animation */

:root {
    --hbg-bg: #000000;
    --hbg-container-bg: rgba(255, 255, 255, 0.1);
    --hbg-highlight: #69d42f;
    /* Green-500 for hover */
    --hbg-border-width: 1.5px;
}

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

.hover-border-btn {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 9999px;
    /* rounded-full */
    padding: var(--hbg-border-width);
    background: transparent;
    /* overflow: hidden;  <-- REMOVED to allow outer glow */
    text-decoration: none;
    color: inherit;
    width: fit-content;
    cursor: pointer;
    transform: translateZ(0);
}

/* 
   Rotating border element.
   We use masking to create the border shape instead of nesting, 
   but since we have content inside with a background, we can just layer it behind.
*/
.hover-border-btn::before {
    content: "";
    position: absolute;
    inset: -2px;
    /* Extend slightly outside to form the border and potential glow base */
    background: conic-gradient(from var(--angle),
            transparent 0%,
            rgba(255, 255, 255, 0.5) 10%,
            transparent 20%);
    animation: spin 6s linear infinite;
    /* Slower speed (was 3s) */
    border-radius: inherit;
    z-index: 0;
    opacity: 0.7;
}

/* Background Mask (The black center) */
/* We need a separate element for the background to sit ON TOP of the ::before (border) but BEHIND the content */
.hover-border-btn .btn-bg {
    position: absolute;
    inset: var(--hbg-border-width);
    background-color: var(--hbg-bg);
    border-radius: inherit;
    z-index: 1;
}

/* 
   Hover State: 
   1. Change color to Green
   2. Increase glow size (using box-shadow or filter blur on a pseudo-element)
*/

/* We'll use ::after for the "outer glow" bloom effect on hover */
.hover-border-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: conic-gradient(from var(--angle),
            transparent 0%,
            var(--hbg-highlight) 15%,
            transparent 30%);
    animation: spin 6s linear infinite;
    /* Match speed */
    border-radius: inherit;
    z-index: -1;
    /* Behind everything */
    opacity: 0;
    filter: blur(15px);
    /* The "glow" bloom */
    transition: opacity 0.3s;
}

.hover-border-btn:hover::before {
    background: conic-gradient(from var(--angle),
            transparent 0%,
            var(--hbg-highlight) 15%,
            /* Wider slice for "larger" feel */
            transparent 30%);
    opacity: 1;
    /* animation-duration: 6s;  Keep consistent speed or slightly faster? User said "reduce speed a bit when looping", usually implies base state. */
}

.hover-border-btn:hover::after {
    opacity: 1;
    /* Show the bloom */
}

@keyframes spin {
    from {
        --angle: 0deg;
    }

    to {
        --angle: 360deg;
    }
}

/* Fallback for browsers not supporting @property */
@supports not (background: paint(something)) {
    .hover-border-btn::before {
        background: conic-gradient(transparent 0deg, white 36deg, transparent 72deg);
        animation: rotate-fallback 6s linear infinite;
    }

    .hover-border-btn:hover::before {
        background: conic-gradient(transparent 0deg, var(--hbg-highlight) 50deg, transparent 100deg);
    }

    .hover-border-btn::after {
        background: conic-gradient(transparent 0deg, var(--hbg-highlight) 50deg, transparent 100deg);
        animation: rotate-fallback 6s linear infinite;
    }
}

@keyframes rotate-fallback {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Content Container */
.hover-border-btn .btn-content {
    position: relative;
    z-index: 10;
    padding: 12px 28px;
    border-radius: inherit;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 15px;
    color: white;
}

.hover-border-btn .btn-gradient {
    display: none;
}

@media (max-width: 768px) {
    .hover-border-btn::before {
        animation: none !important;
        background: rgba(255, 255, 255, 0.2) !important;
        inset: 0;
    }

    .hover-border-btn::after {
        display: none !important;
        /* Disable hover glow */
    }

    .hover-border-btn:hover::before {
        background: rgba(255, 255, 255, 0.2) !important;
        opacity: 0.7;
    }
}