.doorway-walk-light,
html:is([data-doorway-arrival],[data-doorway-return-pending])::after{
 content:"";position:fixed;inset:0;z-index:10001;pointer-events:none;
 background:radial-gradient(ellipse at 50% 45%,#fff1d2 4%,#f8d6a2 33%,#e9ac73 66%,#b67450 100%)
}

/* Both pages use this timeline. Navigation happens at 420 ms. */
@keyframes doorway-book-pull{
 0%{transform:translate(0,0) rotate(-5deg)}
 15%{transform:translate(1%,-3%) rotate(-5deg);animation-timing-function:cubic-bezier(.2,.6,.34,1)}
 53%{transform:translate(12%,-17%) rotate(-9deg) scale(1.07)}
 69%{transform:translate(15%,-21%) rotate(-10deg) scale(1.085);animation-timing-function:cubic-bezier(.23,.65,.32,1)}
 100%{transform:translate(0,0) rotate(var(--book-rest-angle,0deg))}
}
@keyframes doorway-paper-lift{
 0%{transform:translate(0,0) rotate(-5deg)}
 16%{transform:translate(1%,-4%) rotate(-7deg);animation-timing-function:cubic-bezier(.2,.62,.35,1)}
 53%{transform:translate(5%,-22%) rotate(1deg) scale(1.15)}
 69%{transform:translate(7%,-28%) rotate(3deg) scale(1.18);animation-timing-function:cubic-bezier(.25,.68,.32,1)}
 100%{transform:translate(0,0) rotate(-5deg)}
}
@keyframes doorway-curtain-part{
 0%{transform:translateX(calc(var(--curtain-side)*36%)) scaleX(.92)}
 19%{transform:translateX(calc(var(--curtain-side)*40%)) scaleX(.88);animation-timing-function:cubic-bezier(.32,.07,.3,1)}
 53%{transform:translateX(calc(var(--curtain-side)*70%)) scaleX(.77)}
 73%{transform:translateX(calc(var(--curtain-side)*104%)) scaleX(.56)}
 100%{transform:translateX(calc(var(--curtain-side)*104%)) scaleX(.56)}
}

/* The objects settle as the return doorway reaches its place on the page. */
@keyframes doorway-book-return{
 0%,19%{transform:translate(15%,-21%) rotate(-10deg) scale(1.085)}
 59%{transform:perspective(180px) translate(6%,-11%) rotateY(-7deg) rotate(-7deg);animation-timing-function:cubic-bezier(.48,.02,.83,.55)}
 75%{transform:perspective(180px) translate(-3%,2.5%) rotateY(-15deg) rotate(-4deg);animation-timing-function:ease-out}
 84%{transform:perspective(180px) translate(.8%,-1%) rotateY(-11deg) rotate(-5.5deg)}
 94%,100%{transform:perspective(180px) rotateY(-12deg) rotate(-5deg)}
}
@keyframes doorway-slot-shadow{
 0%,55%{opacity:0;transform:translateX(12%) scaleX(1.24)}
 75%{opacity:.86;transform:translateX(-1%) scaleX(1.04)}
 92%{opacity:.38;transform:translateX(0) scaleX(1)}
 100%{opacity:0;transform:translateX(0) scaleX(1)}
}
@keyframes doorway-sheet-reflection{
 0%,48%{opacity:0;transform:translateX(-46%)}
 68%{opacity:.9;transform:translateX(-6%)}
 83%{opacity:.62;transform:translateX(22%)}
 100%{opacity:0;transform:translateX(58%)}
}
@keyframes doorway-curtain-return{
 0%,19%{transform:translateX(calc(var(--curtain-side)*104%)) scaleX(.56)}
 49%{transform:translateX(calc(var(--curtain-side)*65%)) scaleX(.77);animation-timing-function:ease-out}
 66%{transform:translateX(calc(var(--curtain-side)*26%)) skewX(calc(var(--curtain-side)*-5deg)) scaleX(.99)}
 79%{transform:translateX(calc(var(--curtain-side)*41%)) skewX(calc(var(--curtain-side)*3deg)) scaleX(.88)}
 91%{transform:translateX(calc(var(--curtain-side)*33%)) skewX(calc(var(--curtain-side)*-1.4deg)) scaleX(.95)}
 100%{transform:translateX(calc(var(--curtain-side)*36%)) scaleX(.92)}
}
@keyframes doorway-paper-return{
 0%,15%{transform:translate(7%,-28%) rotate(3deg) scale(1.18)}
 56%{transform:translate(2%,-12%) rotate(-1deg) scale(1.06);animation-timing-function:ease-in}
 72%{transform:perspective(145px) translateY(1.5%) rotate(-7deg) rotateX(15deg) scaleY(.965)}
 84%{transform:perspective(145px) translateY(-1.5%) rotate(-6deg) rotateX(-5deg)}
 97%,100%{transform:rotate(-6deg)}
}
@keyframes doorway-return-object-light{
 0%,16%{opacity:0}
 39%{opacity:.58}
 75%{opacity:.31}
 100%{opacity:0}
}

@media(prefers-reduced-motion:no-preference){
 html[data-doorway-arrival]::after{animation:doorway-arrival 520ms cubic-bezier(.23,.65,.32,1) both}
 html[data-doorway-arrival][data-doorway-object-arrival]::after{
  animation:doorway-arrival 390ms cubic-bezier(.32,.9,.42,1) both
 }
}
@media(prefers-reduced-motion:reduce){
 html[data-doorway-arrival]::after{display:none}
}
@keyframes doorway-arrival{
 0%{opacity:1}
 19%{opacity:.86}
 100%{opacity:0}
}
[data-doorway-featured]{
 outline:2px solid #f5cc89;
 outline-offset:3px;
 box-shadow:0 0 21px #f8d99165
}
@media(prefers-reduced-motion:no-preference){
 .bookcase .guide-book[data-doorway-motion="guide"]:not(.is-withdrawing,.is-reshelving){
  z-index:2;
  animation:doorway-book-pull 800ms -420ms both
 }
 .sample-surface [data-doorway-motion="worksheet"] .sample-image img:not(.paper-in-hand){
  animation:doorway-paper-lift 800ms -420ms both
 }
 .viewing-alcove .player-surface[data-doorway-motion="video"] .drape{
  animation:doorway-curtain-part 800ms -420ms both
 }
 .viewing-alcove .player-surface[data-doorway-motion="video"] .stage-drapes{
  background:transparent
 }
 .player-surface[data-doorway-motion="video"] .drape-left{--curtain-side:-1}
 .player-surface[data-doorway-motion="video"] .drape-right{--curtain-side:1}
 .viewing-alcove .player-surface[data-doorway-motion="video"]:not([data-screen="open"]){
  background:#170f1b url("presentation.jpg") 69% center/cover
 }
 .viewing-alcove .player-surface[data-doorway-motion="video"] .video-poster{
  background:linear-gradient(0deg,#190e1be0,transparent 48%)
 }
}
@media(max-width:620px) and (prefers-reduced-motion:no-preference){
 .viewing-alcove .player-surface[data-doorway-motion="video"]:not([data-screen="open"]){background-image:url("presentation-phone.jpg")}
}