/* ==========================================================
   RUSSOS AMS X1
   POWER.CSS
   INDUSTRIAL POWER BUTTON
========================================================== */


/* ==========================================================
   POWER BUTTON
========================================================== */

.power-btn{

    position:relative;

    width:58px;
    height:58px;

    flex:0 0 58px;

    padding:0;

    border:0;
    outline:none;

    border-radius:50%;

    cursor:pointer;

    background:
        radial-gradient(
            circle at 35% 30%,
            #697584 0%,
            #46515E 28%,
            #252D36 62%,
            #11151A 100%
        );

    border-top:2px solid rgba(255,255,255,.18);
    border-left:2px solid rgba(255,255,255,.07);
    border-right:2px solid #090C10;
    border-bottom:3px solid #07090C;

    box-shadow:

        inset 0 2px 3px rgba(255,255,255,.10),

        inset 0 -5px 8px rgba(0,0,0,.82),

        0 2px 5px rgba(0,0,0,.85);

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

    -webkit-tap-highlight-color:transparent;

    pointer-events:auto;

}


/* ==========================================================
   POWER RING
========================================================== */

.power-ring{

    position:absolute;

    inset:6px;

    display:flex;

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

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            #182027 0%,
            #0E1318 72%,
            #090C10 100%
        );

    border:1px solid #070A0D;

    box-shadow:

        inset 0 2px 3px rgba(255,255,255,.06),

        inset 0 -3px 5px rgba(0,0,0,.85);

}


/* ==========================================================
   POWER RING LIGHT
========================================================== */

.power-ring::before{

    content:"";

    position:absolute;

    inset:4px;

    border-radius:50%;

    border:1px solid rgba(70,80,90,.35);

    box-shadow:none;

    pointer-events:none;

    transition:

        border-color .35s ease,

        box-shadow .35s ease;

}


/* ==========================================================
   POWER CENTER
========================================================== */

.power-center{

    position:relative;

    left:0px;

    width:32px;
    height:32px;

    display:flex;

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

    border-radius:50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #3A444F 0%,
            #252D35 45%,
            #11151A 100%
        );

    border-top:1px solid rgba(255,255,255,.12);
    border-left:1px solid rgba(255,255,255,.04);

    border-right:1px solid rgba(0,0,0,.55);
    border-bottom:2px solid rgba(0,0,0,.82);

    box-shadow:

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

        inset 0 -4px 6px rgba(0,0,0,.75);

    transition:

        transform .08s ease;

}


/* ==========================================================
   POWER ICON
========================================================== */

.power-icon{

    position:relative;

    display:block;

    width:16px;
    height:20px;

    font-size:0;

    color:transparent;

}


/* ==========================================================
   POWER SYMBOL — VERTICAL BAR
========================================================== */

.power-icon::before{

    content:"";

    position:absolute;

    top:0;
    left:50%;

    width:2px;
    height:9px;

    transform:translateX(-50%);

    border-radius:2px;

    background:#4D5965;

    box-shadow:none;

}


/* ==========================================================
   POWER SYMBOL — CIRCLE
========================================================== */

.power-icon::after{

    content:"";

    position:absolute;

    left:50%;
    bottom:0;

    width:15px;
    height:15px;

    transform:translateX(-50%);

    border:2px solid #4D5965;

    border-top-color:transparent;

    border-radius:50%;

    box-shadow:none;

}


/* ==========================================================
   POWER STATE — OFF
========================================================== */

.power-btn.is-off .power-ring::before{

    border-color:rgba(70,80,90,.35);

    box-shadow:none;

}

.power-btn.is-off .power-icon{

    color:#4D5965;

    text-shadow:none;

}

.power-btn.is-off .power-icon::before{

    background:#4D5965;

    box-shadow:none;

}

.power-btn.is-off .power-icon::after{

    border-color:#4D5965;

    border-top-color:transparent;

    box-shadow:none;

}


/* ==========================================================
   POWER STATE — ON
========================================================== */

.power-btn.is-on .power-ring::before{

    border-color:rgba(0,242,254,.32);

    box-shadow:

        0 0 4px rgba(0,242,254,.20),

        0 0 8px rgba(0,242,254,.07);

}

.power-btn.is-on .power-icon{

    color:#9FFFFF;

    text-shadow:

        0 0 5px rgba(0,242,254,.65),

        0 0 12px rgba(0,242,254,.25);

}

.power-btn.is-on .power-icon::before{

    background:#00EAF5;

    box-shadow:

        0 0 4px rgba(0,242,254,.60),

        0 0 8px rgba(0,242,254,.22);

}

.power-btn.is-on .power-icon::after{

    border-color:#00EAF5;

    border-top-color:transparent;

    box-shadow:

        0 0 4px rgba(0,242,254,.50),

        0 0 8px rgba(0,242,254,.18);

}


/* ==========================================================
   HOVER
========================================================== */

.power-btn:hover{

    transform:translateY(-1px);

    box-shadow:

        inset 0 2px 3px rgba(255,255,255,.12),

        inset 0 -5px 8px rgba(0,0,0,.84),

        0 4px 8px rgba(0,0,0,.80);

}


/* ==========================================================
   HOVER — ON
========================================================== */

.power-btn.is-on:hover .power-ring::before{

    border-color:rgba(0,242,254,.42);

    box-shadow:

        0 0 5px rgba(0,242,254,.25),

        0 0 10px rgba(0,242,254,.10);

}


/* ==========================================================
   PRESS
========================================================== */

.power-btn:active{

    transform:translateY(1px) scale(.97);

    box-shadow:

        inset 0 3px 6px rgba(0,0,0,.88),

        0 1px 3px rgba(0,0,0,.80);

}

.power-btn:active .power-center{

    transform:translateY(1px);

}


/* ==========================================================
   FOCUS
========================================================== */

.power-btn:focus-visible{

    outline:1px solid rgba(0,242,254,.45);

    outline-offset:3px;

}


/* ==========================================================
   NO PERMANENT ANIMATION
========================================================== */

.power-btn{

    animation:none;

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

    .power-btn,
    .power-center,
    .power-ring::before{

        transition:none;

    }

}