/**
 * DataPulseX — Liquid metal ring (CSS chromatic teal · inspirado em metal-fx)
 * Uso: wrap do botão em .dpx-metal-host > .dpx-metal-fx + .dpx-metal-core > botão
 */

:root {
    --dpx-metal-c1: #8B5CF6;
    --dpx-metal-c2: #C4B5FD;
    --dpx-metal-c3: #6D28D9;
    --dpx-metal-c4: #A78BFA;
    --dpx-metal-ring: 2px;
    --dpx-metal-strength: 0.9;
    --dpx-metal-speed: 5s;
    --dpx-metal-glow: rgba(139, 92, 246, 0.45);
}

.dpx-metal-host {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    max-width: 100%;
    border-radius: var(--dpx-metal-radius, 8px);
    isolation: isolate;
}

.dpx-metal-host--pill {
    --dpx-metal-radius: 999px;
}

.dpx-metal-host--rounded {
    --dpx-metal-radius: 8px;
}

.dpx-metal-fx {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    opacity: var(--dpx-metal-strength, 0.9);
    filter: drop-shadow(0 0 14px var(--dpx-metal-glow));
}

.dpx-metal-fx::before {
    content: "";
    position: absolute;
    inset: -40%;
    border-radius: inherit;
    background: conic-gradient(
        from var(--dpx-metal-angle, 0deg),
        var(--dpx-metal-c1) 0deg,
        var(--dpx-metal-c2) 72deg,
        var(--dpx-metal-c3) 144deg,
        var(--dpx-metal-c4) 216deg,
        var(--dpx-metal-c2) 288deg,
        var(--dpx-metal-c1) 360deg
    );
    animation: dpx-metal-spin var(--dpx-metal-speed) linear infinite;
}

.dpx-metal-fx::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: var(--dpx-metal-ring);
    background: conic-gradient(
        from var(--dpx-metal-angle, 0deg),
        var(--dpx-metal-c1),
        var(--dpx-metal-c2),
        var(--dpx-metal-c3),
        var(--dpx-metal-c4),
        var(--dpx-metal-c2),
        var(--dpx-metal-c1)
    );
    animation: dpx-metal-spin var(--dpx-metal-speed) linear infinite;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
}

.dpx-metal-core {
    position: relative;
    z-index: 1;
    display: inline-flex;
    border-radius: inherit;
    max-width: 100%;
}

.dpx-metal-core > .inst-btn,
.dpx-metal-core > .btn-submit,
.dpx-metal-core > .dpx-install-hint__cta,
.dpx-metal-core > .cmd-btn-primary,
.dpx-metal-core > a,
.dpx-metal-core > button {
    border-radius: inherit !important;
    position: relative;
    z-index: 1;
}

/* Landing primary dentro do metal */
.dpx-metal-core > .inst-btn-primary,
.dpx-metal-core > button.inst-btn-primary {
    background: linear-gradient(135deg, var(--inst-accent, #8B5CF6) 0%, var(--inst-accent-deep, #6D28D9) 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 8px 24px rgba(139, 92, 246, 0.22) !important;
}

.dpx-metal-core > .inst-btn-primary:hover {
    filter: brightness(1.06);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.22) inset,
        0 12px 32px rgba(139, 92, 246, 0.35) !important;
}

/* Auth submit */
.dpx-metal-core > .btn-submit {
    width: 100%;
    background: linear-gradient(135deg, var(--accent, #8B5CF6) 0%, var(--accent-ink, #6D28D9) 100%) !important;
    background-image: linear-gradient(135deg, var(--accent, #8B5CF6) 0%, var(--accent-ink, #6D28D9) 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 8px 22px rgba(var(--accent-rgb, 139, 92, 246), 0.28) !important;
    font-weight: 600 !important;
}

.dpx-metal-core > .btn-submit:hover {
    filter: brightness(1.05);
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
}

/* Install hint CTA */
.dpx-metal-host--compact {
    --dpx-metal-ring: 1.5px;
}

.dpx-metal-core > .dpx-install-hint__cta {
    background: linear-gradient(135deg, var(--accent, #8B5CF6) 0%, #6D28D9 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

@keyframes dpx-metal-spin {
    to {
        --dpx-metal-angle: 360deg;
    }
}

@property --dpx-metal-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.dpx-metal-host--paused .dpx-metal-fx::before,
.dpx-metal-host--paused .dpx-metal-fx::after {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .dpx-metal-fx::before,
    .dpx-metal-fx::after {
        animation: none;
        --dpx-metal-angle: 42deg;
    }

    .dpx-metal-fx {
        filter: none;
    }
}

/* Presets (opcional via data-metal-preset) */
.dpx-metal-host[data-metal-preset="silver"] {
    --dpx-metal-c1: #cbd5e1;
    --dpx-metal-c2: #f8fafc;
    --dpx-metal-c3: #94a3b8;
    --dpx-metal-c4: #e2e8f0;
    --dpx-metal-glow: rgba(248, 250, 252, 0.25);
}

.dpx-metal-host[data-metal-preset="gold"] {
    --dpx-metal-c1: #fbbf24;
    --dpx-metal-c2: #fde68a;
    --dpx-metal-c3: #d97706;
    --dpx-metal-c4: #f59e0b;
    --dpx-metal-glow: rgba(251, 191, 36, 0.35);
}

.dpx-metal-host[data-metal-strength="0.5"] { --dpx-metal-strength: 0.5; }
.dpx-metal-host[data-metal-strength="0.75"] { --dpx-metal-strength: 0.75; }
.dpx-metal-host[data-metal-strength="1"] { --dpx-metal-strength: 1; }