$blue: #143968
$green: #7fd89a

*
  box-sizing: border-box
  user-select: none

body
  padding: 40px
  font-family: 'Poppins', sans-serif
  font-weight: 300
  font-size: 16px
  color: $blue
  background: $blue

body:before
  content: ""
  display: block
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  background-image: linear-gradient(90deg,hsla(0,0%,100%,.2),transparent)

form.login
  position: absolute
  top: 50%
  left: 50%
  z-index: 5
  transform: translate(-50%, -50%)
  background: #fff
  padding: 40px
  display: flex
  flex-direction: column
  width: 400px
  max-width: 90%
  overflow: hidden
  text-align: center
  box-shadow: 0px 10px 30px -15px black
  border-radius: 5px
  transition: 400ms

  h3
    font-weight: 600
    font-size: 18px
    margin-bottom: 10px

  p
    opacity: 0.5

  fieldset
    display: flex
    flex-direction: column
    position: relative

    .mask
      position: absolute
      background: red
      top: calc(100% + 10px)
      left: 50%
      transform: translateX(-50%) scaleX(0)
      height: 100px
      width: 100%
      max-width: 130px
      z-index: 20
      background: white
      border-top: 1px solid #e0e0e0
      opacity: 0

    .mask.visible
      opacity: 1
      transition: 400ms 500ms
      transform: translateX(-50%) scaleX(1)

  .input-pin
    position: absolute
    left: -1000px

  .input-pin:focus
    outline: none

  input[type=submit]
    display: none

form.hide
  transform: translate(-50%,-50%) scale(1.1)
  opacity: 0
  pointer-events: none

.pin-ui
  display: flex
  flex-direction: row
  justify-content: center
  margin: 30px 0 0 0

  li
    width: 12px
    height: 12px
    background: #ddd
    border-radius: 100%
    margin: 0 6px
    transition: transform 200ms
    border: 1px solid rgba(0,0,0,0.1)
    will-change: transform

  li.on
    background: $green
    transform: scale(1.4)

  li.animate
    animation: pip 1s 1 forwards

.hidden-links
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)
  text-align: center

  a
    display: block
    color: white
    text-decoration: none

  .linkout
    font-weight: 600
    font-size: 24px
    text-shadow: 0 -1px rgba(0,0,0,0.5)

  .linkout:hover
    text-decoration: underline

  .reset
    margin-top: 20px
    opacity: 0.5


@keyframes pip
  0%
    transform: translateY(0) scale(1.4)
  60%
    transform: translateY(-75%) scale(1.4)
  99%
    opacity: 1
  100%
    opacity: 0
    transform: translateY(250%) scale(1.4)
    

const loginForm = document.querySelector('form.login');
const pinInput = document.querySelector('.input-pin');
const pinUI = document.querySelectorAll('.pin-ui li');
let numChars = 0;
let acceptInput = true;

pinInput.addEventListener('keydown',function(e){
  if(!acceptInput){
    e.preventDefault();
  }else{
    if((e.keyCode >= 48 && e.keyCode <= 57) || (e.keycode >= 96 && e.keyCode <= 105)){
      // let it through
      numChars++;
    }else{
      e.preventDefault();
    }
  }
});

pinInput.addEventListener('keypress',function(){
  
  pinUI.forEach(function(el, i){
    if(numChars > i){
      el.classList.add('on');
    }else{
      el.classList.remove('on');
    }
  });
  
  if(numChars === 4){
    loginForm.querySelector('input.submit').click();
  }
});

loginForm.addEventListener('submit',function(e){
  e.preventDefault();
  
  acceptInput = false;
  
  pinInput.blur();
  
  document.querySelector('.mask').classList.add('visible');

  pinUI.forEach(function(el, i){
    setTimeout(function(){
      el.classList.add('animate');
    }, 300*i);
  });
  
  setTimeout(function(){
    document.querySelector('.login').classList.add('hide');
  }, 2000);
  
});

document.querySelector('.reset').addEventListener('click',function(e){
  e.preventDefault();
  resetAll();
});

function resetAll(){
  pinUI.forEach(function(el, i){
    el.classList.remove('on','animate');
  });
  numChars = 0;
  acceptInput = true;
  pinInput.value = "";
  document.querySelector('.mask').classList.remove('visible');
  document.querySelector('.login').classList.remove('hide');
}

pinInput.focus();
document.addEventListener('click',function(){
  pinInput.focus();
});