.header {
    pointer-events: none;
    transition: color .2s;
  }
  @keyframes btnAnimation2 {
    0% {
      transform: translate(0, 0);
    }
  
    100% {
      transform: translate(0, 100%);
    }
  }
  
  @media (pointer: fine) {
    .roll.on .translate {
      animation-name: btnAnimation2;
      animation-play-state: running;
      animation-iteration-count: 1;
      animation-duration: .4s;
      animation-timing-function: cubic-bezier(.16, .03, .08, 1.55);
    }
  }
  
  .roll .translate>span:last-child {
    position: absolute;
    bottom: 100%;
    left: 0;
  }
  
  .logo {
    display: block;
    height: 100%;
    object-fit: contain;
  }
  
  .header-wrapper .logo,
  .roll2>span .logo,
  .roll3>span .logo {
    height: 22px;
  }
  
  .roll .translate {
    display: inline-block;
  }
  
  .header-wrapper,
  .header .link-logo {
    pointer-events: initial;
    overflow: hidden;
  }
  .header button {
    pointer-events: initial;
  }