html.mbcut-pending body::after { content: ""; position: fixed; inset: 0; z-index: 2147482999; background: #050505;
  animation: mbcut-safety 0s 1.6s forwards; }
@keyframes mbcut-safety { to { visibility: hidden; opacity: 0; } }

.mbcut { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; }
.mbcut::before { content: ""; position: absolute; inset: 0; background: #050505; clip-path: inset(0 100% 0 0); }
.mbcut__head { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: #D90E43;
  box-shadow: 0 0 22px 3px rgba(217, 14, 67, .65); transform: translateX(0); will-change: transform; }
.mbcut__head::before { content: ""; position: absolute; top: 0; left: -6px; width: 14px; height: 14px; background: #D90E43;
  clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); }
.mbcut__tc { position: absolute; left: 24px; bottom: 22px; display: flex; gap: .7rem; opacity: 0; direction: ltr;
  font-family: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif; font-size: .7rem; font-weight: 600; letter-spacing: .16em;
  font-variant-numeric: tabular-nums; color: rgba(245, 245, 242, .72); }
.mbcut__tc b { color: #D90E43; font-weight: 700; }

.mbcut--out.is-go::before { clip-path: inset(0 0 0 0); transition: clip-path .38s cubic-bezier(.77, 0, .18, 1); }
.mbcut--out.is-go .mbcut__head { transform: translateX(100vw); transition: transform .38s cubic-bezier(.77, 0, .18, 1); }
.mbcut--out.is-go .mbcut__tc { opacity: 1; transition: opacity .18s .14s; }

.mbcut--in::before { clip-path: inset(0 0 0 0); }
.mbcut--in::after { content: ""; position: absolute; inset: 0; background: #F5F5F2; opacity: 0; animation: mbcut-flash .16s steps(1) .04s both; }
@keyframes mbcut-flash { 0% { opacity: .85; } 50% { opacity: 0; } }
.mbcut--in .mbcut__tc { opacity: 1; }
.mbcut--in.is-go::before { clip-path: inset(0 0 0 100%); transition: clip-path .56s cubic-bezier(.77, 0, .18, 1) .14s; }
.mbcut--in.is-go .mbcut__head { transform: translateX(100vw); transition: transform .56s cubic-bezier(.77, 0, .18, 1) .14s; }
.mbcut--in.is-go .mbcut__tc { opacity: 0; transition: opacity .2s .1s; }

@media (prefers-reduced-motion: reduce) {
  html.mbcut-pending body::after { content: none; }
  .mbcut { display: none; }
}
