/*
 * Source-faithful CSS adaptation of the provided anti-metal-button.tsx.
 * Exact animation geometry/timing/visibility, with ONLY lime accent
 * gradient replaced by Sugarcoat's approved OKLCH indigo theme.
 * The clickable element is an anchor to /contact/, not a form button.
 */
.anti-metal-button {
    --anti-metal-from: var(--chart-2, oklch(0.7597 0.0804 267.01));
    --anti-metal-to: var(--primary, oklch(0.5144 0.1605 267.44));
    --anti-metal-dot: #0f0f0f;

    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    width: 144px; /* w-36 */
    height: 44px; /* h-11 */
    overflow: hidden;
    border: 0;
    border-radius: 12px; /* rounded-xl */
    background: linear-gradient(180deg, #ffffff 0%, #ededed 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 4px 12px rgba(0, 0, 0, 0.35);
    color: #0a0a0a; /* source dark:text-[#0a0a0a] */
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 150ms ease;
}

.anti-metal-button__label {
    position: absolute;
    inset-block: 0;
    right: 16px; /* right-4 */
    display: flex;
    align-items: center;
    color: #0a0a0a;
    font-family: var(--font-main, sans-serif);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.025em;
    white-space: nowrap;
    pointer-events: none;
}

.anti-metal-button__slider {
    position: absolute;
    z-index: 10;
    top: 4px;
    bottom: 4px;
    left: 4px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 36px; /* w-9 */
    gap: 10px; /* gap-2.5 */
    overflow: hidden;
    border-radius: 6px; /* rounded-md */
    padding-left: 12px; /* pl-3 */
    padding-right: 10px; /* pr-2.5 */
    background: linear-gradient(180deg, var(--anti-metal-from) 0%, var(--anti-metal-to) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.12),
        0 2px 4px rgba(0, 0, 0, 0.08);
    transition:
        width 200ms cubic-bezier(0.65, 0, 0.35, 1),
        gap 200ms cubic-bezier(0.65, 0, 0.35, 1);
}

/* Five source DoubleChevrons, their own 10-dot staggered wave untouched. */
.anti-metal-button__chevrons {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
}

.anti-metal-button__chevron {
    display: block;
    flex: 0 0 auto;
    width: 14px;
    height: 16px;
    max-width: none;
    overflow: visible;
    fill: var(--anti-metal-dot);
}

@keyframes bd-dot-wave {
    0%, 70%, 100% {
        opacity: 0.25;
        transform: scale(0.85);
    }

    35% {
        opacity: 1;
        transform: scale(1);
    }
}

.anti-metal-button__dot {
    transform-box: fill-box;
    transform-origin: center;
    animation: bd-dot-wave 1.4s ease-in-out infinite;
}

/* Source group-hover/btn width expansion: show the moving row of chevrons.
   Do NOT hide them or replace them with another label on hover. */
.anti-metal-button:hover .anti-metal-button__slider,
.anti-metal-button:focus-visible .anti-metal-button__slider {
    width: calc(100% - 8px); /* w-[calc(100%-0.5rem)] */
}

.anti-metal-button:active {
    transform: scale(0.98);
}

.anti-metal-button:focus-visible {
    outline: 2px solid var(--ring, oklch(0.5144 0.1605 267.44));
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .anti-metal-button__dot {
        animation: none;
        opacity: 1;
    }

    .anti-metal-button,
    .anti-metal-button__slider {
        transition: none;
    }
}