/*
 * ==========================================================
 * GSDN - TRAIN BACKGROUND
 * ==========================================================
 *
 * TÀU:
 *   train-journey.png: 562 x 43 px
 *
 * ĐOÀN TÀU CHIỀU VỀ:
 *   569 px
 *
 * CẦU:
 *   599 x 79 px
 *
 * RUNNER:
 *   bottom: 81px
 *
 * CẦU:
 *   bottom: 79px
 *
 * RAY:
 *   bottom: 73px
 *
 * SCENE:
 *   clamp(330px, 48vw, 500px)
 *
 * LANDSCAPE:
 *   Mặt trời + Đồi + Cây + Ray
 *
 * TÍN HIỆU VÀO GA:
 *
 *   Cơ cấu 1:
 *     Vàng
 *     Đỏ
 *
 *   Cơ cấu 2:
 *     Vàng
 *     Lục
 *
 *   Cơ cấu 3:
 *     Sữa
 *
 * Trạng thái mặc định:
 *   LỤC SÁNG
 * ==========================================================
 */


/* ==========================================================
   RESET
   ========================================================== */

html,
body{
    width:100%;
    min-height:100%;
    margin:0;
}

body{
    position:relative;

    min-height:100vh;

    overflow:hidden;

    isolation:isolate;

    background:
        radial-gradient(
            circle at 78% 40%,
            rgba(24,175,229,.08),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            #f9fdff 0%,
            #ffffff 64%,
            #eaf7f4 100%
        ) !important;
}


/* ==========================================================
   LOGIN
   ========================================================== */

.login-card{
    position:relative;

    z-index:20;
}


/* ==========================================================
   BACKGROUND TÀU
   ========================================================== */

.train-effect-background{
    position:fixed;

    inset:0;

    z-index:2;

    overflow:hidden;

    pointer-events:none;
    user-select:none;

    background:transparent;
}


/* ==========================================================
   SCENE
   ========================================================== */

.train-effect-scene{
    position:absolute;

    left:0;
    right:0;
    bottom:0;

    z-index:2;

    width:100%;

    height:clamp(
        330px,
        48vw,
        500px
    );

    min-height:clamp(
        330px,
        48vw,
        500px
    );

    overflow:hidden;
}


/* ==========================================================
   TRACK
   ========================================================== */

.train-effect-track{
    position:absolute;

    inset:0;

    z-index:4;

    overflow:hidden;
}


/* ==========================================================
   RUNNER
   ========================================================== */

.train-effect-runner{
    position:absolute;

    left:0;

    bottom:81px;

    z-index:4;

    line-height:0;

    visibility:hidden;

    will-change:transform;

    transform:
        translate3d(-300vw,0,0);
}


/* ==========================================================
   TÀU CHIỀU ĐI
   ========================================================== */

.train-effect-runner:not(
    .train-effect-consist
){
    width:min(
        562px,
        76vw
    );
}


.train-effect-journey{
    display:block;

    width:100%;
    height:auto;

    max-width:none;

    object-fit:contain;

    filter:
        drop-shadow(
            0 5px 4px
            rgba(13,42,54,.22)
        );
}


/* ==========================================================
   TÀU CHIỀU VỀ
   ========================================================== */

.train-effect-consist{
    display:flex;

    align-items:flex-end;

    width:min(
        569px,
        76vw
    );

    gap:0;

    white-space:nowrap;

    filter:
        drop-shadow(
            0 5px 4px
            rgba(13,42,54,.22)
        );
}


.train-effect-consist img{
    display:block;

    flex:0 0 auto;

    height:auto;

    max-width:none;

    object-fit:contain;

    margin:0;
}


/*
 * Đầu máy
 * 122 / 569
 */

.train-effect-consist img:first-child{
    width:21.442%;
}


/*
 * Mỗi toa
 * 149 / 569
 */

.train-effect-consist img:not(
    :first-child
){
    width:26.186%;
}


.train-effect-consist img + img{
    margin-left:0;
}


/* ==========================================================
   CẦU
   ========================================================== */

.train-effect-bridge{
    position:absolute;

    z-index:5;

    left:clamp(
        0px,
        3vw,
        40px
    );

    bottom:79px;

    width:min(
        599px,
        82vw
    );

    height:auto;

    pointer-events:none;

    filter:
        drop-shadow(
            0 5px 3px
            rgba(17,56,71,.16)
        );
}


.train-effect-bridge img{
    display:block;

    width:100%;
    height:auto;

    max-width:none;

    object-fit:contain;
}


/* ==========================================================
   SHADOW DƯỚI TÀU
   ========================================================== */

.train-effect-shadow{
    position:absolute;

    left:0;
    right:0;

    bottom:73px;

    z-index:1;

    height:7px;

    opacity:.16;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(20,45,56,.40) 12%,
            rgba(20,45,56,.40) 88%,
            transparent
        );

    filter:blur(3px);
}


/* ==========================================================
   LANDSCAPE
   ========================================================== */

.train-journey-landscape{
    --journey-blue:#0578b8;
    --journey-cyan:#18afe5;
    --journey-mint:#55c2ad;

    position:fixed;

    left:0;
    right:0;
    bottom:0;

    z-index:1;

    width:100%;

    height:clamp(
        330px,
        48vw,
        500px
    );

    overflow:hidden;

    pointer-events:none;
    user-select:none;
}


/* ==========================================================
   MẶT TRỜI
   ========================================================== */

.train-journey__sun{
    position:absolute;

    z-index:0;

    top:auto;

    bottom:48%;

    right:clamp(
        45px,
        8vw,
        130px
    );

    width:clamp(
        50px,
        6vw,
        82px
    );

    aspect-ratio:1;

    border-radius:50%;

    background:
        rgba(
            255,
            203,
            85,
            .72
        );

    box-shadow:
        0 0 0 18px
        rgba(
            255,
            203,
            85,
            .10
        );
}


/* ==========================================================
   ĐỒI
   ========================================================== */

.train-journey__hills,
.train-journey__hills::before,
.train-journey__hills::after{
    position:absolute;

    border-radius:
        50% 50% 0 0;

    content:"";
}


.train-journey__hills{
    z-index:0;

    left:15%;
    right:-8%;

    bottom:73px;

    width:auto;

    height:36%;

    border-top:
        2px solid
        rgba(
            5,
            120,
            184,
            .32
        );

    background:
        repeating-linear-gradient(
            166deg,

            rgba(
                5,
                120,
                184,
                .16
            ) 0,

            rgba(
                5,
                120,
                184,
                .16
            ) 1px,

            transparent 1px,
            transparent 8px
        );

    transform:
        skewX(-8deg);
}


/* Đồi phụ */

.train-journey__hills::before{
    right:42%;

    bottom:0;

    width:72%;
    height:68%;

    border-top:
        2px solid
        rgba(
            5,
            120,
            184,
            .18
        );

    background:
        rgba(
            85,
            194,
            173,
            .09
        );
}


/* ==========================================================
   CÂY
   ========================================================== */

.train-journey__trees{
    position:absolute;

    z-index:2;

    right:5%;

    bottom:66px;

    width:clamp(
        42px,
        6vw,
        78px
    );

    height:clamp(
        62px,
        8vw,
        105px
    );

    filter:
        drop-shadow(
            62px
            15px
            0
            rgba(
                85,
                194,
                173,
                .65
            )
        );
}


/* Tán cây */

.train-journey__trees::before{
    content:"";

    position:absolute;

    inset:
        0 10% 25%;

    border-radius:
        48% 52%
        44% 56%;

    background:
        var(
            --journey-mint
        );
}


/* Thân cây */

.train-journey__trees::after{
    content:"";

    position:absolute;

    bottom:0;

    left:50%;

    width:4px;
    height:54%;

    background:#087cb2;

    transform:
        translateX(-50%);
}


/* ==========================================================
   RAY
   ========================================================== */

.train-journey__rail{
    position:absolute;

    z-index:3;

    left:0;
    right:0;

    bottom:73px;

    height:12px;

    border-top:
        4px solid #40565f;

    border-bottom:
        3px solid #8da0a8;

    background:
        repeating-linear-gradient(
            90deg,

            #40565f
            0 6px,

            transparent
            6px 32px
        );
}


/* ==========================================================
   GROUND
   ========================================================== */

.train-effect-ground{
    position:absolute;

    z-index:2;

    left:0;
    right:0;
    bottom:0;

    height:74px;

    border-top:
        5px solid #71858e;

    background:
        repeating-linear-gradient(
            90deg,

            transparent
            0 54px,

            rgba(
                255,
                255,
                255,
                .96
            )
            54px 126px
        ),
        #eef1f2;

    background-position:
        0 15px;

    background-size:
        auto 8px;

    background-repeat:
        repeat-x;
}


/* ==========================================================
   TÍN HIỆU VÀO GA
   ========================================================== */

.station-entry-signal{
    position:absolute;

    /*
     * Vị trí cột bên phải cầu
     */

    right:15%;

    /*
     * Chân cột sát mặt ray
     */

    bottom:84px;

    width:70px;

    /*
     * Cao hơn tín hiệu thường
     * để đủ 3 cơ cấu
     */

    height:248px;

    z-index:4;

    pointer-events:none;
}


/* ==========================================================
   THÂN CỘT
   ========================================================== */

.station-entry-signal__mast{
    position:absolute;

    left:50%;

    bottom:8px;

    width:9px;

    height:190px;

    transform:
        translateX(-50%);

    border-radius:
        3px 3px 0 0;

    background:
        linear-gradient(
            90deg,

            #394d56 0%,

            #72858d 45%,

            #354951 100%
        );

    box-shadow:
        2px 0 2px
        rgba(0,0,0,.16);
}


/* ==========================================================
   CHÂN CỘT
   ========================================================== */

.station-entry-signal__base{
    position:absolute;

    left:50%;

    bottom:0;

    width:38px;

    height:9px;

    transform:
        translateX(-50%);

    border-radius:3px;

    background:#40565f;

    box-shadow:
        0 3px 5px
        rgba(0,0,0,.20);
}


/* Bệ đỡ */

.station-entry-signal__base::before{
    content:"";

    position:absolute;

    left:50%;

    bottom:7px;

    width:22px;

    height:14px;

    transform:
        translateX(-50%);

    background:#60757e;

    clip-path:
        polygon(
            18% 0,
            82% 0,
            100% 100%,
            0 100%
        );
}


/* ==========================================================
   THANG KỸ THUẬT
   ========================================================== */

.station-entry-signal__ladder{
    position:absolute;

    left:40px;

    bottom:18px;

    width:13px;

    height:165px;

    border-left:
        2px solid #566a73;

    border-right:
        2px solid #566a73;

    background:
        repeating-linear-gradient(
            180deg,

            transparent
            0 9px,

            #566a73
            9px 11px
        );

    opacity:.9;
}


/* ==========================================================
   CÁC CƠ CẤU TÍN HIỆU
   ========================================================== */

.signal-mechanism{
    position:absolute;

    left:50%;

    transform:
        translateX(-50%);

    width:48px;

    background:
        linear-gradient(
            90deg,

            #18282e,

            #2d4149 48%,

            #17262c
        );

    border:
        3px solid #344951;

    border-radius:
        19px 19px 13px 13px;

    box-shadow:
        0 5px 9px
        rgba(0,0,0,.23);

    z-index:5;
}


/* ==========================================================
   MÁI / CHỤP CƠ CẤU
   ========================================================== */

.signal-mechanism::before{
    content:"";

    position:absolute;

    left:50%;

    top:-8px;

    width:52px;

    height:14px;

    transform:
        translateX(-50%);

    border-radius:
        50% 50% 16% 16%;

    background:#263b43;
}


/* ==========================================================
   CƠ CẤU 1
   VÀNG - ĐỎ
   ========================================================== */

.signal-mechanism--1{
    top:0;

    height:67px;
}


/* ==========================================================
   CƠ CẤU 2
   VÀNG - LỤC
   ========================================================== */

.signal-mechanism--2{
    top:76px;

    height:67px;
}


/* ==========================================================
   CƠ CẤU 3
   SỮA
   ========================================================== */

.signal-mechanism--3{
    top:152px;

    width:43px;

    height:45px;
}


/* ==========================================================
   BÓNG ĐÈN
   ========================================================== */

.signal-light{
    position:absolute;

    left:50%;

    width:18px;

    height:18px;

    transform:
        translateX(-50%);

    border-radius:50%;

    border:
        2px solid #0e181c;

    background:#172327;

    box-shadow:
        inset 0 0 4px
        rgba(0,0,0,.8);
}


/* Chụp bóng */

.signal-light::before{
    content:"";

    position:absolute;

    left:50%;

    top:-5px;

    width:25px;

    height:9px;

    transform:
        translateX(-50%);

    border-radius:
        50% 50% 0 0;

    background:#263940;

    z-index:-1;
}


/* ==========================================================
   VỊ TRÍ ĐÈN CƠ CẤU 1
   ========================================================== */

/*
 * Cơ cấu 1:
 *
 * trên = VÀNG
 * dưới = ĐỎ
 */

.signal-mechanism--1
.signal-light:first-child{
    top:7px;
}


.signal-mechanism--1
.signal-light:nth-child(2){
    top:36px;
}


/* ==========================================================
   VỊ TRÍ ĐÈN CƠ CẤU 2
   ========================================================== */

/*
 * Cơ cấu 2:
 *
 * trên = VÀNG
 * dưới = LỤC
 */

.signal-mechanism--2
.signal-light:first-child{
    top:7px;
}


.signal-mechanism--2
.signal-light:nth-child(2){
    top:36px;
}


/* ==========================================================
   VỊ TRÍ ĐÈN CƠ CẤU 3
   ========================================================== */

.signal-mechanism--3
.signal-light{
    top:11px;
}


/* ==========================================================
   MÀU TẮT
   ========================================================== */


/* VÀNG TẮT */

.signal-light--yellow{
    background:
        radial-gradient(
            circle at 38% 32%,

            #756d3c 0%,

            #574f28 50%,

            #3a361f 100%
        );
}


/* ĐỎ TẮT */

.signal-light--red{
    background:
        radial-gradient(
            circle at 38% 32%,

            #733636 0%,

            #562828 50%,

            #351b1b 100%
        );
}


/* LỤC TẮT */

.signal-light--green{
    background:
        radial-gradient(
            circle at 38% 32%,

            #315c3b 0%,

            #23462d 50%,

            #172e1e 100%
        );
}


/* SỮA TẮT */

.signal-light--white{
    background:
        radial-gradient(
            circle at 38% 32%,

            #77776c 0%,

            #57574f 50%,

            #373732 100%
        );
}


/* ==========================================================
   ĐÈN ĐỎ SÁNG
   ========================================================== */

.signal-light--red.signal-light--on{
    background:
        radial-gradient(
            circle at 38% 32%,

            #ffd3d3 0%,

            #ff6868 26%,

            #e32626 62%,

            #9d1010 100%
        );

    box-shadow:
        0 0 8px
        rgba(239,68,68,1),

        0 0 16px
        rgba(239,68,68,.75),

        0 0 28px
        rgba(239,68,68,.40),

        inset 0 0 4px
        rgba(255,255,255,.8);
}


/* ==========================================================
   ĐÈN VÀNG SÁNG
   ========================================================== */

.signal-light--yellow.signal-light--on{
    background:
        radial-gradient(
            circle at 38% 32%,

            #fffbd1 0%,

            #ffe768 26%,

            #e7b91f 62%,

            #9b7605 100%
        );

    box-shadow:
        0 0 8px
        rgba(250,204,21,1),

        0 0 16px
        rgba(250,204,21,.75),

        0 0 28px
        rgba(250,204,21,.38),

        inset 0 0 4px
        rgba(255,255,255,.8);
}


/* ==========================================================
   ĐÈN LỤC SÁNG
   ========================================================== */

.signal-light--green.signal-light--on{
    background:
        radial-gradient(
            circle at 38% 32%,

            #c9ffd7 0%,

            #53e77d 25%,

            #19b94e 62%,

            #098534 100%
        );

    box-shadow:
        0 0 8px
        rgba(34,197,94,1),

        0 0 16px
        rgba(34,197,94,.80),

        0 0 28px
        rgba(34,197,94,.42),

        inset 0 0 4px
        rgba(255,255,255,.8);
}


/* ==========================================================
   ĐÈN SỮA SÁNG
   ========================================================== */

.signal-light--white.signal-light--on{
    background:
        radial-gradient(
            circle at 38% 32%,

            #ffffff 0%,

            #fffde8 30%,

            #efe9c8 65%,

            #c8c2a3 100%
        );

    box-shadow:
        0 0 8px
        rgba(255,255,235,.95),

        0 0 16px
        rgba(255,255,220,.65),

        0 0 26px
        rgba(255,255,220,.35),

        inset 0 0 4px
        rgba(255,255,255,.95);
}


/* ==========================================================
   THỨ TỰ LỚP
   ========================================================== */

.train-effect-scene{
    z-index:2;
}

.train-effect-track{
    z-index:4;
}

.train-effect-runner{
    z-index:4;
}

.train-effect-bridge{
    z-index:5;
}

.station-entry-signal{
    z-index:4;
}

.login-card{
    z-index:20;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:640px){

    body{
        overflow:auto;
    }


    /* ======================================================
       SCENE
       ====================================================== */

    .train-effect-scene{
        height:390px;

        min-height:390px;
    }


    .train-journey-landscape{
        height:390px;
    }


    /* ======================================================
       MẶT TRỜI
       ====================================================== */

    .train-journey__sun{
        right:30px;

        bottom:52%;

        width:54px;

        box-shadow:
            0 0 0 13px
            rgba(
                255,
                203,
                85,
                .10
            );
    }


    /* ======================================================
       ĐỒI
       ====================================================== */

    .train-journey__hills{
        left:5%;

        right:-18%;

        height:30%;
    }


    /* ======================================================
       CÂY
       ====================================================== */

    .train-journey__trees{
        right:5%;

        width:44px;

        height:65px;

        filter:
            drop-shadow(
                44px
                12px
                0
                rgba(
                    85,
                    194,
                    173,
                    .65
                )
            );
    }


    /* ======================================================
       CẦU
       ====================================================== */

    .train-effect-bridge{
        left:-7%;

        width:96vw;
    }


    /* ======================================================
       TÀU
       ====================================================== */

    .train-effect-runner:not(
        .train-effect-consist
    ){
        width:76vw;
    }


    .train-effect-consist{
        width:76vw;
    }


    /* ======================================================
       CỘT TÍN HIỆU VÀO GA
       ====================================================== */

    .station-entry-signal{
        right:8%;

        bottom:84px;

        width:52px;

        height:180px;
    }


    /* ======================================================
       THÂN CỘT MOBILE
       ====================================================== */

    .station-entry-signal__mast{
        width:7px;

        height:137px;
    }


    /* ======================================================
       CHÂN CỘT MOBILE
       ====================================================== */

    .station-entry-signal__base{
        width:29px;

        height:7px;
    }


    .station-entry-signal__base::before{
        width:17px;

        height:10px;
    }


    /* ======================================================
       THANG MOBILE
       ====================================================== */

    .station-entry-signal__ladder{
        left:31px;

        bottom:17px;

        width:10px;

        height:110px;

        border-left-width:1.5px;

        border-right-width:1.5px;
    }


    /* ======================================================
       CƠ CẤU MOBILE
       ====================================================== */

    .signal-mechanism{
        width:35px;

        border-width:2px;

        border-radius:
            14px 14px 10px 10px;
    }


    .signal-mechanism::before{
        width:39px;

        height:10px;

        top:-6px;
    }


    /* Cơ cấu 1 */

    .signal-mechanism--1{
        top:0;

        height:51px;
    }


    /* Cơ cấu 2 */

    .signal-mechanism--2{
        top:58px;

        height:51px;
    }


    /* Cơ cấu 3 */

    .signal-mechanism--3{
        top:116px;

        width:32px;

        height:34px;
    }


    /* ======================================================
       BÓNG MOBILE
       ====================================================== */

    .signal-light{
        width:13px;

        height:13px;

        border-width:1.5px;
    }


    .signal-light::before{
        width:18px;

        height:7px;

        top:-4px;
    }


    /* Cơ cấu 1 */

    .signal-mechanism--1
    .signal-light:first-child{
        top:5px;
    }


    .signal-mechanism--1
    .signal-light:nth-child(2){
        top:27px;
    }


    /* Cơ cấu 2 */

    .signal-mechanism--2
    .signal-light:first-child{
        top:5px;
    }


    .signal-mechanism--2
    .signal-light:nth-child(2){
        top:27px;
    }


    /* Cơ cấu 3 */

    .signal-mechanism--3
    .signal-light{
        top:8px;
    }
}


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

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

    .train-effect-runner{
        animation:none !important;
    }
}