/* =========================================================
   ASUSTOR AS5202T
========================================================= */

.as5202t-wrapper {

    width: 190px;
    height: 300px;

    transform:
        scale(.32);

    transform-origin:
        center center;

    flex-shrink: 0;
}


/* =========================================================
   主機
========================================================= */

.asustor-as5202t {

    width: 190px;
    height: 300px;

    background: #151518;

    border-radius: 6px;

    padding: 10px;

    box-sizing: border-box;

    display: flex;

    gap: 8px;

    box-shadow:
        0 25px 50px
        rgba(0,0,0,.8),
        inset 0 1px 1px
        rgba(255,255,255,.05);

    border: 1px solid #232328;
}


/* =========================================================
   左側控制
========================================================= */

.asustor-as5202t .left-control-strip {

    width: 32px;
    height: 100%;

    background: #1a1a1e;

    border-radius: 3px;

    display: flex;

    flex-direction: column;

    align-items: center;

    padding: 8px 0;

    box-sizing: border-box;

    border-right: 1px solid #111;
}

.asustor-as5202t .asustor-logo {

    width: 12px;
    height: 12px;

    background: #ff122b;

    clip-path:
        polygon(
            50% 0%,
            100% 35%,
            80% 100%,
            20% 100%,
            0% 35%
        );

    box-shadow:
        0 0 8px
        rgba(255,18,43,.6);

    margin-bottom: 12px;
}


/* =========================================================
   LED
========================================================= */

.asustor-as5202t .led-bar {

    display: flex;

    flex-direction: column;

    gap: 10px;
}

.asustor-as5202t .led-node {

    width: 12px;
    height: 12px;

    background: #111;

    border-radius: 50%;

    display: flex;

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

.asustor-as5202t .asu-led {

    width: 4px;
    height: 4px;

    border-radius: 50%;
}

.asustor-as5202t .power-led {

    background: #00b0ff;

    box-shadow:
        0 0 6px #00b0ff,
        0 0 2px #fff;
}

.asustor-as5202t .system-led {

    background: #00e676;

    box-shadow:
        0 0 5px #00e676;
}

.asustor-as5202t .network-led {

    background: #00e676;

    box-shadow:
        0 0 5px #00e676;
}

.asustor-as5202t .usb-led {

    background: #4f4f4f;

    box-shadow:
        0 0 5px #00e676;
}

.asustor-as5202t .hdd-led {

    background: #00e676;

    box-shadow:
        0 0 5px #00e676;

    animation:
        as5202t-flash
        1.2s
        infinite
        ease-in-out;
}

.asustor-as5202t .led-node:nth-child(5) .hdd-led {
    animation-delay: -0.2s;
}

.asustor-as5202t .led-node:nth-child(6) .hdd-led {
    animation-delay: -0.7s;
}

/* =========================================================
   底部
========================================================= */

.asustor-as5202t .strip-bottom {

    margin-top: auto;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 12px;
}

.asustor-as5202t .copy-btn {

    width: 16px;
    height: 16px;

    background: #2a2a30;

    border:
        1px solid #3a3a45;

    border-radius: 3px;
}

.asustor-as5202t .asu-usb-port {

    width: 12px;
    height: 24px;

    background: #111;

    border:
        1px solid #ff122b;

    border-radius: 1px;

    margin-top: 40px;
}


/* =========================================================
   右側面板
========================================================= */

.asustor-as5202t .diamond-cut-cover {

    flex: 1;

    height: 100%;

    background: #1b1b20;

    border-radius: 4px;

    position: relative;

    overflow: hidden;

    box-shadow:
        inset 0 0 15px
        rgba(0,0,0,.6);

    border: 1px solid #111;
}

.asustor-as5202t .asustor-text-logo {

    position: absolute;

    top: 14px;
    right: 14px;

    color: #FF2D2D;

    font-size: 11px;

    font-weight: 800;

    font-style: italic;

    letter-spacing: .8px;

    text-transform: lowercase;

    z-index: 10;

    text-shadow:
        1px 1px 2px
        rgba(0,0,0,.8);

    opacity: .9;
}


/* =========================================================
   幾何切面
========================================================= */

.asustor-as5202t .facet {

    position: absolute;

    width: 100%;
    height: 100%;

    top: 0;
    left: 0;
}

.asustor-as5202t .facet-1 {

    background:
        linear-gradient(
            135deg,
            #282830,
            #1c1c22
        );

    clip-path:
        polygon(
            0 0,
            65% 0,
            40% 45%,
            0 60%
        );
}

.asustor-as5202t .facet-2 {

    background:
        linear-gradient(
            70deg,
            #22222a,
            #15151a
        );

    clip-path:
        polygon(
            65% 0,
            100% 0,
            100% 50%,
            40% 45%
        );
}

.asustor-as5202t .facet-3 {

    background:
        linear-gradient(
            190deg,
            #18181f,
            #0f0f13
        );

    clip-path:
        polygon(
            0 60%,
            40% 45%,
            100% 50%,
            60% 100%,
            0 100%
        );
}

.asustor-as5202t .facet-4 {

    background:
        linear-gradient(
            340deg,
            #24242c,
            #191920
        );

    clip-path:
        polygon(
            100% 50%,
            100% 100%,
            60% 100%
        );
}


@keyframes as5202t-flash {

    0%,
    100% {
        opacity: 1;
        filter: brightness(1);
    }

    25% {
        opacity: .3;
    }

    50% {
        opacity: .9;
    }

    75% {
        opacity: .1;
    }

}