/* ===== Glassy pill with lavender aura + horizon glow ===== */
.intro .btn-glass-glow {
    --c1: #423dfc;
    /* core left */
    --c2: #7271fb;
    /* core right */
    --halo: rgba(157, 144, 255, .65);
    /* outer glow color */
    --ring: rgba(255, 255, 255, .65);
    /* glass border tint */

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 16px 44px;
    border-radius: var(--r, 16px);
    border: 1px solid transparent;
    /* needed for glass border trick */
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: .2px;
    overflow: hidden;
    isolation: isolate;

    /* core gradient + subtle inner bloom + GLASS outline */
    background:

        linear-gradient(135deg, var(--c1) 0%, #6d59ff 45%, var(--c2) 100%) border-box;

    /* depth + soft outer aura edge */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .45),
        inset 0 -14px 24px rgba(0, 0, 0, .22),
        0 10px 28px rgba(66, 77, 254, .25),
        0 0 0 6px rgba(157, 144, 255, .10);
    /* feathered outline */
}

/* glossy inner rim so edge feels “glassy” */
.intro .btn-glass-glow::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .18));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* ambient outer aura (lavender cloud) */
.intro .btn-glass-glow::after {
    content: "";
    position: absolute;
    inset: -18px;
    border-radius: inherit;
    background:
        radial-gradient(120% 85% at 50% 12%, rgba(255, 255, 255, .45), transparent 60%),
        radial-gradient(120% 90% at 50% 88%, var(--halo), transparent 70%);
    filter: blur(18px);
    opacity: .95;
    z-index: -1;
    pointer-events: none;
}

/* the bright “horizon” glow rising from bottom center */
.intro .btn-glass-glow .btn-horizon {
    position: absolute;
    left: -32px;
    /* slightly wider spread */
    right: -32px;
    bottom: -28px;
    /* extend below */
    top: 50%;
    /* rise a bit more into button */
    border-radius: inherit;
    background:
        radial-gradient(160% 110% at 50% 100%,
            rgba(255, 255, 255, 1) 0%,
            /* pure white core */
            rgba(255, 255, 255, .75) 20%,
            rgba(200, 190, 255, .45) 45%,
            rgba(140, 130, 255, .25) 65%,
            rgba(114, 113, 251, 0) 85%);
    filter: blur(28px);
    /* stronger softness */
    mix-blend-mode: screen;
    opacity: 1;
    /* ensure max visibility */
    pointer-events: none;
}

/* thin inner horizon line for that sharp edge highlight */
.intro .btn-glass-glow .btn-horizon::after {
    content: "";
    position: absolute;
    left: 15%;
    right: 15%;
    bottom: 22%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, .9) 25%,
            rgba(255, 255, 255, 1) 50%,
            rgba(255, 255, 255, .9) 75%,
            transparent 100%);
    filter: blur(1px);
    /* slightly stronger glow line */
}

/* interactions */
.intro .btn-glass-glow:hover {
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .55),
        inset 0 -14px 24px rgba(0, 0, 0, .22),
        0 14px 36px rgba(66, 77, 254, .32),
        0 0 0 8px rgba(157, 144, 255, .12);
}

.intro .btn-glass-glow:active {
    transform: translateY(0);
}

/* keep icon white */
.intro .btn-glass-glow .btn-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    filter: brightness(0) invert(1);
}

/* keyboard focus */
.intro .btn-glass-glow:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, .85),
        0 0 0 8px rgba(114, 113, 251, .35);
}

/* Use it in .intro as before, AND anywhere else */
:is(.intro .btn-glass-glow, .btn-glass-glow) {
    --c1: #423dfc;
    /* core left */
    --c2: #7271fb;
    /* core right */
    --halo: rgba(157, 144, 255, .65);
    /* outer glow color */
    --ring: rgba(255, 255, 255, .65);
    /* glass border tint */

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 16px 44px;
    border-radius: var(--r, 16px);
    border: 1px solid transparent;
    /* needed for glass border trick */
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: .2px;
    overflow: hidden;
    isolation: isolate;

    /* core gradient + GLASS outline */
    background: linear-gradient(135deg, var(--c1) 0%, #6d59ff 45%, var(--c2) 100%) border-box;

    /* depth + soft outer aura edge */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .45),
        inset 0 -14px 24px rgba(0, 0, 0, .22),
        0 10px 28px rgba(66, 77, 254, .25),
        0 0 0 6px rgba(157, 144, 255, .10);
    /* feathered outline */
}

/* glossy inner rim so edge feels “glassy” */
:is(.intro .btn-glass-glow, .btn-glass-glow)::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .18));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* ambient outer aura (lavender cloud) */
:is(.intro .btn-glass-glow, .btn-glass-glow)::after {
    content: "";
    position: absolute;
    inset: -18px;
    border-radius: inherit;
    background:
        radial-gradient(120% 85% at 50% 12%, rgba(255, 255, 255, .45), transparent 60%),
        radial-gradient(120% 90% at 50% 88%, var(--halo), transparent 70%);
    filter: blur(18px);
    opacity: .95;
    z-index: -1;
    pointer-events: none;
}

/* the bright “horizon” glow rising from bottom center */
:is(.intro .btn-glass-glow, .btn-glass-glow) .btn-horizon {
    position: absolute;
    left: -32px;
    /* slightly wider spread */
    right: -32px;
    bottom: -28px;
    /* extend below */
    top: 50%;
    /* rise a bit more into button */
    border-radius: inherit;
    background:
        radial-gradient(160% 110% at 50% 100%,
            rgba(255, 255, 255, 1) 0%,
            /* pure white core */
            rgba(255, 255, 255, .75) 20%,
            rgba(200, 190, 255, .45) 45%,
            rgba(140, 130, 255, .25) 65%,
            rgba(114, 113, 251, 0) 85%);
    filter: blur(28px);
    /* stronger softness */
    mix-blend-mode: screen;
    opacity: 1;
    /* ensure max visibility */
    pointer-events: none;
}

/* thin inner horizon line for that sharp edge highlight */
:is(.intro .btn-glass-glow, .btn-glass-glow) .btn-horizon::after {
    content: "";
    position: absolute;
    left: 15%;
    right: 15%;
    bottom: 22%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, .9) 25%,
            rgba(255, 255, 255, 1) 50%,
            rgba(255, 255, 255, .9) 75%,
            transparent 100%);
    filter: blur(1px);
    /* slightly stronger glow line */
}

/* interactions */
:is(.intro .btn-glass-glow, .btn-glass-glow):hover {
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .55),
        inset 0 -14px 24px rgba(0, 0, 0, .22),
        0 14px 36px rgba(66, 77, 254, .32),
        0 0 0 8px rgba(157, 144, 255, .12);
}

:is(.intro .btn-glass-glow, .btn-glass-glow):active {
    transform: translateY(0);
}

/* keep icon white */
:is(.intro .btn-glass-glow, .btn-glass-glow) .btn-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    filter: brightness(0) invert(1);
}

/* keyboard focus */
:is(.intro .btn-glass-glow, .btn-glass-glow):focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, .85),
        0 0 0 8px rgba(114, 113, 251, .35);
}

/* ================= Shimmer state ================= */
/* Hide by default to preserve layout */
:is(.intro .btn-glass-glow, .btn-glass-glow) .btn-shimmer {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-weight: 500;
    opacity: 0;
    pointer-events: none;
    /* shimmering gradient clipped to text */
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, .7) 45%,
            rgba(255, 255, 255, 1) 50%,
            rgba(255, 255, 255, .7) 55%,
            rgba(255, 255, 255, 0) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* When regenerating */
:is(.intro .btn-glass-glow, .btn-glass-glow).is-regenerating {
    cursor: progress;
}

:is(.intro .btn-glass-glow, .btn-glass-glow).is-regenerating .btn-text,
:is(.intro .btn-glass-glow, .btn-glass-glow).is-regenerating .btn-icon {
    opacity: 0;
    /* keep width, avoid layout shift */
}

:is(.intro .btn-glass-glow, .btn-glass-glow).is-regenerating .btn-shimmer {
    opacity: 1;
    animation: btn-shimmer-slide 1.15s linear infinite;
}

/* Optional: subtle breathing of the aura while loading */
:is(.intro .btn-glass-glow, .btn-glass-glow).is-regenerating::after {
    animation: btn-aura-breathe 1.8s ease-in-out infinite;
}

/* Keyframes */
@keyframes btn-shimmer-slide {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: 0% 0;
    }
}

@keyframes btn-aura-breathe {

    0%,
    100% {
        opacity: .95;
        filter: blur(18px);
    }

    50% {
        opacity: 1;
        filter: blur(22px);
    }
}

/* ===== Extra small variant (for header) ===== */
.btn-glass-glow--xs {
    --r: 8px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    gap: 6px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .35),
        inset 0 -6px 12px rgba(0, 0, 0, .18),
        0 4px 12px rgba(66, 77, 254, .18),
        0 0 0 4px rgba(157, 144, 255, .08);
}

.btn-glass-glow--xs .btn-horizon {
    left: -18px;
    right: -18px;
    bottom: -14px;
    top: 55%;
    filter: blur(16px);
}

.btn-glass-glow--xs .btn-horizon::after {
    bottom: 20%;
}