/* ===================================================================
   dock.css — the case-study dock.

   The plates magnify under the cursor the way the macOS dock does, but
   the bar is not fixed to the viewport. It only ever appears at the end
   of the case, which makes it part of the footer rather than something
   floating over it: centred under the two links, arriving with them.
   A floating bar over the page was two things stacked, not one block.

   The way home is one of those two links, so it is not also a plate.
   The case you are reading is not in the row: you are already there.

   Pointer only. The magnification is a pointer instrument and the two
   links above carry the same job on a phone.
   =================================================================== */

.dock {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(.5rem, 2vh, 1.25rem);
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.dock.is-out {
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
}

.dock__bar {
  --dock-w: clamp(78px, 8vw, 104px);
  --dock-gap: .35rem;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: .45rem;
  max-width: 100%;
  border-radius: 20px;
  background: rgba(255, 255, 255, .84);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(17,17,17,.04), 0 22px 50px -22px rgba(17,17,17,.28);
}

.dock__rail {
  display: flex;
  align-items: flex-end;
  gap: var(--dock-gap);
  min-width: 0;
}

.dock__item {
  --s: 1;
  position: relative;
  display: block;
  text-decoration: none;
  width: calc(var(--dock-w) * var(--s));
  aspect-ratio: 16 / 10;
  border-radius: 11px;
  overflow: hidden;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  flex: none;
  transform: translateY(calc((var(--s) - 1) * -22px));
  transform-origin: 50% 100%;
  transition: width .28s cubic-bezier(.22,1,.36,1), transform .28s cubic-bezier(.22,1,.36,1);
  will-change: width, transform;
}
.dock__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dock__item::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(17,17,17,.07);
}
.dock__item:focus-visible { outline: 2px solid var(--fg-1); outline-offset: 3px; }

/* Home is not a project, so it does not get a screenshot pretending to
   be one. It gets the drawing that is already the favicon, which makes
   the tab icon and the way home the same mark. It sits first. */
.dock__item--home {
  display: grid;
  place-items: center;
  background: var(--bg-sunken);
  padding: .3rem;
}
/* Absolutely positioned so the percentage height has a definite box to
   resolve against: on a grid item sized by aspect-ratio it does not,
   and the drawing came out taller than its own tile. */
.dock__item--home img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: 72%;
  max-width: 66%;
  object-fit: contain;
  opacity: .62;
  transition: opacity .25s var(--ease);
}
.dock__item--home:hover img { opacity: 1; }

.dock__sep {
  width: 1px;
  align-self: stretch;
  margin: .2rem .4rem;
  background: var(--line);
  flex: none;
}

/* The name of the plate under the cursor, above the rail. */
.dock__tip {
  position: absolute;
  bottom: calc(100% + .55rem);
  left: 0;
  padding: .32rem .65rem;
  border-radius: 999px;
  background: var(--fg-1);
  color: #fff;
  font-size: .75rem;
  letter-spacing: -.005em;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  pointer-events: none;
}
.dock__tip.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (hover: none), (max-width: 860px) {
  .dock { display: none; }
}

@media (max-width: 1100px) {
  .dock__bar { overflow-x: auto; scrollbar-width: none; }
  .dock__bar::-webkit-scrollbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dock, .dock__item, .dock__tip { transition: none; }
  .dock__item { transform: none; width: var(--dock-w); }
  .dock__item--home b { transform: none; }
}