/**
 * @file
 *
 * .is-ultimenu-canvas-off: #header or .region-primary-menu, etc.
 * .is-ultimenu-canvas-on: any sibling of #header.
 *
 * Tips: Use Modernizer.js to have graceful fallback for old browsers.
 * Note the `transform` transitions, it is faster and smoother than `left` ones.
 */

@keyframes ultiZoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes ultiZoomOut {
  from {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
}

/** The #header alike element, out of canvas by default, can exist once. */
.is-ultimenu-canvas--active .is-ultimenu-canvas-off {
  left: 0;
  overflow: hidden;
  -webkit-animation-duration: .3s;
  animation-duration: .3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  max-width: 100%;
  width: 100%;
  z-index: -1;
}

.is-ultimenu-canvas.is-ultimenu-expanded .is-ultimenu-canvas-off {
  -webkit-animation-name: ultiZoomIn;
  animation-name: ultiZoomIn;
  z-index: 9998;
}

.is-ultimenu-canvas.is-ultimenu-canvas--hiding .is-ultimenu-canvas-off {
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-name: ultiZoomOut;
  animation-name: ultiZoomOut;
}

/**
 * 944px with 16px base font.
 * .is-ultimenu-canvas--active is only available if off-canvas is enabled for
 * both desktop and mobile. Or a little later via JS if not. That's why we don't
 * rely on it for the smaller device to avoid FOUC.
 */
@media only screen and (max-width: 58.999em) {
  /** The #header alike element, out of canvas by default, can exist once. */
  .is-ultimenu-canvas .is-ultimenu-canvas-off {
    z-index: -1;
  }

  .is-ultimenu-canvas.is-ultimenu-expanded .is-ultimenu-canvas-off {
    z-index: 9998;
  }
}