/* ==========================================================
   MyStreamix Premium Glass Button
   Parte 1 de 3
========================================================== */

/* ==========================================================
   MyStreamix Premium Glass Button
   PARTE 1/5
   CONTENEDOR · BOTÓN · BORDE
========================================================== */

.msx-button-wrap{

    display:flex;
    justify-content:center;
    align-items:center;

    width:100%;

    margin:37px auto -35px;

}

.msx-button{

    position:relative;

    width:100%;
    max-width:1040px;

    height:86px;

    overflow:hidden;

    cursor:pointer;

    border:none;

    border-radius:18px;

    background:#05060b;

    isolation:isolate;

    transition:
        transform .30s ease,
        box-shadow .30s ease;

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.10),

        inset 0 -10px 25px rgba(0,0,0,.45),

        0 0 18px rgba(0,125,255,.18),

        0 0 30px rgba(255,0,200,.12);

}

/* ==========================================================
   BORDE PREMIUM
========================================================== */

.border-glow{

    position:absolute;

    inset:0;

    padding:2px;

    border-radius:18px;

    background:
    linear-gradient(

        90deg,

        #00A8FF 0%,
        #007dff 18%,
        #4a42ff 34%,
        #7a3cff 50%,
        #d400ff 68%,
        #ff00c8 84%,
        #ff3bd1 100%

    );

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    -webkit-mask-composite:xor;
    mask-composite:exclude;

    filter:

        drop-shadow(0 0 6px rgba(0,125,255,.90))
        drop-shadow(0 0 14px rgba(0,125,255,.55))
        drop-shadow(0 0 6px rgba(255,0,200,.90))
        drop-shadow(0 0 14px rgba(255,0,200,.55));

    z-index:20;

    overflow:hidden;

    pointer-events:none;

}

.border-glow::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:

        radial-gradient(circle at 8% 50%,
            rgba(255,255,255,.95) 0%,
            rgba(255,255,255,.22) 8%,
            transparent 18%),

        radial-gradient(circle at 92% 50%,
            rgba(255,255,255,.95) 0%,
            rgba(255,255,255,.22) 8%,
            transparent 18%);

    filter:blur(2px);

    opacity:.95;

    pointer-events:none;

}

/* ==========================================================
   PARTE 2/5
   GLASS · ILUMINACIÓN
========================================================== */

.glass{

    position:absolute;

    inset:0;

    border-radius:18px;

    z-index:2;

    background:

    radial-gradient(

        circle at 8% 50%,

        rgba(35,120,255,.16) 0%,

        rgba(35,120,255,.08) 22%,

        transparent 52%

    ),

    radial-gradient(

        ellipse at center,

        rgba(110,70,255,.12) 0%,

        rgba(110,70,255,.07) 34%,

        rgba(110,70,255,.03) 58%,

        transparent 76%

    ),

    radial-gradient(

        circle at 92% 50%,

        rgba(255,0,190,.16) 0%,

        rgba(255,0,190,.08) 22%,

        transparent 52%

    ),

    linear-gradient(

        180deg,

        rgba(255,255,255,.10) 0%,

        rgba(255,255,255,.03) 16%,

        rgba(0,0,0,.04) 40%,

        rgba(0,0,0,.60) 100%

    ),

    radial-gradient(

        ellipse at center,

        rgba(0,0,0,0) 0%,

        rgba(0,0,0,.28) 68%,

        rgba(0,0,0,.72) 100%

    );

}

.glass::before{

    content:"";

    position:absolute;

    left:5%;

    top:3px;

    width:90%;

    height:18px;

    border-radius:50%;

    background:

    linear-gradient(

        180deg,

        rgba(255,255,255,.28),

        rgba(255,255,255,.08),

        transparent

    );

    filter:blur(6px);

    opacity:.95;

}

.glass::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:

linear-gradient(

    180deg,

    rgba(255,255,255,.14) 0%,

    rgba(255,255,255,.06) 18%,

    rgba(255,255,255,0) 55%

);

}

/* ==========================================================
   ILUMINACIÓN LATERAL
========================================================== */

.left-light{

    position:absolute;

    inset:0 auto 0 0;

    width:34%;

    background:

    radial-gradient(

        ellipse at left center,

        rgba(0,150,255,.62) 0%,

        rgba(0,100,255,.28) 26%,

        rgba(60,70,255,.10) 52%,

        transparent 78%

    );

    mix-blend-mode:screen;

    filter:blur(26px);

    z-index:3;

    pointer-events:none;

}

.right-light{

    position:absolute;

    inset:0 0 0 auto;

    width:34%;

    background:

    radial-gradient(

        ellipse at right center,

        rgba(255,0,210,.62) 0%,

        rgba(255,0,190,.28) 26%,

        rgba(210,0,255,.10) 52%,

        transparent 78%

    );

    mix-blend-mode:screen;

    filter:blur(26px);

    z-index:3;

    pointer-events:none;

}

.right-flare{

    position:absolute;

    right:-45px;

    top:50%;

    transform:translateY(-50%);

    width:240px;

    height:130px;

    border-radius:50%;

    background:

    radial-gradient(

        ellipse at right center,

        rgba(255,20,220,.98) 0%,

        rgba(255,20,220,.55) 22%,

        rgba(255,20,220,.22) 46%,

        rgba(255,20,220,.08) 65%,

        transparent 82%

    );

    filter:blur(20px);

    z-index:7;

    pointer-events:none;

}

/* ==========================================================
   PARTE 3/5
   PARTÍCULAS · HALO · TEXTO
========================================================== */

.particles{

    position:absolute;

    inset:0;

    z-index:8;

    overflow:hidden;

    pointer-events:none;

}

.p{

    position:absolute;

    border-radius:50%;

    background:currentColor;

    opacity:.85;

    box-shadow:

        0 0 3px currentColor,

        0 0 10px currentColor;

}

/* Halo exterior */

.msx-button::after{

    content:"";

    position:absolute;

    inset:-16px;

    border-radius:34px;

    background:

        radial-gradient(
            circle at left,
            rgba(0,120,255,.20),
            transparent 42%
        ),

        radial-gradient(
            circle at right,
            rgba(255,0,200,.20),
            transparent 42%
        );

    filter:blur(26px);

    z-index:0;

    pointer-events:none;

}

/* Texto */

.text{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    font-family:Montserrat,sans-serif;

    font-size:38px;

    font-weight:800;

    letter-spacing:1px;

    color:#fff;

    text-transform:uppercase;

    text-shadow:

        0 0 8px rgba(255,255,255,.20),

        0 0 18px rgba(255,255,255,.10);

    z-index:30;

}

/* ==========================================================
   PARTE 4/5
   DESTELLO · HOVER · CLICK
========================================================== */

/* ---------- Destello ---------- */

.shine{

    position:absolute;

    top:-35%;

    left:-55%;

    width:42%;

    height:170%;

    transform:skewX(-25deg);

    background:

    linear-gradient(

        90deg,

        rgba(255,255,255,0) 0%,

        rgba(255,255,255,.08) 15%,

        rgba(255,255,255,.35) 35%,

        rgba(255,255,255,.98) 50%,

        rgba(255,255,255,.35) 65%,

        rgba(255,255,255,.08) 85%,

        rgba(255,255,255,0) 100%

    );

    filter:blur(6px);

    z-index:25;

    pointer-events:none;

}

/* ---------- Hover ---------- */

.msx-button:hover{

    transform:translateY(-2px);

    box-shadow:

        inset 0 2px 0 rgba(255,255,255,.30),

        inset 0 -10px 25px rgba(0,0,0,.45),

        0 0 24px rgba(0,125,255,.22),

        0 0 18px rgba(255,255,255,.12),

        0 0 34px rgba(255,0,200,.10);

}

/* ---------- Click ---------- */

.msx-button:active{

    transform:scale(.985);

}


/* ---------- Responsive ---------- */

@media (max-width:768px){
    
    .msx-button-wrap{

    margin:20px auto -35px;

}

    .msx-button{

        height:60px;

        border-radius:22px;

    }

    .border-glow{

        border-radius:22px;

    }

    .glass{

        border-radius:22px;

    }

    .text{

        font-size:22px;

        letter-spacing:.3px;

    }

    .left-light{

        width:48%;

        background:
        radial-gradient(
            ellipse at 0% 50%,
            rgba(0,160,255,.95) 0%,
            rgba(0,120,255,.60) 22%,
            rgba(0,80,255,.28) 48%,
            rgba(0,40,255,.08) 72%,
            transparent 88%
        );

        left:0;

        height:100%;

    }

    .right-light{

        width:48%;

    }

    .right-flare{

        width:180px;

        height:110px;

        right:-38px;

    }

}