/* ============================================================
   METAL BUTTON  +  LIQUID BUTTON
   Exact port of the React MetalButton / LiquidButton
   components to vanilla CSS + JS.

   Usage — Metal Button:
   ─────────────────────
   <div class="metal-btn-wrapper" data-variant="default">
     <div class="metal-btn-inner"></div>
     <button class="metal-btn">
       <div class="metal-btn-shine"></div>
       <div class="metal-btn-hover-overlay"></div>
       Button Text
     </button>
   </div>

   Variants: default | primary | success | error | gold | bronze

   Usage — Liquid Button:
   ───────────────────────
   <button class="liquid-btn liquid-btn-xxl">
     <div class="liquid-btn-bubble"></div>
     <div class="liquid-btn-backdrop"></div>
     <span class="liquid-btn-text">Button Text</span>
   </button>

   Sizes: liquid-btn-sm | liquid-btn-lg | liquid-btn-xl
          liquid-btn-xxl (default) | liquid-btn-icon
============================================================ */


/* ══════════════════════════════════════════════════════════
   METAL BUTTON
   Three-layer structure: outer (gradient border) →
   inner (gradient fill) → button surface (gradient face)
   Ported from React MetalButton component
══════════════════════════════════════════════════════════ */

.metal-btn-wrapper {
    position: relative;
    display: inline-flex;
    border-radius: 8px;
    padding: 1.25px;
    will-change: transform;
    cursor: pointer;
    /* default resting shadow */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(0) scale(1);
    transform-origin: center center;
    transition: all 250ms cubic-bezier(0.1, 0.4, 0.2, 1);
}

/* Inner gradient fill layer */
.metal-btn-inner {
    position: absolute;
    inset: 1px;
    border-radius: 6px;
    will-change: transform;
    transform-origin: center center;
    transition: all 250ms cubic-bezier(0.1, 0.4, 0.2, 1);
    pointer-events: none;
}

/* Button surface */
.metal-btn {
    position: relative;
    z-index: 10;
    margin: 1px;
    border-radius: 6px;
    display: inline-flex;
    height: 44px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 8px 24px;
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
    will-change: transform;
    transform-origin: center center;
    outline: none;
    border: none;
    transition: all 250ms cubic-bezier(0.1, 0.4, 0.2, 1);
    white-space: nowrap;
}

/* ── Shine flash (visible on press, same as React ShineEffect) ── */
.metal-btn-shine {
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 20;
    overflow: hidden;
    border-radius: 6px;
    opacity: 0;
    transition: opacity 300ms;
    background: linear-gradient(
        to right,
        transparent,
        rgba(245, 245, 245, 0.5),
        transparent
    );
}

/* ── Subtle top-glow overlay on hover ── */
.metal-btn-hover-overlay {
    pointer-events: none;
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: linear-gradient(to top, transparent, rgba(255, 255, 255, 0.05));
    opacity: 0;
    transition: opacity 200ms;
}

/* ── STATE: pressed ── */
.metal-btn-wrapper.is-pressed {
    transform: translateY(2.5px) scale(0.99);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.metal-btn-wrapper.is-pressed .metal-btn {
    transform: scale(0.97);
}
.metal-btn-wrapper.is-pressed .metal-btn-shine {
    opacity: 0.2;
}

/* ── STATE: hovered (non-touch only) ── */
.metal-btn-wrapper.is-hovered:not(.is-touch):not(.is-pressed) {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.metal-btn-wrapper.is-hovered:not(.is-touch):not(.is-pressed) .metal-btn-inner {
    filter: brightness(1.05);
}
.metal-btn-wrapper.is-hovered:not(.is-touch):not(.is-pressed) .metal-btn {
    filter: brightness(1.02);
}
.metal-btn-wrapper.is-hovered:not(.is-touch):not(.is-pressed) .metal-btn-hover-overlay {
    opacity: 1;
}


/* ══════════════════════════════════════════════════════════
   COLOR VARIANTS  (exact gradient values from React)
══════════════════════════════════════════════════════════ */

/* ── default ── */
.metal-btn-wrapper[data-variant="default"] {
    background: linear-gradient(to bottom, #000000, #A0A0A0);
}
.metal-btn-wrapper[data-variant="default"] .metal-btn-inner {
    background: linear-gradient(to bottom, #FAFAFA, #3E3E3E, #E5E5E5);
}
.metal-btn-wrapper[data-variant="default"] .metal-btn {
    background: linear-gradient(to bottom, #B9B9B9, #969696);
    color: #ffffff;
    text-shadow: 0 -1px 0 rgb(80 80 80 / 100%);
}

/* ── primary (mapped to site's #43BAFF palette) ── */
.metal-btn-wrapper[data-variant="primary"] {
    background: linear-gradient(to bottom, #000000, #A0A0A0);
}
.metal-btn-wrapper[data-variant="primary"] .metal-btn-inner {
    background: linear-gradient(to bottom, #43BAFF, #19272B, #E1F2F2);
}
.metal-btn-wrapper[data-variant="primary"] .metal-btn {
    background: linear-gradient(to bottom, #43BAFF, rgba(67, 186, 255, 0.4));
    color: #ffffff;
    text-shadow: 0 -1px 0 rgb(30 58 138 / 100%);
}

/* ── success ── */
.metal-btn-wrapper[data-variant="success"] {
    background: linear-gradient(to bottom, #005A43, #7CCB9B);
}
.metal-btn-wrapper[data-variant="success"] .metal-btn-inner {
    background: linear-gradient(to bottom, #E5F8F0, #00352F, #D1F0E6);
}
.metal-btn-wrapper[data-variant="success"] .metal-btn {
    background: linear-gradient(to bottom, #9ADBC8, #3E8F7C);
    color: #FFF7F0;
    text-shadow: 0 -1px 0 rgb(6 78 59 / 100%);
}

/* ── error ── */
.metal-btn-wrapper[data-variant="error"] {
    background: linear-gradient(to bottom, #5A0000, #FFAEB0);
}
.metal-btn-wrapper[data-variant="error"] .metal-btn-inner {
    background: linear-gradient(to bottom, #FFDEDE, #680002, #FFE9E9);
}
.metal-btn-wrapper[data-variant="error"] .metal-btn {
    background: linear-gradient(to bottom, #F08D8F, #A45253);
    color: #FFF7F0;
    text-shadow: 0 -1px 0 rgb(146 64 14 / 100%);
}

/* ── gold ── */
.metal-btn-wrapper[data-variant="gold"] {
    background: linear-gradient(to bottom, #917100, #EAD98F);
}
.metal-btn-wrapper[data-variant="gold"] .metal-btn-inner {
    background: linear-gradient(to bottom, #FFFDDD, #856807, #FFF1B3);
}
.metal-btn-wrapper[data-variant="gold"] .metal-btn {
    background: linear-gradient(to bottom, #FFEBA1, #9B873F);
    color: #FFFDE5;
    text-shadow: 0 -1px 0 rgb(178 140 2 / 100%);
}

/* ── bronze ── */
.metal-btn-wrapper[data-variant="bronze"] {
    background: linear-gradient(to bottom, #864813, #E9B486);
}
.metal-btn-wrapper[data-variant="bronze"] .metal-btn-inner {
    background: linear-gradient(to bottom, #EDC5A1, #5F2D01, #FFDEC1);
}
.metal-btn-wrapper[data-variant="bronze"] .metal-btn {
    background: linear-gradient(to bottom, #FFE3C9, #A36F3D);
    color: #FFF7F0;
    text-shadow: 0 -1px 0 rgb(124 45 18 / 100%);
}


/* ══════════════════════════════════════════════════════════
   LIQUID BUTTON
   Three-layer structure: bubble shadow → backdrop distortion
   → content. Exact shadow values from React LiquidButton.
   SVG filter (#liquid-glass) injected by metal-button.js
══════════════════════════════════════════════════════════ */

.liquid-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    border: none;
    background: transparent;
    border-radius: 8px;           /* rounded-md, same as React */
    font-size: 14px;
    font-weight: 500;
    color: #43BAFF;               /* text-primary */
    outline: none;
    white-space: nowrap;
    transition: transform 300ms ease, box-shadow 300ms ease;
    -webkit-tap-highlight-color: transparent;
}

/* hover:scale-105 (non-touch) */
.liquid-btn.is-hovered:not(.is-touch) {
    transform: scale(1.05);
}

/* ── SIZE VARIANTS (exact px from Tailwind h/px values) ── */
.liquid-btn-sm  { height: 32px;  padding: 0 16px; font-size: 12px; }
.liquid-btn-lg  { height: 40px;  padding: 0 24px; }
.liquid-btn-xl  { height: 48px;  padding: 0 32px; }
.liquid-btn-xxl { height: 56px;  padding: 0 40px; }       /* default */
.liquid-btn-icon { height: 36px; width: 36px; padding: 0; }

/* ── Layer 1: Glass bubble — rounded-full + inset shadows ── */
.liquid-btn-bubble {
    position: absolute;
    top: 0; left: 0;
    z-index: 0;
    height: 100%;
    width: 100%;
    border-radius: 9999px;        /* rounded-full (differs from btn's rounded-md) */
    pointer-events: none;
    transition: box-shadow 300ms;

    /* Light mode (same as React default) */
    box-shadow:
        0 0 6px  rgba(0,   0,   0,   0.03),
        0 2px 6px rgba(0,   0,   0,   0.08),
        inset  3px  3px 0.5px  -3px   rgba(0, 0, 0, 0.90),
        inset -3px -3px 0.5px  -3px   rgba(0, 0, 0, 0.85),
        inset  1px  1px   1px  -0.5px rgba(0, 0, 0, 0.60),
        inset -1px -1px   1px  -0.5px rgba(0, 0, 0, 0.60),
        inset  0    0    6px   6px    rgba(0, 0, 0, 0.12),
        inset  0    0    2px   2px    rgba(0, 0, 0, 0.06),
        0 0 12px rgba(255, 255, 255, 0.15);
}

/* Dark mode — used on this dark-themed site */
.liquid-btn-bubble.dark-shadow {
    box-shadow:
        0 0 8px  rgba(0,   0,   0,   0.03),
        0 2px 6px rgba(0,   0,   0,   0.08),
        inset  3px  3px 0.5px  -3.5px rgba(255, 255, 255, 0.09),
        inset -3px -3px 0.5px  -3.5px rgba(255, 255, 255, 0.85),
        inset  1px  1px   1px  -0.5px rgba(255, 255, 255, 0.60),
        inset -1px -1px   1px  -0.5px rgba(255, 255, 255, 0.60),
        inset  0    0    6px   6px    rgba(255, 255, 255, 0.12),
        inset  0    0    2px   2px    rgba(255, 255, 255, 0.06),
        0 0 12px rgba(0, 0, 0, 0.15);
}

/* ── Layer 2: Backdrop distortion (SVG liquid filter) ── */
.liquid-btn-backdrop {
    position: absolute;
    top: 0; left: 0;
    isolation: isolate;
    z-index: -10;
    height: 100%;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;           /* rounded-md, same as React */
    /* Primary: liquid distortion (Chrome/Edge) */
    backdrop-filter: url("#liquid-glass") blur(2px);
    /* Fallback: plain blur (Safari / Firefox) */
    -webkit-backdrop-filter: blur(15px);
    pointer-events: none;
}

/* ── Layer 3: Content ── */
.liquid-btn-text {
    pointer-events: none;
    position: relative;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}