/* Reference: 330ms panels + 55ms stagger; 1500ms hold; 170ms retraction. */
.page-transition{position:fixed;inset:0;z-index:10000;visibility:hidden;pointer-events:none;overflow:hidden;color:#f2f2f2;--panels:6}
html[data-page-transition] .page-transition{visibility:visible;pointer-events:auto;touch-action:none}
.page-transition-panel{position:absolute;top:0;bottom:0;left:calc(100% / var(--panels) * var(--i) - 1px);width:calc(100% / var(--panels) + 2px);background:#171717;transform:scaleX(0);transform-origin:left;will-change:transform}
html[data-page-transition="expanding"] .page-transition-panel{transform:scaleX(1);transition:transform 330ms cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i) * 55ms)}
html[data-page-transition="holding"] .page-transition-panel{transform:scaleX(1)}
html[data-page-transition="retracting"] .page-transition-panel{transform:scaleX(0);transform-origin:right;transition:transform 170ms cubic-bezier(.7,0,.84,0);transition-delay:calc(var(--i) * 55ms)}
.page-transition-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--panels),1fr);opacity:0;transition:opacity 170ms ease}
.page-transition-grid i:not(:last-child){border-right:1px solid #ffffff14}
html[data-page-transition="holding"] .page-transition-grid,html[data-page-transition="expanding"] .page-transition-grid{opacity:1}
.page-transition-mark{position:absolute;left:1.5rem;top:50%;width:6rem;height:6rem;transform:translateY(-50%);background:currentColor;mask:url(brand/myler-symbol.svg?v=brand17) center/contain no-repeat}
.page-transition-heading{position:absolute;left:50%;right:1.75rem;top:50%;transform:translateY(-50%);margin:0}
.page-transition-heading span{display:inline-block;font:500 7.5rem/.8 var(--font-display);letter-spacing:-.04em;text-transform:uppercase;white-space:nowrap}
.page-transition-mark,.page-transition-heading{opacity:0;transition:opacity 150ms ease-out}
html[data-page-transition="holding"] .page-transition-mark,html[data-page-transition="holding"] .page-transition-heading{opacity:1}
@media(max-width:767px){
 .page-transition{--panels:5}
 .page-transition-panel:nth-child(6),.page-transition-grid i:nth-child(6){display:none}
 .page-transition-grid i:nth-child(5){border-right:0}
 .page-transition-mark{left:50%;top:.75rem;width:2rem;height:2rem;transform:translateX(-50%)}
 .page-transition-heading{left:1rem;right:1rem;text-align:center}
 .page-transition-heading span{font-size:3.625rem}
}
@media(prefers-reduced-motion:reduce){.page-transition{display:none!important}}