:root {
    --default: 32rem;
    --login-width: 40rem;
    --login-height: 32rem;
    --logo-size: 5rem;
    --logo-width: 30%;
    --right-padding: 24px;
    --input_height: 48px;
}

body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #263238;
}

#app:hover>#bg {
    top: 0;
    transform: translateX(0vw) translateY(0px) rotateX(0deg) rotateZ(0deg);
    filter: blur(0px);
}

#app:hover>#bg>* {
    font-size: 18px !important;
}

#app {
    width: 100%;
    height: 100%;
}

.login {
    width: var(--login-width);
    height: var(--login-height);
    background: rgba(255, 255, 255, 1);
    border-radius: 10px;
    display: grid;
    grid-template-columns: var(--logo-width) calc(100% - var(--logo-width));
    grid-template-rows: var(--login-height);
    -webkit-transition: all ease .5s;
    transition: all ease .5s;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.login>.left {
    border-right: solid 1px rgba(0, 0, 0, 0.1);
    /*竖线*/
    -webkit-transition: all ease .3s;
    transition: all ease .3s;
}

.login>.left:hover {
    border-right: solid 1px rgba(9, 101, 100, 0.5);
    /*竖线*/
}

.login>.left>.logo {
    width: var(--logo-size);
    height: var(--logo-size);
    border-radius: 100%;
    margin-top: calc(var(--login-height) / 2 - var(--logo-size) / 2);
    margin-left: calc(50% - var(--logo-size) / 2);
    box-shadow: 0 5px 5px rgb(0 0 0 / 20%);
    transition: all ease .5s;
    cursor: pointer;
    position: relative;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center center;
    z-index: 99;
}

.login>.left>.logo:hover {
    --logo-size: 24rem;
    border: solid 10px #fff;
    animation: fadein 1s forwards;
    animation-duration: 2s; /* 设置动画持续时间 */
    animation-iteration-count: 1; /* 无限重复动画 */
}

.login>.right {
    padding: var(--right-padding);
    position: relative;
}

.login>.right>.title {
    height: calc(var(--input_height) + 16px);
    line-height: calc(var(--input_height) + 16px);
    font-size: 32px;
    text-align: center;
    cursor: default;
}

.login>.right>.msg {
    color: #c8cacc;
    text-align: center;
    height: 2rem;
    font-size: 1rem;
    line-height: 2rem;
    letter-spacing: 0.3rem;
    animation: msg 2s infinite;
    animation-duration: 2s;
    -webkit-animation: msg 2s infinite;
}

input {
    width: calc(100% - var(--right-padding));
    height: var(--input_height);
    margin: 12px 0;
    margin-bottom: 12px;
    padding-left: 12px;
    border: none;
    border-bottom: dashed 1px rgba(0, 0, 0, 0.1);
    outline: none;
    font-size: 18px;
    transition: all ease .5s;
    transform-style: preserve-3d;
    background-color: transparent;

}

input:focus,
input:hover {
    border: none;
    border-bottom: solid 1px rgba(9, 101, 100, 0.3);
    /*竖线*/
    color: #096e64;

}

input:hover::placeholder {
    color: #096e64;
    /* 或者其他合适的颜色值 */
}

.bottom {
    -webkit-transition: all ease .3s;
    transition: all ease .5s;
    margin-top: calc(var(--login-height) - var(--right-padding) - (var(--input_height) + 12px) * 7)
}

button {
    width: 100%;
    height: var(--input_height);
    line-height: var(--input_height);
    background: #00897B;
    color: #fff;
    border: none;
    font-size: 18px;
}

button:hover {
    background: #096e64;
    cursor: pointer;
    box-shadow:
        -20px 0 20px 5px rgba(9, 101, 100, 0.05),
        0px -20px 20px 5px rgba(9, 101, 100, 0.05),
        20px 0 20px 5px rgba(9, 101, 100, 0.05),
        0 20px 20px 5px rgba(9, 101, 100, 0.05);
}

.link {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row: auto;
    justify-content: space-between;
    align-content: space-between;
}

.link a {
    text-decoration: none;
    color: #9fa1a3;
    text-align: center;
}

.link a:hover {
    color: #096e64;
}


#bg {
    float: left;
    z-index: -1;
    padding-left: 48px;
    left: 0;
    top: -50vh;
    position: absolute;
    min-width: 100vw;
    min-height: 100vh;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    -webkit-transition: all ease .3s;
    transition: all ease 1s;
    transform-style: preserve-3d;
    /*父容器设置为3d变换*/
    perspective-origin: left;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translateX(-15vw) translateY(0px) rotateX(5deg) rotateZ(5deg);
    user-select: none;
    /* Chrome/Safari */
    filter: blur(2px);
    animation-delay: 2s;

}

#bg>* {
    -webkit-transition: all ease .3s;
    transition: all ease 1s;
    font-size: 48px !important;
    line-height: 64px !important;
}
    /* 第一段动画 */
@keyframes fadein {
0% { transform: scale(1); opacity: 1;} /* 初始状态为原大小 */
100% { transform: scale(2); opacity: .97;} /* 最后返回原大小 */
}

@keyframes msg {
    0% { color:#c8cacc;transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); }
    50% { color:#007175; transform: scale(1.5); -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); }
    100% { color:#c8cacc;transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); }
}