/* Loader */
// Spinner
@include keyframes('spinner-show') {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@include keyframes('spinner-hide') {

  0% {
    color: _palette(fg-lighter);
    z-index: _misc(z-index-overlay) + 1;
  
    @include vendor('transform', 'scale(1) rotate(0deg)'); 
  }

  99% {
    color: _palette(bg);
    z-index: _misc(z-index-overlay) + 1;

    @include vendor('transform', 'scale(0.5) rotate(360deg)');
  }

  100% {
    color: _palette(bg); z-index: -1;

    @include vendor('transform', 'scale(0.5) rotate(360deg)');
  }
}

@include keyframes('spinner-rotate') {

  0% {

    @include vendor('transform', 'scale(1) rotate(0deg)');
  }

  100% {

    @include vendor('transform', 'scale(1) rotate(360deg)');
  }
}

// Overlay
@include keyframes('overlay-hide') {

  0% {
    opacity: 1;
    z-index: _misc(z-index-overlay);
  }

  15% {
    opacity: 1;
    z-index: _misc(z-index-overlay);
  }

  99% {
    opacity: 0;
    z-index: _misc(z-index-overlay);
  }

  100% {
    opacity: 0;
    z-index: -1;
  }
}

body.landing {
  @include icon;

  // Spinner (inactive)
  &::before {
    @include vendor('animation', ('spinner-show 1.5s 1 0.25s ease forwards', 'spinner-hide 0.25s ease-in-out forwards !important'));
    @include vendor('transform-origin', '50% 50%');

    color: _palette(fg-lighter);
    content: '\f1ce';
    cursor: default;
    display: block;
    font-family: "Font Awesome 5 Free";
    font-size: 2em;
    font-weight: 900;
    height: 2em;
    left: 50%;
    line-height: 2em;
    margin: -1em 0 0 -1em;
    opacity: 0;
    position: fixed;
    text-align: center;
    top: 50%;
    width: 2em;
    z-index: -1;
  }

  // Overlay (inactive)
  &::after {
    @include vendor('animation', 'overlay-hide #{_duration(landing-fadein)} ease-in forwards !important');

    background: _palette(bg);
    content: '';
    display: block;
    height: 100%;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -1;
  }

  &.is-loading {
    // Spinner (active)
    &::before {
      @include vendor('animation', ('spinner-show 1.5s 1 0.25s ease forwards', 'spinner-rotate 0.75s infinite linear !important'));
      
      z-index: _misc(z-index-overlay) + 1;
    }

    // Overlay (active)
    &::after {
      @include vendor('animation', 'none !important');
      
      opacity: 1;
      z-index: _misc(z-index-overlay);
    }
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  body.landing::before {
    line-height: 2.025em;
  }
}