:root {
  --bf-transition-bg: #f4f2ff;
  --bf-transition-surface: #ffffff;
  --bf-transition-accent: #7943f5;
  --bf-transition-accent-deep: #5b2ee8;
  --bf-transition-accent-warm: #df488c;
  --bf-transition-duration-in: 180ms;
  --bf-transition-duration-out: 280ms;
  --bf-transition-ease-in: cubic-bezier(0.32, 0, 0.24, 1);
  --bf-transition-ease-out: cubic-bezier(0.22, 0.74, 0.18, 1);
  --bf-transition-z: 2147482000;
}

html.bf-transition-supported::before,
html.bf-transition-supported::after {
  position: fixed;
  top: -2px;
  bottom: -2px;
  z-index: var(--bf-transition-z);
  width: calc(51vw + 3px);
  min-height: calc(100vh + 4px);
  min-height: calc(100dvh + 4px);
  content: "";
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  backface-visibility: hidden;
  will-change: transform, opacity;
  contain: strict;
  transition:
    transform var(--bf-transition-duration-out) var(--bf-transition-ease-out),
    opacity var(--bf-transition-duration-out) linear,
    visibility 0s linear var(--bf-transition-duration-out);
}

html.bf-transition-supported::before {
  left: -2px;
  transform: perspective(1100px) translate3d(-104%, 0, 0) rotateY(-8deg) scale3d(1.018, 1.018, 1);
  transform-origin: right center;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.98) 0 16%, rgba(255, 255, 255, 0.74) 38%, transparent 66%),
    linear-gradient(135deg, var(--bf-transition-surface) 0%, #eee9ff 52%, var(--bf-transition-accent) 100%);
}

html.bf-transition-supported::after {
  right: -2px;
  transform: perspective(1100px) translate3d(104%, 0, 0) rotateY(8deg) scale3d(1.018, 1.018, 1);
  transform-origin: left center;
  background:
    linear-gradient(250deg, rgba(255, 255, 255, 0.96) 0 14%, rgba(255, 255, 255, 0.64) 36%, transparent 64%),
    linear-gradient(225deg, var(--bf-transition-surface) 0%, #f4eafa 48%, var(--bf-transition-accent-warm) 100%);
}

html.bf-transition-closing,
html.bf-transition-covered,
html.bf-transition-opening {
  background: var(--bf-transition-bg);
}

html.bf-transition-closing::before,
html.bf-transition-closing::after,
html.bf-transition-covered::before,
html.bf-transition-covered::after {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: perspective(1100px) translate3d(0, 0, 0) rotateY(0) scale3d(1, 1, 1);
  transition:
    transform var(--bf-transition-duration-in) var(--bf-transition-ease-in),
    opacity var(--bf-transition-duration-in) linear,
    visibility 0s;
}

html.bf-transition-covered::before,
html.bf-transition-covered::after {
  transition: none;
}

html.bf-transition-opening::before,
html.bf-transition-opening::after {
  visibility: visible;
  opacity: 0.98;
  pointer-events: auto;
  transition:
    transform var(--bf-transition-duration-out) var(--bf-transition-ease-out),
    opacity var(--bf-transition-duration-out) linear,
    visibility 0s;
}

html.bf-transition-opening::before {
  transform: perspective(1100px) translate3d(-104%, 0, 0) rotateY(-6deg) scale3d(1.012, 1.012, 1);
}

html.bf-transition-opening::after {
  transform: perspective(1100px) translate3d(104%, 0, 0) rotateY(6deg) scale3d(1.012, 1.012, 1);
}

html.bf-transition-closing body,
html.bf-transition-covered body,
html.bf-transition-opening body {
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

html.bf-transition-closing body {
  opacity: 0.82;
  transform: translate3d(0, 0, 0) scale3d(0.985, 0.985, 1);
  transition:
    transform var(--bf-transition-duration-in) var(--bf-transition-ease-in),
    opacity var(--bf-transition-duration-in) linear;
}

html.bf-transition-covered body {
  opacity: 0.76;
  transform: translate3d(0, 0, 0) scale3d(0.985, 0.985, 1);
}

html.bf-transition-opening body {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  transition:
    transform var(--bf-transition-duration-out) var(--bf-transition-ease-out),
    opacity var(--bf-transition-duration-out) linear;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --bf-transition-duration-in: 80ms;
    --bf-transition-duration-out: 120ms;
  }

  html.bf-transition-supported::before {
    right: -2px;
    width: calc(100vw + 4px);
    transform: none;
    background: var(--bf-transition-bg);
  }

  html.bf-transition-supported::after {
    display: none;
  }

  html.bf-transition-supported::before,
  html.bf-transition-closing::before,
  html.bf-transition-covered::before,
  html.bf-transition-opening::before {
    transform: none;
  }

  html.bf-transition-closing::before,
  html.bf-transition-covered::before {
    opacity: 0.96;
  }

  html.bf-transition-opening::before {
    opacity: 0;
  }

  html.bf-transition-closing body,
  html.bf-transition-covered body,
  html.bf-transition-opening body {
    transform: none;
    will-change: opacity;
  }
}