/* The dock, alive. It lives below the edge of the screen the way the Belt lives above it: bring the pointer to the
   bottom and it rises, unfolding from the e as it lands, one set after the next. Pick a set and it condenses to the
   e and the set you picked, then sinks once the pointer leaves. Change scenes by any other road and it rises folded
   for a moment to show where you are, then retreats. Announce, then retreat: the shell's own rule.

   Touch keeps the whole toolbar out, because there is no edge to reach for with a finger. Reduced motion drops the
   stagger and shortens every move. Nothing takes a click until the row has settled. */

#dock.casc {
  transition:
    gap .40s var(--os-settle, cubic-bezier(.2, .8, .2, 1)),
    padding .40s var(--os-settle, cubic-bezier(.2, .8, .2, 1)),
    transform .46s var(--os-settle, cubic-bezier(.2, .8, .2, 1)),
    opacity .30s ease;
}
/* every set is as tall as what it holds, so a label never leaves its box (the stacked layout under 700px needs this) */
#dock.casc > * { height: auto; min-height: 46px; box-sizing: border-box; }

/* away: below the edge, out of reach, out of mind */
#dock.casc.away { transform: translateX(-50%) translateY(calc(100% + 48px)); pointer-events: none; }

#dock.casc > *:not(.st-btn) {
  transition:
    max-width .40s var(--os-settle, cubic-bezier(.2, .8, .2, 1)),
    opacity .22s ease,
    transform .40s var(--os-settle, cubic-bezier(.2, .8, .2, 1)),
    padding .40s var(--os-settle, cubic-bezier(.2, .8, .2, 1)),
    margin .40s var(--os-settle, cubic-bezier(.2, .8, .2, 1)),
    color 150ms ease;
}
/* the fold needs a clip while it moves; once the row has settled the clip goes, so nothing is ever cut at rest */
#dock.casc:not(.settled) > *:not(.st-btn) { overflow: hidden; }
#dock.casc.settled > *:not(.st-btn) { overflow: visible; }

/* folded: the e and the set that is on, nothing else taking room */
#dock.casc:not(.open) { gap: 0; }
#dock.casc:not(.open) > *:not(.st-btn):not(.on) {
  max-width: 0;
  /* a flex item's min-width is auto, which resolves to its content and beats max-width; without this it never folds */
  min-width: 0;
  flex-basis: 0;
  opacity: 0;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  transform: translateX(-12px) scale(.88);
  pointer-events: none;
  /* folding runs from the far end back towards the e */
  transition-delay: calc((var(--n, 8) - var(--i, 0)) * 16ms);
}
#dock.casc:not(.open) > .on { margin-left: 8px; }

/* unfolded: each one a beat after the one before it, counting out from the e */
#dock.casc.open > *:not(.st-btn) {
  max-width: 240px;
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 34ms);
}
/* nothing takes a click until the row has landed where the eye can see it */
#dock.casc.open:not(.settled) > *:not(.st-btn) { pointer-events: none; }

/* the travelling rule is a lie while the row is folding; it comes back once the last set has landed */
#dock.casc .rule { transition: transform 280ms var(--os-settle, cubic-bezier(.2, .8, .2, 1)), width 280ms var(--os-settle, cubic-bezier(.2, .8, .2, 1)), opacity .2s ease; }
#dock.casc:not(.settled) .rule { opacity: 0; }
#dock.casc.settled .rule { opacity: 1; }

/* the e says there is more behind it: a hairline that thickens as the row opens */
#dock.casc .st-btn { position: relative; }
#dock.casc .st-btn::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  width: 1px;
  height: 12px;
  margin-top: -6px;
  background: rgba(255, 250, 248, .22);
  transition: height .32s var(--os-settle, cubic-bezier(.2, .8, .2, 1)), opacity .32s ease;
}
#dock.casc.open .st-btn::after { height: 20px; margin-top: -10px; opacity: .5; }

/* the handle: a hairline at the foot of the screen that says something is folded away down here */
#dockhandle {
  position: fixed;
  left: 50%;
  bottom: 7px;
  width: 30px;
  height: 3px;
  margin-left: -15px;
  border-radius: 2px;
  background: rgba(255, 250, 248, .26);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s var(--os-settle, cubic-bezier(.2, .8, .2, 1)), background .2s ease;
  pointer-events: none;
  z-index: 5;
}
#dockhandle.show { opacity: 1; transform: none; pointer-events: auto; }
#dockhandle.show:hover { background: rgba(255, 250, 248, .5); }
body.inworld #dockhandle { opacity: 0 !important; pointer-events: none !important; }

@media (max-width: 700px) {
  #dock.casc > * { min-height: 50px; }
  #dock.casc:not(.open) > .on { margin-left: 4px; }
}

/* no edge to reach for: the toolbar stays out */
@media (hover: none) {
  #dock.casc.away { transform: translateX(-50%); pointer-events: auto; }
  #dock.casc:not(.open) { gap: 10px; }
  #dock.casc:not(.open) > *:not(.st-btn):not(.on) { max-width: 240px; opacity: 1; transform: none; pointer-events: auto; padding-left: 10px; padding-right: 10px; transition-delay: 0s; }
  #dock.casc:not(.settled) .rule { opacity: 1; }
  #dock.casc .st-btn::after, #dockhandle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #dock.casc, #dock.casc > *:not(.st-btn), #dock.casc .rule, #dock.casc .st-btn::after, #dockhandle { transition-duration: .12s; transition-delay: 0s !important; }
  #dock.casc:not(.open) > *:not(.st-btn):not(.on) { transform: none; }
}