@import '../util';

#hero {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
  user-select: none;
  cursor: grab;
  #images {
    width: 100%;
    height: 100%;
    display: inline-block;
    white-space: nowrap;
    position: relative;
    .item {
      position: absolute;
      top: 0;
      left: 0;
      will-change: transform;
      white-space: normal;
      .item-wrapper {
        will-change: transform;
      }
      .item-image {
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          will-change: transform;
        }
      }
      small {
        width: 100%;
        display: block;
        font-size: 8rem;
        line-height: 1.25;
        margin-top: 12rem;
        .line-mask {
          transition: transform 2s $in-out;
          .line {
            transition: transform 2s $in-out;
          }
        }
      }
      small:not(.visible) {
        .line-mask {
          transform: translateY(100%);
          .line {
            transform: translateY(110%);
          }
        }
      }
    }
  }
}
html.dragging #hero {
  cursor: grabbing;
}