/* lift.css — the lift between the Expo's floors (ui/lift.js): the doors that
 * close over the screen while the next floor loads, and the floor buttons. */

/* ---------------- the doors over the screen ---------------- */
#lift-overlay { position: fixed; inset: 0; z-index: 60; pointer-events: none; visibility: hidden; }
#lift-overlay.on { visibility: visible; }
#lift-overlay.shut { pointer-events: auto; }
.lo-door {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #8d96a6 0%, #b9c1cc 18%, #9aa3b2 50%, #7e8796 82%, #6c7483 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  transition: transform .8s cubic-bezier(.65, 0, .35, 1);
}
.lo-door i { position: absolute; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, transparent, rgba(207, 243, 255, .7), transparent); }
.lo-l { left: 0; transform: translateX(-101%); }
.lo-r { right: 0; transform: translateX(101%); }
.lo-l i { right: 0; }
.lo-r i { left: 0; }
#lift-overlay.shut .lo-l, #lift-overlay.shut .lo-r { transform: translateX(0); }

/* the floor display and where you are going, on the closed doors */
.lo-info {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.96); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 260px; padding: 22px 30px 20px;
  border-radius: 20px; background: rgba(12, 16, 32, .88); border: 1px solid rgba(207, 243, 255, .25);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45); color: #eef6ff; text-align: center;
  font: 600 15px system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  opacity: 0; transition: opacity .35s .35s, transform .35s .35s;
}
#lift-overlay.shut .lo-info { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.lo-ind { display: flex; align-items: center; gap: 10px; padding: 6px 18px; border-radius: 12px; background: #05070d; border: 1px solid #2a3044; }
.lo-ind b { font: 700 54px/1 ui-monospace, Consolas, Menlo, monospace; color: #ffb35a; text-shadow: 0 0 14px rgba(255, 170, 80, .7); min-width: 34px; }
.lo-arrow { font: 700 22px/1 system-ui, sans-serif; color: #ffb35a; min-width: 18px; }
#lift-overlay.moving .lo-arrow { animation: lo-blink .52s steps(2, start) infinite; }
@keyframes lo-blink { to { visibility: hidden; } }
.lo-name { font-size: 17px; letter-spacing: .3px; }
.lo-hu { font-weight: 500; font-size: 13px; color: #9fb0cc; }
.lo-bar { width: 200px; height: 3px; margin-top: 6px; border-radius: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.lo-bar i { display: block; width: 35%; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #4dabf7, #ffa94d, #da77f2, #69db7c); transform: translateX(-110%); }
#lift-overlay.loading .lo-bar i, #lift-overlay.moving .lo-bar i { animation: lo-run 1.1s ease-in-out infinite; }
@keyframes lo-run { to { transform: translateX(310%); } }
#lift-overlay.ding .lo-ind b { animation: lo-ding .38s ease-out; }
@keyframes lo-ding { 50% { color: #fff; text-shadow: 0 0 24px #fff; } }
/* arriving by lift: the world's own loading screen and welcome stay out of sight behind the doors */
html.lift-arriving #loading { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .lo-door { transition-duration: .25s; }
  #lift-overlay.moving .lo-arrow, #lift-overlay.loading .lo-bar i { animation: none; }
}

/* ---------------- the floor buttons (inside a lift) ---------------- */
#lift-panel {
  position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 8px;
  padding: 12px; border-radius: 18px; background: rgba(14, 20, 44, .8); border: 1px solid rgba(190, 230, 255, .3);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(4, 8, 30, .4);
}
#lift-panel[hidden] { display: none; }
#lift-panel > span { font: 700 10px ui-monospace, Menlo, monospace; letter-spacing: 3px; color: #9fdcff; text-align: center; }
#lift-panel button {
  display: flex; align-items: center; gap: 10px; min-width: 220px; padding: 9px 14px; border-radius: 12px; text-align: left;
  border: 1px solid rgba(190, 230, 255, .25); background: rgba(255, 255, 255, .06); color: #eef6ff; font: 600 14px system-ui, -apple-system, Segoe UI, Roboto, sans-serif; cursor: pointer;
}
#lift-panel button:hover { background: rgba(207, 243, 255, .16); border-color: #cff3ff; }
#lift-panel button b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #cff3ff; color: #12182e; font-size: 13px; flex: none; }
#lift-panel button small { margin-left: auto; font-weight: 500; color: #9fb0cc; }
#lift-panel button.here { background: #cff3ff; color: #12182e; border-color: #cff3ff; cursor: default; }
#lift-panel button.here small { color: #3b4a6a; }
#lift-panel button.here b { background: #12182e; color: #cff3ff; }
#lift-panel button.going b { animation: lift-going .9s ease-in-out infinite alternate; }
@keyframes lift-going { from { background: #cff3ff; } to { background: #ffa94d; } }
@media (max-width: 650px) {
  #lift-panel { right: 10px; top: auto; bottom: 110px; transform: none; padding: 8px; }
  #lift-panel button { min-width: 0; padding: 7px 10px; font-size: 12px; }
  #lift-panel button small { display: none; }
}