/* Work index: the project thumbs on the home page.
   work-index.js places every thumb, the bracket frame and the name wheel with
   transforms each frame. This file covers how they look, where the labels sit
   in each view, and the no-JS fallback (a plain grid). */

.wi {
  --wi-gap: 8px;
  --wi-stroke: 9px;
  --wi-line: 15px;
  --wi-strip-half: 120px; /* half the tallest strip thumb; set by JS */
  --wi-row: calc(50% + var(--wi-strip-half) + 64px);
  --wi-move: 1s var(--ease-in-out);
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

.wi.is-dragging,
.wi.is-dragging .wi-item { cursor: grabbing; }

.wi-stage { position: absolute; inset: 0; }

/* Thumbs */

.wi-item {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  opacity: 0;
  transform-origin: 0 0;
  will-change: transform;
  background: var(--rule);
  -webkit-user-drag: none;
}

.wi-item:focus-visible { outline-offset: 6px; }

.wi-item img,
.wi-ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(0.92);
  transition: filter 0.6s var(--ease-out), opacity 0.6s var(--ease-out);
}

.wi-ph {
  display: grid;
  place-items: center;
  background: var(--tone);
  color: var(--bg);
  font: 400 11px/1 var(--font-mono);
}

.wi-item:hover img,
.wi-item:hover .wi-ph { filter: grayscale(0.6); }

.wi-item.is-active img,
.wi-item.is-active .wi-ph { filter: none; }

.wi-item__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Grid: thumbs recede until you point at one. */

.wi[data-view="grid"] .wi-item img,
.wi[data-view="grid"] .wi-ph { opacity: 0.4; }

.wi[data-view="grid"] .wi-item.is-hover img,
.wi[data-view="grid"] .wi-item.is-hover .wi-ph { opacity: 1; filter: none; }

.wi-cells {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease-out), visibility 0.4s;
}

.wi[data-view="grid"] .wi-cells {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.5s;
}

.wi-cell {
  position: absolute;
  font: 400 10px/1 var(--font-mono);
  color: var(--muted);
}

/* Bracket frame around the active (strip) or hovered (grid) thumb.
   Each half is a box with three sides of border; the radius turns it into
   a bracket, and at small sizes the two halves close into a ring. */

.wi-frame {
  --wi-arm: 30px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transform-origin: 50% 50%;
  will-change: transform;
}

.wi-frame > span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--wi-arm);
  border: var(--wi-stroke) solid var(--fg);
}

.wi-frame > span:first-child {
  left: 0;
  border-right: 0;
  border-radius: 28px 0 0 28px;
}

.wi-frame > span:last-child {
  right: 0;
  border-left: 0;
  border-radius: 0 28px 28px 0;
}

/* Name wheel: rows are moved by JS, the active one sits on the centre line. */

.wi-names {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  top: 50%;
  width: 16vw;
  height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: top var(--wi-move), opacity 0.5s var(--ease-out), visibility 0.5s;
}

.wi-name {
  position: absolute;
  left: 0;
  top: calc(var(--wi-line) / -2);
  height: var(--wi-line);
  line-height: var(--wi-line);
  white-space: nowrap;
  cursor: pointer;
  will-change: transform, opacity;
}

/* Labels for the active project. Positions per view are below; every label
   is absolutely placed so a view change can slide it to its new spot. */

.wi-meta > * {
  position: absolute;
  z-index: 2;
  white-space: nowrap;
  transition:
    left var(--wi-move),
    top var(--wi-move),
    translate var(--wi-move),
    scale var(--wi-move),
    opacity 0.5s var(--ease-out),
    visibility 0.5s;
}

.wi-meta__index { font: 400 11px/1.3 var(--font-mono); font-variant-numeric: tabular-nums; }

.wi-meta__rule {
  height: 1px;
  background: var(--rule);
  transform-origin: 0 50%;
}

.wi[data-view="grid"] .wi-names,
.wi[data-view="grid"] .wi-meta > * {
  opacity: 0;
  visibility: hidden;
}

/* Wide screens */

@media (min-width: 760px) {
  .wi-meta__title { display: none; }

  /* Vertical: labels on one line across the middle. */
  .wi-meta__category { left: 18%; top: 50%; translate: 0 -50%; }
  .wi-meta__services { left: 75%; top: 50%; translate: 0 -50%; }
  .wi-meta__index { left: calc(100% - var(--gutter)); top: 50%; translate: -100% -50%; }
  .wi-meta__rule { left: 50%; right: var(--gutter); top: 50%; scale: 0 1; opacity: 0; }

  /* Horizontal: wheel and labels drop below the strip onto a rule. */
  .wi[data-view="horizontal"] .wi-names { top: var(--wi-row); }
  .wi[data-view="horizontal"] .wi-meta__index { left: 50%; top: var(--wi-row); translate: 0 -50%; }
  .wi[data-view="horizontal"] .wi-meta__rule { left: calc(50% + 32px); top: var(--wi-row); scale: 1 1; opacity: 1; }
  .wi[data-view="horizontal"] .wi-meta__category { left: calc(100% - var(--gutter)); top: var(--wi-row); translate: -100% calc(-100% - 6px); }
  .wi[data-view="horizontal"] .wi-meta__services { left: calc(100% - var(--gutter)); top: var(--wi-row); translate: -100% 6px; }
}

/* Phones: the strip shifts right in vertical view to make room for the
   wheel; in horizontal view the labels stack under the strip. */

@media (max-width: 759px) {
  .wi { --wi-stroke: 7px; --wi-row: calc(50% + var(--wi-strip-half) + 36px); }

  .wi-names { width: 34vw; overflow: visible; }
  .wi-meta__services,
  .wi-meta__rule { display: none; }

  .wi-meta > * { left: var(--gutter); }
  .wi-meta__index { top: calc(100% - 84px); }
  .wi-meta__title { top: calc(100% - 66px); opacity: 0; visibility: hidden; }
  .wi-meta__category { top: calc(100% - 66px); color: var(--muted); }

  .wi[data-view="horizontal"] .wi-names { opacity: 0; visibility: hidden; }
  .wi[data-view="horizontal"] .wi-meta__index { top: var(--wi-row); }
  .wi[data-view="horizontal"] .wi-meta__title { top: calc(var(--wi-row) + 18px); opacity: 1; visibility: visible; }
  .wi[data-view="horizontal"] .wi-meta__category { top: calc(var(--wi-row) + 34px); }
}

/* View switch, bottom left */

.wi-views {
  position: absolute;
  z-index: 4;
  left: var(--gutter);
  bottom: 10px;
  cursor: auto;
}

.wi-views button {
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.wi-views button:hover,
.wi-views button[aria-pressed="true"] { text-decoration-line: underline; }

/* Header reacts to the grid: the wordmark shrinks to a corner tag. */

[data-wi-view="grid"] .site-mark { --mark-scale: 0.15; }
[data-wi-view="grid"] .site-blurb { opacity: 0; visibility: hidden; }

@media (max-width: 759px) {
  [data-wi-view="grid"] .site-mark { --mark-scale: 0.42; }
}

@media (prefers-reduced-motion: reduce) {
  .wi *,
  .site-mark,
  .site-blurb { transition-duration: 1ms !important; transition-delay: 0s !important; }
}

/* Without JS: a plain grid of thumbs with captions. */

html:not(.js) .wi {
  position: static;
  overflow: visible;
  touch-action: auto;
  cursor: auto;
  user-select: auto;
  padding: 220px var(--gutter) 64px;
}

html:not(.js) .wi-stage {
  position: static;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 32px var(--gutter);
  align-items: end;
}

html:not(.js) .wi-item { position: static; opacity: 1; background: none; }
html:not(.js) .wi-item img,
html:not(.js) .wi-ph { height: auto; aspect-ratio: var(--ratio); }
html:not(.js) .wi-item__label { position: static; width: auto; height: auto; clip-path: none; display: block; margin-top: 8px; }

html:not(.js) .wi-cells,
html:not(.js) .wi-names,
html:not(.js) .wi-meta,
html:not(.js) .wi-frame,
html:not(.js) .wi-views { display: none; }