/* Sparkle CTA Button — Uiverse.io by MuhammadHasann */
.sparkle-btn {
    --black-700: hsla(0 0% 12% / 1);
    --border_radius: 9999px;
    --transtion: 0.3s ease-in-out;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transform-origin: center;
    padding: 0.875rem 2rem;
    background-color: transparent;
    border: none;
    border-radius: var(--border_radius);
    height: 52px;
    box-sizing: border-box;
    transform: scale(calc(1 + (var(--active, 0) * 0.1)));
    transition: transform var(--transtion);
    text-decoration: none;
    font-family: 'Space Grotesk', sans-serif;
}
.sparkle-btn::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    background-color: var(--black-700);
    border-radius: var(--border_radius);
    box-shadow: inset 0 0.5px hsl(0, 0%, 100%), inset 0 -1px 2px 0 hsl(0, 0%, 0%),
        0px 4px 10px -4px hsla(0 0% 0% / calc(1 - var(--active, 0))),
        0 0 0 calc(var(--active, 0) * 0.375rem) hsl(260 97% 50% / 0.75);
    transition: all var(--transtion);
    z-index: 0;
}
.sparkle-btn::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    background-color: hsla(260 97% 61% / 0.75);
    background-image: radial-gradient(at 51% 89%, hsla(266, 45%, 74%, 1) 0px, transparent 50%),
        radial-gradient(at 100% 100%, hsla(266, 36%, 60%, 1) 0px, transparent 50%),
        radial-gradient(at 22% 91%, hsla(266, 36%, 60%, 1) 0px, transparent 50%);
    background-position: top;
    opacity: var(--active, 0);
    border-radius: var(--border_radius);
    transition: opacity var(--transtion);
    z-index: 2;
}
.sparkle-btn:is(:hover, :focus-visible) { --active: 1; }
.sparkle-btn:active { transform: scale(1); }

.sparkle-btn .dots_border {
    overflow: hidden;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 2px); height: calc(100% + 2px);
    background-color: transparent;
    border-radius: var(--border_radius);
    z-index: -10;
}
.sparkle-btn .dots_border::before {
    content: "";
    position: absolute;
    top: 30%; left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: left;
    transform: rotate(0deg);
    width: 100%; height: 2rem;
    background-color: white;
    mask: linear-gradient(transparent 0%, white 120%);
    animation: sparkle-rotate 2s linear infinite;
}
@keyframes sparkle-rotate { to { transform: rotate(360deg); } }

.sparkle-btn .sparkle-icon {
    position: relative;
    z-index: 10;
    width: 1.5rem;
    height: 1.5rem;
}
.sparkle-btn .sparkle-icon .path {
    fill: currentColor;
    stroke: currentColor;
    transform-origin: center;
    color: hsl(0, 0%, 100%);
}
.sparkle-btn:is(:hover, :focus) .sparkle-icon .path {
    animation: sparkle-path 1.5s linear 0.5s infinite;
}
.sparkle-btn .sparkle-icon .path:nth-child(1) { --scale_path_1: 1.2; }
.sparkle-btn .sparkle-icon .path:nth-child(2) { --scale_path_2: 1.2; }
.sparkle-btn .sparkle-icon .path:nth-child(3) { --scale_path_3: 1.2; }

@keyframes sparkle-path {
    0%, 34%, 71%, 100% { transform: scale(1); }
    17% { transform: scale(var(--scale_path_1, 1)); }
    49% { transform: scale(var(--scale_path_2, 1)); }
    83% { transform: scale(var(--scale_path_3, 1)); }
}

.sparkle-btn .sparkle-text {
    position: relative;
    z-index: 10;
    font-size: 0.9375rem;
    font-weight: 700;
    color: white;
    white-space: nowrap;
    transition: text-shadow 0.3s;
}
.sparkle-btn:hover .sparkle-text {
    text-shadow: 0 0 20px rgba(255,255,255,0.5);
}