/* Banner */

#banner {
  @include vendor('display', 'flex');
  @include vendor('flex-direction', 'column');
  @include vendor('justify-content', 'center');
  cursor: default;
  height: 100vh;
  min-height: 35em;
  overflow: hidden;
  position: relative;
  text-align: center;

  h2 {
    @include vendor('transform', 'scale(1)');
    @include vendor('transition', ('transform 0.5s ease', 'opacity 0.5s ease'));
    display: inline-block;
    font-size: 1.75em;
    opacity: 1;
    padding: 0.35em 1em;
    position: relative;
    z-index: 1;

    &:before, &:after {
      @include vendor('transition', 'width 1s ease');
      @include vendor('transition-delay', '0.25s');
      background: _palette(fg-bold);
      content: '';
      display: block;
      height: 2px;
      position: absolute;
      width: 100%;
    }

    &:before {
      top: 0;
      left: 0;
    }

    &:after {
      bottom: 0;
      right: 0;
    }
  }

  h1 {
    @include vendor('transition', 'opacity 0.5s ease');
    @include vendor('transition-delay', '1s');
    margin-bottom: 25px;
    opacity: 1;

    a {
      color: inherit;
    }
  }

  @include breakpoint(small) {
    @include padding(7em, 3em);
    height: auto;
    min-height: 0;

    .particles-js-canvas-el {
      @include vendor('transition', 'opacity #{_duration(fadein)} ease-in-out');
      @include vendor('transition-delay', '1s');
      opacity: 1;

      @include breakpoint(medium) {
        display: none;
      }
    }

    h2 {
      font-size: 1.25em;
    }

    br {
      display: none;
    }
  }
}

body.is-loading {
  #banner {
    h1 {
      opacity: 0;
    }

    h2 {
      @include vendor('transform', 'scale(0.95)');
      opacity: 0;

      &:before, &:after {
        width: 0;
      }
    }

    .particles-js-canvas-el {
      opacity: 0;
    }
  }
}

.particle {
  position: relative;
  user-select: none;
  background: _palette(bg);

  @include breakpoint(medium) {
    background: none;
  }

  .particles-js-canvas-el {
    width: 100%;
    height: 100%;
  }

  .content {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      z-index: 1;
      user-select: auto;
    }
}