/* Not a bar. The six rooms, numbered, with one line that lengthens on the room
   you are standing in. */
.progress {
  position: fixed; right: calc(var(--gut) * .55); top: 50%; z-index: 70;
  transform: translateY(-50%);
  display: grid; gap: 1.05rem;
  opacity: 0; visibility: hidden;
  transition: opacity .7s var(--ease), visibility 0s linear .7s, color .8s var(--ease);
  color: var(--ink);
}
.progress.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.progress[data-tone="light"] { color: var(--warm-white); }
.progress li { display: flex; align-items: center; justify-content: end; gap: .7rem; }
.progress .name {
  font-size: .56rem; letter-spacing: .22em; text-transform: uppercase;
  opacity: 0; transform: translateX(.4rem);
  transition: opacity .5s var(--ease), transform .6s var(--slow);
}
.progress .num { font-size: .6rem; letter-spacing: .14em; opacity: .4; transition: opacity .5s var(--ease); width: 1.2rem; text-align: right; }
.progress .tick { width: 1px; height: 1.15rem; background: currentColor; opacity: .28; transform: scaleY(.42); transform-origin: 50% 50%; transition: transform .6s var(--slow), opacity .5s var(--ease); }
.progress li.is-here .num { opacity: 1; }
.progress li.is-here .tick { transform: scaleY(1); opacity: 1; }
.progress li.is-here .name { opacity: 1; transform: none; }

.progress-m {
  position: fixed; left: var(--gut); bottom: 1.1rem; z-index: 70;
  display: none; align-items: baseline; gap: .6rem;
  font-size: .58rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink); opacity: 0; transition: opacity .6s var(--ease), color .8s var(--ease);
  pointer-events: none;
}
.progress-m.is-on { opacity: 1; }
.progress-m[data-tone="light"] { color: var(--warm-white); }
.progress-m .of { opacity: .5; }

@media (max-width: 900px) {
  .progress { display: none; }
  .progress-m { display: flex; }
}