@keyframes aperture-rotate {
    to {
        transform: rotate(1turn);
    }
}

@keyframes flash-change {
    from {
        left: -100%;
    }

    to {
        left: 150%;
    }
}

.login-page {
    @apply w-full h-full overflow-hidden;
    background-color: #011531;

    .video-bg {
        @apply fixed z-0 right-0 bottom-0 min-w-full min-h-full h-auto w-auto object-fill;
        filter: brightness(0.7);
    }

    .header {
        @apply flex justify-center w-full bg-contain bg-no-repeat bg-center text-center text-4xl select-none;
        height: 68px;

        .span {
            background-size: 100% 100%;

            &.left {
                flex: 100 1 auto;
                background-image: url("@/assets/login-header-bg1.png");
            }

            &.center {
                flex: 1 0 590px;
                background-image: url("@/assets/login-header-bg2.png");

                .text {
                    @apply text-center font-bold bg-clip-text;
                    font-size: 36px;
                    line-height: 64px;
                    background-image: linear-gradient(0deg, #3084e8, #adf0f6 80%);
                    -webkit-text-fill-color: transparent;
                }
            }

            &.right {
                flex: 100 1 auto;
                background-image: url("@/assets/login-header-bg3.png");
            }
        }
    }

    .main {
        @apply relative flex justify-center items-center;
        height: calc(100% - 68px);

        .panel {
            @apply relative z-40 flex items-center justify-center flex-col;
            width: 487px;
            height: 487px;
            margin-top: -80px;
            background: url("@/assets/login-panel.png") no-repeat;

            .input-wrap {
                @apply flex justify-center relative;
                width: 250px;
                height: 40px;
                margin-top: 40px;
                border-bottom: 2px solid #145da5;
                background: no-repeat 0 center;
                background-size: 31px 31px;

                &.username {
                    background-image: url("@/assets/login-input-user-icon.svg");
                }

                &.password {
                    margin-top: 36px;
                    background-image: url("@/assets/login-input-password-icon.svg");
                }

                .input {
                    @apply w-full h-full outline-none bg-transparent;
                    font-size: 21px;
                    color: #8ae2ff;
                    padding-left: 50px;

                    &::-ms-input-placeholder {
                        color: #145da5;
                    }

                    &::-moz-placeholder {
                        color: #145da5;
                    }

                    &::-webkit-input-placeholder {
                        color: #145da5;
                    }

                    &:focus {
                        + .line {
                            @apply w-full;
                        }
                    }
                }

                .line {
                    @apply absolute w-0;
                    height: 2px;
                    content: " ";
                    bottom: -2px;
                    background-color: #459ef7;
                    transition: width 0.2s;
                }
            }

            .login-btn {
                @apply relative;
                margin-top: 40px;

                .button {
                    width: 120px;
                    height: 40px;
                    line-height: 40px;
                    background: url("@/assets/login-btn.png") no-repeat;
                    background-size: 100%;
                    color: #9ae1f9;
                    font-size: 18px;
                }

                .flash-wrap {
                    @apply absolute top-0 w-full h-full cursor-pointer;
                    clip-path: inset(0 0 round 10px);
                    transition: all 0.2s;

                    &:hover {
                        .flash {
                            animation: flash-change 1s ease 0s;
                        }
                    }

                    .flash {
                        @apply absolute top-0 w-1/3 h-full;
                        left: -100%;
                        background: linear-gradient(
                            to right,
                            rgba(255, 255, 255, 0) 0,
                            rgba(255, 255, 255, 0.4) 50%,
                            rgba(255, 255, 255, 0) 100%
                        );
                        transform: skewX(-45deg);
                        animation-iteration-count: infinite;
                    }
                }
            }
        }

        .aperture {
            @apply absolute z-20;
            width: 617px;
            height: 617px;
            margin-top: -80px;
            background: url("@/assets/login-aperture.png") no-repeat center center;
            background-size: contain;
            animation: aperture-rotate 12s linear infinite;
        }

        .rotating-base {
            @apply absolute z-10;
            transform: scale(0.6);
            margin-top: 510px;
            filter: brightness(2);
        }

        .module {
            @apply absolute z-30 flex justify-center items-center;
            width: 1100px;
            height: 500px;
            margin-top: -60px;

            .item {
                @apply absolute flex justify-center cursor-pointer transform-gpu select-none opacity-95;
                width: 180px;
                height: 156px;
                color: #c1ecfa;
                font-size: 22px;
                padding-top: 40px;
                background: url("@/assets/login-module-item-normal.png") no-repeat center;
                background-size: cover;
                transition: all 0.26s;

                &.can-hover:hover {
                    @apply opacity-100;
                    background-image: url("@/assets/login-module-item-hover.png");
                    transform: scale(1.06);
                }

                &.budget {
                    left: 40px;
                    top: 0;
                }

                &.estimate {
                    left: 0;
                    top: 170px;
                }

                &.util {
                    left: 80px;
                    top: 340px;
                }

                &.settlement {
                    right: 40px;
                    top: 0;
                }

                &.final {
                    right: 0;
                    top: 170px;
                }

                &.check {
                    right: 80px;
                    top: 340px;
                }
            }
        }
    }
}
