/* INTERIOLOGY Z200: single mirrored inter-page transition */
:root{
  --pt200-black:#020202;
  --pt200-ink:#f4f2ec;
  --pt200-ease:cubic-bezier(.76,0,.24,1);
  --pt200-soft:cubic-bezier(.22,1,.36,1);
}

#pt{
  position:fixed!important;
  inset:0!important;
  z-index:30000!important;
  display:block!important;
  visibility:hidden!important;
  opacity:1!important;
  pointer-events:none!important;
  overflow:hidden!important;
  background:transparent!important;
  transition:none!important;
  contain:strict!important;
}

#pt .pt193-veil{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  display:block!important;
  background:var(--pt200-black)!important;
  opacity:0!important;
  will-change:opacity!important;
  transition:opacity .48s ease!important;
}

#pt::before,
#pt::after{
  content:""!important;
  position:absolute!important;
  z-index:1!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  height:50.08%!important;
  background:var(--pt200-black)!important;
  transform:scaleY(0)!important;
  backface-visibility:hidden!important;
  will-change:transform!important;
  transition:transform 1.04s var(--pt200-ease)!important;
}
#pt::before{
  top:0!important;
  bottom:auto!important;
  transform-origin:top center!important;
}
#pt::after{
  bottom:0!important;
  top:auto!important;
  transform-origin:bottom center!important;
}

#pt .pt192-core{
  position:absolute!important;
  z-index:3!important;
  inset:50% 0 auto!important;
  display:grid!important;
  grid-template-columns:minmax(24px,1fr) auto minmax(24px,1fr)!important;
  align-items:center!important;
  gap:clamp(14px,2vw,32px)!important;
  padding-inline:clamp(22px,8vw,150px)!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translate3d(0,-50%,0) scale(.97)!important;
  will-change:opacity,transform!important;
  transition:
    opacity .34s ease,
    transform .72s var(--pt200-soft),
    visibility 0s linear 1.6s!important;
}

#pt .pt192-mark{
  width:clamp(158px,18vw,278px)!important;
  min-height:42px!important;
  display:grid!important;
  place-items:center!important;
}

#pt .pt192-mask{
  display:block!important;
  width:100%!important;
  overflow:hidden!important;
  clip-path:inset(0 50% 0 50%)!important;
  -webkit-clip-path:inset(0 50% 0 50%)!important;
  opacity:0!important;
  transform:scale(.975)!important;
  will-change:clip-path,opacity,transform!important;
  transition:
    clip-path .68s var(--pt200-soft),
    -webkit-clip-path .68s var(--pt200-soft),
    opacity .24s ease,
    transform .72s var(--pt200-soft)!important;
}

#pt .pt192-mask img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  filter:brightness(0) invert(1)!important;
}

#pt .pt192-line{
  display:block!important;
  height:1px!important;
  opacity:.58!important;
  transform:scaleX(0)!important;
  will-change:transform,opacity!important;
  transition:transform .62s var(--pt200-soft),opacity .28s ease!important;
}
#pt .pt192-line-l{
  transform-origin:right center!important;
  background:linear-gradient(90deg,transparent,rgba(244,242,236,.42))!important;
}
#pt .pt192-line-r{
  transform-origin:left center!important;
  background:linear-gradient(90deg,rgba(244,242,236,.42),transparent)!important;
}

html.pt-active #pt,
html.pt-closing #pt,
html.pt-covered #pt,
html.pt-arrival #pt,
html.pt-opening #pt{
  visibility:visible!important;
}

/* ENTRY: page dims, eye closes, mark resolves at the midpoint. */
html.pt-closing #pt .pt193-veil{
  opacity:.9!important;
  transition-delay:0s!important;
  transition-duration:.46s!important;
}
html.pt-closing #pt::before,
html.pt-closing #pt::after,
html.pt-covered #pt::before,
html.pt-covered #pt::after,
html.pt-arrival #pt::before,
html.pt-arrival #pt::after{
  transform:scaleY(1)!important;
}
html.pt-closing #pt::before,
html.pt-closing #pt::after{
  transition-delay:.08s!important;
}
html.pt-closing #pt .pt192-core,
html.pt-covered #pt .pt192-core,
html.pt-arrival #pt .pt192-core{
  visibility:visible!important;
  opacity:1!important;
  transform:translate3d(0,-50%,0) scale(1)!important;
}
html.pt-closing #pt .pt192-core{
  transition-delay:.68s,.68s,0s!important;
}
html.pt-closing #pt .pt192-mask,
html.pt-covered #pt .pt192-mask,
html.pt-arrival #pt .pt192-mask{
  clip-path:inset(0 0 0 0)!important;
  -webkit-clip-path:inset(0 0 0 0)!important;
  opacity:1!important;
  transform:scale(1)!important;
}
html.pt-closing #pt .pt192-mask{
  transition-delay:.72s,.72s,.72s,.72s!important;
}
html.pt-closing #pt .pt192-line,
html.pt-covered #pt .pt192-line,
html.pt-arrival #pt .pt192-line{
  transform:scaleX(1)!important;
}
html.pt-closing #pt .pt192-line{
  transition-delay:.8s!important;
}
html.pt-covered #pt .pt193-veil,
html.pt-arrival #pt .pt193-veil{
  opacity:1!important;
}

/* MIDPOINT: destination starts in the exact final frame of entry. */
html.pt-arrival #pt,
html.pt-arrival #pt::before,
html.pt-arrival #pt::after,
html.pt-arrival #pt .pt193-veil,
html.pt-arrival #pt .pt192-core,
html.pt-arrival #pt .pt192-mask,
html.pt-arrival #pt .pt192-line{
  transition:none!important;
}

/* EXIT: exact reverse order. Mark folds first, then the eye opens onto the page. */
html.pt-opening #pt .pt192-line{
  transform:scaleX(0)!important;
  opacity:0!important;
  transition-delay:0s!important;
  transition-duration:.5s,.28s!important;
}
html.pt-opening #pt .pt192-mask{
  clip-path:inset(0 50% 0 50%)!important;
  -webkit-clip-path:inset(0 50% 0 50%)!important;
  opacity:0!important;
  transform:scale(.975)!important;
  transition-delay:.04s,.04s,.04s,.04s!important;
  transition-duration:.68s,.68s,.24s,.72s!important;
}
html.pt-opening #pt .pt192-core{
  visibility:visible!important;
  opacity:0!important;
  transform:translate3d(0,-50%,0) scale(.97)!important;
  transition-delay:.28s,.04s,0s!important;
  transition-duration:.34s,.72s,0s!important;
}
html.pt-opening #pt::before,
html.pt-opening #pt::after{
  transform:scaleY(0)!important;
  transition-delay:.62s!important;
  transition-duration:1.04s!important;
}
html.pt-opening #pt .pt193-veil{
  opacity:0!important;
  transition-delay:.7s!important;
  transition-duration:.9s!important;
}

@media(max-width:600px){
  #pt .pt192-core{
    grid-template-columns:minmax(16px,1fr) auto minmax(16px,1fr)!important;
    gap:11px!important;
    padding-inline:18px!important;
  }
  #pt .pt192-mark{width:min(50vw,188px)!important;min-height:34px!important;}
}

@media(prefers-reduced-motion:reduce){
  #pt::before,#pt::after,#pt .pt193-veil,#pt .pt192-core,#pt .pt192-mask,#pt .pt192-line{
    transition-duration:.2s!important;
    transition-delay:0s!important;
  }
}

/* One status only on every upcoming kitchen card. */
body.page-kitchen .range[data-soon='1'] .num,
body.home .soon-card[data-soon='1'] .num{
  display:block!important;
}