.smart-text {
  .line {
    height: 1.6em;
    display: block;
    font-weight: inherit;
  }
  .mask {
    display: block;
    font-weight: inherit;
    will-change: transform;
    overflow: hidden;
  }
  .text {
    display: inline-block;
    white-space: nowrap;
    font-weight: inherit;
    position: relative;
    top: 0.07em;
    will-change: transform;
  }
  .word {
    display: inline-block;
    &:not(:last-child).right-space {
      padding-right: 0.2em;
    }
    &:not(:first-child).left-space {
      padding-left: 0.2em;
    }
  }
  &.h2, &.h4, &.h5 {
    .line {
      height: 1.07em;
    }
  }
  &.uppercase {
    .line {
      height: 0.9em;
    }
  }
  &:not([data-not-observe]) {
    .line {
      .mask {
        transition: transform 2s var(--in-out) var(--delay);      
      }
      .text {
        transition: transform 2s var(--in-out) var(--delay);
      }
    }
    &:not(.show) {
      .mask {
        transform: translateY(40px);
      }
      .text {
        transform: translateY(120%);
      }
    }
  }
  @media (max-width: 1024px) {
    .line {
      height: 1.33em;
    }
  }
}