/*
 * KYOCERA SOC shared page transition
 * ------------------------------------------------------------
 * A restrained white-light transition used for both the initial
 * page reveal and same-site page navigation. The transition lives
 * on the <html> pseudo-element so the site DOM and existing motion
 * systems remain untouched.
 */
html.page-transition-js {
  background: #fff;
}

html.page-transition-js::before {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: rgba(255, 255, 255, .985);
  -webkit-backdrop-filter: brightness(1.28);
  backdrop-filter: brightness(1.28);
  content: "";
  opacity: 1;
  pointer-events: auto;
  transition:
    opacity 720ms cubic-bezier(.18, .06, .23, 1),
    -webkit-backdrop-filter 720ms cubic-bezier(.18, .06, .23, 1),
    backdrop-filter 720ms cubic-bezier(.18, .06, .23, 1);
  will-change: opacity, backdrop-filter;
}

html.page-transition-js.is-page-ready::before {
  opacity: 0;
  -webkit-backdrop-filter: brightness(1);
  backdrop-filter: brightness(1);
  pointer-events: none;
}

html.page-transition-js.is-page-transition-idle::before {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  will-change: auto;
}

html.page-transition-js.is-page-leaving::before {
  opacity: 1;
  -webkit-backdrop-filter: brightness(1.38);
  backdrop-filter: brightness(1.38);
  pointer-events: auto;
  transition-duration: 320ms;
  transition-timing-function: cubic-bezier(.26, .06, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  html.page-transition-js::before,
  html.page-transition-js.is-page-leaving::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition-duration: 80ms;
  }
}