/* Available before either game bundle: the doorway also works on a cold load. */
#home-travel-cover { display:none; }
html[data-home-travel] body { background:#f5efdf; }
/* Keep the scene paintable beneath the opaque cover, including its first WebGL frame. */
html[data-home-travel] #home-travel-cover {
  display:grid; position:fixed; inset:0; z-index:2147483647;
  place-content:center; justify-items:center; gap:24px; overflow:hidden;
  margin:0; padding:24px; background:#f5efdf; color:#343d36;
  font:600 18px/1.5 system-ui,sans-serif; text-align:center;
}
.home-travel-art { position:relative; width:240px; height:280px; }
.home-travel-arch {
  position:absolute; inset:18px 44px 54px; border:10px solid #476d68;
  border-bottom-width:8px; border-radius:80px 80px 3px 3px;
  background:#ffe3a1; perspective:600px;
}
.home-travel-door {
  position:absolute; inset:0; transform-origin:left center;
  border-radius:65px 65px 0 0; background:#e7ae62;
  box-shadow:inset -5px 0 #c58d46;
  animation:home-door-swing 2.8s cubic-bezier(.45,0,.25,1) infinite;
  animation-delay:var(--home-travel-phase,0s);
}
.home-travel-door::before {
  content:''; position:absolute; width:12px; height:12px; right:16px; top:59%;
  border-radius:50%; background:#476d68;
}
.home-travel-door::after {
  content:''; position:absolute; inset:26px 20px 28px;
  border:2px solid #b8833c; border-radius:45px 45px 3px 3px;
}
.home-travel-step { position:absolute; width:11px; height:20px; border-radius:8px; background:#476d68; opacity:.2; animation:home-footstep 2.8s ease-in-out infinite; animation-delay:calc(var(--home-travel-phase,0s) + var(--step)*140ms); }
.home-travel-step:nth-child(2) { left:94px; bottom:7px; --step:0; }
.home-travel-step:nth-child(3) { left:126px; bottom:28px; --step:1; }
.home-travel-step:nth-child(4) { left:104px; bottom:49px; --step:2; }
.home-travel-spark { position:absolute; width:22px; height:22px; color:#c58d46; animation:home-spark 2.8s ease-in-out infinite; animation-delay:var(--home-travel-phase,0s); }
.home-travel-spark:first-child { left:8px; top:74px; }
.home-travel-spark:last-child { right:2px; top:24px; width:30px; height:30px; }
.home-travel-spark::before,.home-travel-spark::after { content:''; position:absolute; background:currentColor; border-radius:50%; }
.home-travel-spark::before { inset:0 43%; }
.home-travel-spark::after { inset:43% 0; }
#home-travel-cover p { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#home-travel-cover[data-stalled] p { position:static; width:auto; height:auto; max-width:30ch; margin:0; overflow:visible; clip-path:none; white-space:normal; }
#home-travel-cover button { font:inherit; min-height:44px; padding:12px 20px; border:0; border-radius:12px; background:#476d68; color:#fff9eb; cursor:pointer; }
#home-travel-cover button:hover { background:#315650; }
#home-travel-cover button:focus-visible { outline:3px solid #b8833c; outline-offset:4px; }
#home-travel-cover button[hidden] { display:none; }
html[data-home-travel="reveal"] #home-travel-cover { pointer-events:none; animation:home-travel-reveal .28s ease-out forwards; }
html[data-home-travel] dialog::backdrop { background:transparent!important; backdrop-filter:none!important; }
@keyframes home-door-swing { 0%,100% { transform:rotateY(0); } 30%,72% { transform:rotateY(-68deg); } }
@keyframes home-footstep { 0%,100% { opacity:.15; transform:translateY(5px); } 35%,65% { opacity:calc(.85 - var(--step)*.16); transform:translateY(0); } 80% { opacity:.15; transform:translateY(-5px); } }
@keyframes home-spark { 0%,85%,100% { opacity:.3; transform:scale(.7); } 40%,60% { opacity:1; transform:scale(1); } }
@keyframes home-travel-reveal { to { opacity:0; } }
html[data-home-travel-gentle="true"] .home-travel-art * { animation:none; }
html[data-home-travel-gentle="true"] .home-travel-door { transform:rotateY(-40deg); }
html[data-home-travel-gentle="true"][data-home-travel="reveal"] #home-travel-cover { animation-duration:.1s; }
@media(prefers-reduced-motion:reduce) {
  .home-travel-art * { animation:none; }
  .home-travel-door { transform:rotateY(-40deg); }
  html[data-home-travel="reveal"] #home-travel-cover { animation-duration:.1s; }
}