body {
  height: 100vh;
  position: relative;
}
  
h1 {
  font-family: Roboto, sans-serif;
  font-weight: 100;
  font-size: 100px;s
  margin: 0;
  padding: 30px;
}
 
  .strip span {
    display: inline-block;
    transition: transform .6s cubic-bezier(.65,.02,.23,1);
    transform: translate(20%, 100%);
    position: relative;
    z-index: 1;
  }
    
   .strip span:before {
      position: absolute;
      z-index: 1;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform: translateY(-40%);
      transition: transform .6s cubic-bezier(.65,.02,.23,1);
    }
    
    .row {
      overflow: hidden;
      display: block;
      transform: none;
    }
    
    span.row:before {
        display: none;
    }

  span.animate {
    transform: translate(0, 0);
  }
    
    span.animate:before {
      transform: translateY(100%);
    }

    .text-hover {
      font-family: 'Montserrat-Thin', sans-serif;
      margin-top: 80px;
      font-size: 20px;  
      /*font-variation-settings: "wght" 100, "wdth" 250;*/
      color: #000;
      letter-spacing: 1px;
    }

    section a:hover {
      text-decoration: none;
    }

    section a .c2 {
      /*transition: font-variation-settings .2s;*/
    }

    section a  div.animate .c2 {
      font-family: 'Montserrat-Bold', sans-serif;
      /*font-variation-settings: "wght" 750, "wdth" 250;*/
    }

    .letter {
      position: relative; 
      display: inline-block;
      letter-spacing: 2px;
    }
    
    .letter.space {
        margin-left: 4px;
        margin-right: 4px;
    }

    .letter > .c1 {
      visibility: hidden;
    }

    .letter > .c2 {
        font-family: 'Montserrat-Medium';
        position: absolute;
        top: 0;
        left: 0;
    }

    .letter > .c3 {
      font-family: 'Montserrat-SemiBold';
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
    }

    .menu {
      font-family: Montserrat-Regular;
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: #323232;
      z-index: 1000;
      transition: transform 0.7s;
      transform: translateX(-100%);
    }

    .menu-items {
      display: inline-block;
      width: 600px;
    }

    .menu-items > li {
      text-align: left;
    }

    .link-move {
      color: #c2c2c2;
      position: relative;
      text-decoration: none;
      margin: 2rem;
      font-size: 4rem;
      flex-grow: 1;
      font-weight: 300;
      overflow: hidden;
      display: block;
      text-align: left;
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      letter-spacing: 7px;
    }

    .link-move > span {
      display: block;
      transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    .link-move:after {
      content: attr(data-link-alt);
      display: inline;
      position: absolute;
      transition: top 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
      top: 100%;
      left: 0;
      right: 0;
      text-align: left;
      letter-spacing: 2px;
    }

    .link-move:hover {
      color: #fff;
      text-decoration: none;
    }

    .link-move:hover > span {
      -webkit-transform: translateY(-100%);
      transform: translateY(-100%);
    }

    .link-move:hover:after {
      top: 0;
    }