/* Elevator doors that close on the login page and slide open on the dashboard. */
.doors {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  pointer-events: none;
}
.doors[hidden] { display: none; }
.door {
  position: relative;
  width: 50%;
  height: 100%;
  background:
    radial-gradient(circle, #9aa1b6 2px, transparent 2.6px) 12px 12px / 48px 48px,
    linear-gradient(90deg, #474d60, #6d7489 35%, #7c839a 65%, #555b70);
  box-shadow: inset 0 0 0 6px #262a38, inset 0 0 60px rgba(0, 0, 0, .45);
  transition: transform .75s cubic-bezier(.7, 0, .3, 1);
}
.door.left { border-right: 3px solid #14161f; }
.door.right { border-left: 3px solid #14161f; }
.door::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 10px;
  height: 90px;
  transform: translateY(-50%);
  background: #4d5366;
  box-shadow: inset 0 0 0 2px #2a2e3c;
}
.door.left::after { right: 22px; }
.door.right::after { left: 22px; }
.doors.opening .door.left { transform: translateX(-101%); }
.doors.opening .door.right { transform: translateX(101%); }
.doors.closing .door.left { animation: doorInL .6s cubic-bezier(.7, 0, .3, 1) both; }
.doors.closing .door.right { animation: doorInR .6s cubic-bezier(.7, 0, .3, 1) both; }
@keyframes doorInL { from { transform: translateX(-101%); } to { transform: none; } }
@keyframes doorInR { from { transform: translateX(101%); } to { transform: none; } }