/* ─── Liquid-Metal Button ─────────────────────────────────────────────────
 *
 * Usage:
 *   <a class="liquid-metal-btn" href="...">Label</a>
 *   <button class="liquid-metal-btn" type="submit">Label</button>
 *
 * Pairs with static/js/main.js for the ripple effect.
 * ────────────────────────────────────────────────────────────────────────── */

.liquid-metal-btn {
    /* ── Layout ── */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 142px;
    height: 46px;
    padding: 0 1.75rem;
    border-radius: 999px;
    overflow: hidden;
    border: none;
    cursor: pointer;
    text-decoration: none !important;

    /* ── Typography ── */
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff !important;
    white-space: nowrap;

    /* ── Dark metallic base gradient ──
     * Layers from near-black → charcoal highlight → deep black
     * creates the "liquid metal" depth. */
    background: linear-gradient(
        148deg,
        oklch(0.10 0 0)  0%,
        oklch(0.24 0 0) 25%,
        oklch(0.14 0 0) 50%,
        oklch(0.28 0 0) 72%,
        oklch(0.08 0 0) 100%
    );

    /* ── Metallic edge lighting ── */
    box-shadow:
        inset 0  1px 0 rgba(255, 255, 255, 0.18),   /* top bevel */
        inset 0 -1px 0 rgba(0,   0,   0,   0.55),   /* bottom shadow */
        inset 1px 0 0  rgba(255, 255, 255, 0.06),   /* left edge */
        0 4px 18px     rgba(0,   0,   0,   0.50),   /* drop shadow */
        0 1px  4px     rgba(0,   0,   0,   0.35);

    /* ── Transitions ── */
    transition:
        transform   0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow  0.18s ease;

    /* ── Accessibility ── */
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    isolation: isolate;
}

/* ── Animated shine sweep (pseudo-element) ─────────────────────────────── */

.liquid-metal-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    /* Wide highlight band that slides across */
    background: linear-gradient(
        105deg,
        transparent           10%,
        rgba(255,255,255,0.04) 28%,
        rgba(255,255,255,0.18) 44%,
        rgba(255,255,255,0.28) 50%,
        rgba(255,255,255,0.18) 56%,
        rgba(255,255,255,0.04) 72%,
        transparent           88%
    );
    background-size: 240% 100%;
    background-position: 200% center;   /* start off-screen right */
    animation: lm-shine 3.6s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* ── Subtle grain texture overlay ────────────────────────────────────────  */

.liquid-metal-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    /* Fine noise-like horizontal stripes for brushed-metal feel */
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(255, 255, 255, 0.018) 2px,
        rgba(255, 255, 255, 0.018) 3px
    );
    pointer-events: none;
    z-index: 2;
}

/* Button label sits on top of pseudo-elements */
.liquid-metal-btn > * {
    position: relative;
    z-index: 3;
}

/* Ensure text nodes are also above pseudo-elements */
.liquid-metal-btn {
    /* Wrap text in an implicit stacking context */
    color: #fff !important;
}

/* ── Shine keyframes ─────────────────────────────────────────────────────  */

@keyframes lm-shine {
    0%       { background-position:  220% center; }
    45%, 55% { background-position: -60%  center; }   /* pause in middle */
    100%     { background-position: -60%  center; }
}

/* ── Hover — lift + speed up shine ───────────────────────────────────────  */

.liquid-metal-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        inset 0  1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(0,   0,   0,   0.60),
        inset 1px 0 0  rgba(255, 255, 255, 0.08),
        0  8px 28px    rgba(0,   0,   0,   0.55),
        0  2px  8px    rgba(0,   0,   0,   0.40);
    color: #fff !important;
}

.liquid-metal-btn:hover::before {
    animation-duration: 1.4s;   /* shine sweeps faster on hover */
}

/* ── Active / Pressed — scale down + deepen shadow ──────────────────────  */

.liquid-metal-btn:active {
    transform: translateY(1px) scale(0.975);
    box-shadow:
        inset 0  2px 6px rgba(0, 0, 0, 0.55),
        inset 0 -1px 0   rgba(255, 255, 255, 0.08),
        0 1px  4px rgba(0, 0, 0, 0.30);
    transition-duration: 0.06s;
}

/* ── Keyboard focus-visible outline ──────────────────────────────────────  */

.liquid-metal-btn:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.85);
    outline-offset: 3px;
    /* Also show on dark backgrounds outside hero */
    box-shadow:
        0 0 0 5px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 4px 18px rgba(0, 0, 0, 0.50);
}

/* ── Ripple span (injected by JS) ────────────────────────────────────────  */

.liquid-metal-btn .lm-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.30);
    transform: scale(0);
    animation: lm-ripple-expand 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    pointer-events: none;
    z-index: 4;
}

@keyframes lm-ripple-expand {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ── Disabled state ──────────────────────────────────────────────────────  */

.liquid-metal-btn:disabled,
.liquid-metal-btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Responsive ──────────────────────────────────────────────────────────  */

@media (max-width: 480px) {
    .liquid-metal-btn {
        min-width: 120px;
        height: 42px;
        font-size: 0.88rem;
        padding: 0 1.4rem;
    }
}