/* Red Key page transition.
   The entry animation opens two blocks to reveal the site. This closes the same
   two blocks over the page, navigates, then opens them again on the next one.
   Paths are root relative on purpose: a relative URL inside a CSS custom
   property resolves against a different stylesheet depending on the browser. */
:root{
  --rk-tx-lock:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='224' viewBox='0 0 160 224'%3E%3Cdefs%3E%3ClinearGradient id='p' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%232E2E38'/%3E%3Cstop offset='.5' stop-color='%231C1C23'/%3E%3Cstop offset='1' stop-color='%23101015'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='6' y='6' width='148' height='212' rx='74' fill='url(%23p)' stroke='%235A5A66' stroke-width='1.5'/%3E%3Cpath d='M80 44a34 34 0 0 0-19 62l-13 58a6 6 0 0 0 6 7h52a6 6 0 0 0 6-7l-13-58A34 34 0 0 0 80 44z' fill='%23000'/%3E%3Cpath d='M80 44a34 34 0 0 0-19 62l-13 58a6 6 0 0 0 6 7h52a6 6 0 0 0 6-7l-13-58A34 34 0 0 0 80 44z' fill='none' stroke='%238E8E9A' stroke-opacity='.55' stroke-width='2'/%3E%3C/svg%3E");
  --rk-tx-s:1;
}
@media (max-width:640px){ :root{--rk-tx-s:.62} }
@media (min-width:641px) and (max-width:900px){ :root{--rk-tx-s:.8} }

.rk-tx{position:fixed;inset:0;z-index:9500;display:none;pointer-events:none;overflow:hidden}
html.rk-tx-leaving .rk-tx,
html.rk-tx-arriving .rk-tx{display:block}
html.rk-tx-leaving{overflow:hidden}

.rk-tx__p{position:absolute;top:-2px;height:calc(100% + 4px);width:50.2%;
          background:linear-gradient(175deg,#16161B 0%,#0B0B0D 52%,#08080A 100%);will-change:transform}
.rk-tx__p.l{left:0;box-shadow:inset -1px 0 0 rgba(142,142,154,.18),18px 0 40px -20px #000}
.rk-tx__p.r{right:0;box-shadow:inset 1px 0 0 rgba(142,142,154,.18),-18px 0 40px -20px #000}
/* each block carries its half of the keyhole, so the lock completes as they meet */
.rk-tx__p::after{content:"";position:absolute;top:50%;
  width:calc(160px*var(--rk-tx-s));height:calc(224px*var(--rk-tx-s));
  margin-top:calc(-112px*var(--rk-tx-s));
  background:var(--rk-tx-lock) center/100% 100% no-repeat;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.6))}
.rk-tx__p.l::after{right:calc(-80px*var(--rk-tx-s));clip-path:inset(0 50% 0 0)}
.rk-tx__p.r::after{left:calc(-80px*var(--rk-tx-s));clip-path:inset(0 0 0 50%)}

.rk-tx__seam{position:absolute;left:50%;top:0;width:2px;height:100%;margin-left:-1px;opacity:0;
  background:linear-gradient(180deg,rgba(225,6,0,0),#E10600 50%,rgba(225,6,0,0))}

html.rk-tx-leaving  .rk-tx__p.l{animation:rk-tx-inl  300ms cubic-bezier(.5,0,.2,1) both}
html.rk-tx-leaving  .rk-tx__p.r{animation:rk-tx-inr  300ms cubic-bezier(.5,0,.2,1) both}
html.rk-tx-leaving  .rk-tx__seam{animation:rk-tx-lock 280ms ease-out 250ms both}
html.rk-tx-arriving .rk-tx__p.l{animation:rk-tx-outl 380ms cubic-bezier(.6,0,.15,1) 70ms both}
html.rk-tx-arriving .rk-tx__p.r{animation:rk-tx-outr 380ms cubic-bezier(.6,0,.15,1) 70ms both}

@keyframes rk-tx-inl { from{transform:translateX(-101%)} to{transform:translateX(0)} }
@keyframes rk-tx-inr { from{transform:translateX(101%)}  to{transform:translateX(0)} }
@keyframes rk-tx-outl{ from{transform:translateX(0)} to{transform:translateX(-101%)} }
@keyframes rk-tx-outr{ from{transform:translateX(0)} to{transform:translateX(101%)} }
@keyframes rk-tx-lock{ 0%{opacity:0} 45%{opacity:1} 100%{opacity:0} }

/* no cover at all, so the page can never be hidden by something that cannot lift */
@media (prefers-reduced-motion:reduce){
  html.rk-tx-leaving .rk-tx, html.rk-tx-arriving .rk-tx{display:none}
}