.login {
  position: relative;
  width: 100vw;
  height: 100vh;
  --w-bg: #c9dcf6;
  --w-bg-1: #00000004;
  overflow: hidden;

  * {
    box-sizing: border-box;
    border: none;
    padding: 0;
    margin: 0;
    outline: none;
    background-color: #0000;
  }

  &>div {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .login-bg {
    background-color: var(--w-bg);
    background-image: repeating-linear-gradient(45deg, #0000 0, #0000 .3em, var(--w-bg-1) .6em, #0000 1em, #0000 1.2em),
      repeating-linear-gradient(-45deg, #0000 0, #0000 .3em, var(--w-bg-1) .6em, #0000 1em, #0000 1.2em);

    filter: url(#bgFilter);
    transform: scale(2);
  }

  .login-layout {


    &>div {
      width: 50em;
      height: 50em;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;

      .energy-base {
        position: absolute;
        inset: 0;
        background-image: url(./energy-base.png);
        background-repeat: no-repeat;
        background-position: 1em 20em;
        background-size: calc(713em / 20) auto;
        /* filter: brightness(190%); */
        animation: am-login-doing 1.7s infinite alternate-reverse;
      }

      .energy-body {
        position: absolute;
        inset: 0;
        background-image: url(./energy-body.png);
        background-repeat: no-repeat;
        background-position: 7em 5em;
        background-size: calc(495em / 20) auto;
      }

      .login-frame {
        width: 30em;
        /* min-height: 30em; */
        background-color: #FFF;
        border-radius: 1em;
        box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
        padding: 3em;

        h1 {
          font-size: 1.7em;
        }
      }


    }
  }

  .canvas {
    width: 10em;
    position: absolute;
    transform: scaleX(-1);
  }

  .login-input {
    display: flex;
    border-bottom: solid 1px #0002;
    align-items: center;
    padding: 2em .5em .3em;
    width: 100%;
    box-sizing: border-box;
    transition: all .3s ease-in-out;

    svg {
      width: 1.5em;
      height: 1.5em;
      margin-right: 1em;


      path {
        fill: #0003;
        transition: all .3s ease-in-out;
      }
    }

    &>* {
      flex-grow: 0;
      flex-shrink: 0;
    }

    input {
      flex-grow: 1;
      flex-shrink: 1;
      font-size: 1.1em;
      padding: .5em 0em;
      color: #0005;
      transition: all .3s ease-in-out;

      &::placeholder {
        color: #0005;
      }
    }

    img {
      width: 5em;
      height: 2em;
      cursor: pointer;
    }

    &:has(input:focus) {
      border-bottom: solid 1px #0004;

      input{
        color: #0009;
      }

      path {
        fill: #0007;
      }
    }
  }

  .reme {
    display: flex;
    align-items: center;
    margin: .6em 1em;
    color: #0008;

    input {
      margin-right: .5em;
      transform: translateY(.11em) scale(1.3);
    }
  }

  .login-btn {
    user-select: none;
    margin-top: 2em;
    height: 2.3em;
    position: relative;
    background-color: #1163fd;
    color: #FFF;
    font-size: 1.1em;
    font-weight: normal;
    letter-spacing: 2em;
    text-indent: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: .3em;
    width: 100%;
    transition: all .3s ease-in-out;
    cursor: pointer;

    &:not(.loading) {
      &:hover {
        filter: brightness(120%);
      }

      &:active {
        filter: brightness(80%);
      }
    }

    &.loading {
      pointer-events: none;

      
      &::before {
        content: '';
        position: absolute;
        inset: 0;
        background-color: #0003;
        backdrop-filter: blur(.1em);
      }

      &::after {
        position: absolute;
        content: '';
        width: 1em;
        height: 1em;
        border-radius: 1em;
        border: solid .2em #fff;
        mask-image: conic-gradient(from 0deg,#0000 0%,#000 75%,#000 83%,#0000 85%);
        animation: am-login-loading 1s ease infinite;
      }
    }



  }

}

@keyframes am-login-loading {
  0% {

    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


@keyframes am-login-doing {
  0% {

    filter: brightness(100%);
  }

  20% {
    filter: brightness(110%);
  }

  40% {

    filter: brightness(100%);
  }
}

@property --noise-base {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.noise {
  filter: url(#noiseFilter);
  --noise-base: 0;
  animation: am-noise 5.1s linear infinite;
}

@keyframes am-noise {
  0% {
    --noise-base: 0;
  }

  10% {
    --noise-base: 0.1;
  }

  20% {
    --noise-base: 0;
  }
}