/**
 * Mobile nav view-transition boot styles (Labrika: no inline <style> in <head>).
 */
@media (max-width: 991px) {
  @view-transition {
    navigation: auto;
  }

  @keyframes rsMobNavOldFwd {
    to {
      transform: translateX(-28%);
      filter: brightness(0.96);
    }
  }

  @keyframes rsMobNavNewFwd {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0);
    }
  }

  @keyframes rsMobNavOldBack {
    to {
      transform: translateX(28%);
      filter: brightness(0.96);
    }
  }

  @keyframes rsMobNavNewBack {
    from {
      transform: translateX(-28%);
    }
    to {
      transform: translateX(0);
    }
  }

  @keyframes rsMobNavSheetFwd {
    from {
      transform: translate3d(100%, 0, 0);
    }
    to {
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes rsMobNavSheetBack {
    from {
      transform: translate3d(-28%, 0, 0);
    }
    to {
      transform: translate3d(0, 0, 0);
    }
  }

  html.rs-mob-nav-forward::view-transition-old(root) {
    animation: rsMobNavOldFwd 280ms cubic-bezier(0.32, 0.72, 0, 1) both;
  }

  html.rs-mob-nav-forward::view-transition-new(root) {
    animation: rsMobNavNewFwd 280ms cubic-bezier(0.32, 0.72, 0, 1) both;
  }

  html.rs-mob-nav-back::view-transition-old(root) {
    animation: rsMobNavOldBack 280ms cubic-bezier(0.32, 0.72, 0, 1) both;
  }

  html.rs-mob-nav-back::view-transition-new(root) {
    animation: rsMobNavNewBack 280ms cubic-bezier(0.32, 0.72, 0, 1) both;
  }

  html.rs-mob-nav-enter:not(.rs-mob-nav-vt)::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 2147483643;
    background: rgba(0, 0, 0, 0.1);
    pointer-events: none;
  }

  html.rs-mob-nav-enter:not(.rs-mob-nav-vt) header#navbar_new,
  html.rs-mob-nav-enter:not(.rs-mob-nav-vt) #center,
  html.rs-mob-nav-enter:not(.rs-mob-nav-vt) footer {
    position: relative;
    z-index: 2147483644;
    background: #fff;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  html.rs-mob-nav-enter.rs-mob-nav-forward:not(.rs-mob-nav-vt) header#navbar_new,
  html.rs-mob-nav-enter.rs-mob-nav-forward:not(.rs-mob-nav-vt) #center,
  html.rs-mob-nav-enter.rs-mob-nav-forward:not(.rs-mob-nav-vt) footer {
    transform: translate3d(100%, 0, 0);
    animation: rsMobNavSheetFwd 280ms cubic-bezier(0.32, 0.72, 0, 1) both;
  }

  html.rs-mob-nav-enter.rs-mob-nav-forward:not(.rs-mob-nav-vt) #center {
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.12);
  }

  html.rs-mob-nav-enter.rs-mob-nav-back:not(.rs-mob-nav-vt) header#navbar_new,
  html.rs-mob-nav-enter.rs-mob-nav-back:not(.rs-mob-nav-vt) #center,
  html.rs-mob-nav-enter.rs-mob-nav-back:not(.rs-mob-nav-vt) footer {
    transform: translate3d(-28%, 0, 0);
    animation: rsMobNavSheetBack 280ms cubic-bezier(0.32, 0.72, 0, 1) both;
  }

  html.rs-mob-nav-enter.rs-mob-nav-back:not(.rs-mob-nav-vt) #center {
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.1);
  }

  html.rs-mob-nav-enter {
    overflow: hidden;
    background: #ececec;
  }

  html.rs-mob-nav-enter nav.mob_menu[data-rs-mob-nav='1'] {
    transform: none !important;
  }

  html.rs-mob-list-restore-pending {
    visibility: hidden !important;
    overflow: hidden !important;
    background: #fff !important;
    height: 100% !important;
  }

  html.rs-mob-list-restore-pending::view-transition-old(root),
  html.rs-mob-list-restore-pending::view-transition-new(root) {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.rs-mob-nav-enter header#navbar_new,
  html.rs-mob-nav-enter #center,
  html.rs-mob-nav-enter footer {
    animation: none !important;
    transform: none !important;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}
