/*
 * Muting
 */

$speed: 150ms;

@media (min-width: 769px) {
  .markdown-body {
    background-color: #f0f2f4;
    padding: 16px;
  }

  .page-section {
    & {
      background-color: rgba(white, .99);
      transition: background-color ($speed * 2) linear, transform $speed ease-out;
      transform-origin: 64px 50%;
      transform: scale(1) translate3d(0, 0, 0);

      > .container {
        opacity: 1;
        transition: opacity $speed linear;
      }
    }

    &.-active {
      transition: background-color $speed linear, transform $speed ease-out;
      border-top: 0;
      position: relative;
      z-index: 3;
      box-shadow: 0 20px 40px rgba($blue, .05);

      > .container {
        opacity: 1;
        transition: opacity $speed linear $speed;
      }
    }

    &.-mute {
      border-top: 0;
      background-color: rgba(white, 0);
      transform: scale(.98);

      > .container {
        opacity: 0.25;
      }
    }
  }
}

/*
 * Infinite scroll
 */

.page-section.-hide {
  position: absolute;
  left: -9999px;
  top: -9999px;
}
