/***********************
* IMPORTS
* VARIABLES
* MIXINS
***********************/
@import url('https://fonts.googleapis.com/css?family=Megrim');

$link1color: cyan;
$link2color: yellow;
$link3color: magenta;

@mixin neonAnimation($color) {
  0%, 11%, 13%, 17%, 19%, 100%  {
    text-shadow: 0px 0px 15px $color;
  }

  12%, 18% {
    text-shadow: 0 0 0px #fff;
  }
}

@mixin newKeyframes($animationName) {
  @-webkit-keyframes #{$animationName} {
    @content;
  }
  @keyframes #{$animationName} {
    @content;
  }
}


/***********************
* STRUCTURAL
***********************/
.wrapper {
  align-items: center;
  background-color: #111;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  width: 100vw;
}

.items {
  display: inline-block;
  position: relative;
  text-align: center;
}


/***********************
* LINK VARIABLES
***********************/
.link1 {
  --animation: neon1;
  --color: #{$link1color};
  --radial-bg: radial-gradient( #{transparentize($link1color, .8)} 10%, transparent 45%);
}

.link2 {
  --animation: neon2;
  --color: #{$link2color};
  --radial-bg: radial-gradient( #{transparentize($link2color, .8)} 10%, transparent 45%);
}

.link3 {
  --animation: neon3;
  --color: #{$link3color};
  --radial-bg: radial-gradient( #{transparentize($link3color, .8)} 20%, transparent 60%);
}


/***********************
* LINK
***********************/
.link {
  color: var(--color);
  display: block;
  font-family: 'Megrim', cursive;
  font-size: 60px;
  letter-spacing: 2px;
  opacity: .6;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  transition: 130ms cubic-bezier(.4, 1, .8, 1.8);
  z-index: 1;
  
  &::before {
      bottom: 50%;
      content: '';
      left: 50%;
      position: absolute;
      right: 50%;
      top: 50%;
      z-index: -1;
  }
  
  &:hover {
    animation: var(--animation) 2s forwards;
    letter-spacing: 10px;
    text-indent: 10px;
    opacity: 1;
    
    &::before {
      background: var(--radial-bg);
      bottom: -50%;
      left: -50%;
      pointer-events: none;
      right: -50%;
      top: -50%;        
    }
  }

}


/***********************
* ANIMATIONS
***********************/
@include newKeyframes(neon1) {
  @include neonAnimation($link1color);
};

@include newKeyframes(neon2) {
  @include neonAnimation($link2color);
};

@include newKeyframes(neon3) {
  @include neonAnimation($link3color);
};


/***********************
* LOGO
***********************/
.logo {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  
  svg {
    fill: rgba(255,255,255,.1);
    transition: 200ms;
  }
  
  &:hover {
    svg {
      transform: rotate(360deg);
      fill: rgba(255,255,255,.4);
    }
  }
}