/* Kodza — Hover List Preview
   A list of rows (work, team, services) where pointing at a row shows its picture in a
   single frame. The frame follows the pointer with a little lag and a swing; the row under it
   passes in front of the picture, its words on frosted glass where they cross it, and moving
   to another row wipes the new picture in from the side you are heading to while the old one
   is pushed away. With --panel, the frame sits beside the list and keeps the last picture.
   On touch screens and in narrow columns, every row shows its own thumbnail instead.
   Group headings (a letter, a year, a department) can sit between the rows.
   Keyboard focus works like the pointer. Set data-image on each row.
   Everything is tuned with the --kz-hover-list-* variables. */
.kodza-hover-list {
  --kz-hover-list-ink: #0a0a0a;
  --kz-hover-list-muted: rgba(10, 10, 10, 0.62);
  --kz-hover-list-dim: rgba(10, 10, 10, 0.26);
  --kz-hover-list-line: rgba(10, 10, 10, 0.12);
  --kz-hover-list-placeholder: rgba(10, 10, 10, 0.06);
  --kz-hover-list-glass: auto; /* behind the words that cross the picture: auto = the background behind the list, see-through */
  --kz-hover-list-size: clamp(22px, 2.6vw, 30px);
  --kz-hover-list-columns: minmax(0, 1fr) minmax(0, 13em) auto;
  --kz-hover-list-width: 220px; /* the frame that follows the pointer */
  --kz-hover-list-panel: 220px; /* the frame beside the list, with --panel */
  --kz-hover-list-sticky: 24px; /* with --panel, where the frame stops from the top of the screen */
  --kz-hover-list-ratio: 4 / 5;
  --kz-hover-list-radius: 12px;
  --kz-hover-list-nudge: 12px;
  --kz-hover-list-inline: 560px; /* narrower than this, or on touch: a thumbnail in each row */
  --kz-hover-list-ease: cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;
  isolation: isolate;
  color: var(--kz-hover-list-ink);
}

.kodza-hover-list--panel {
  --kz-hover-list-inline: 720px;
}

.kodza-hover-list__items {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--kz-hover-list-line);
  list-style: none;
}

.kodza-hover-list__items > li {
  margin: 0;
  padding: 0;
}

/* A group heading between the rows: a small label, its count after a dot. The line above it
   closes the group before */
.kodza-hover-list__items > .kodza-hover-list__group {
  padding: 44px 0 12px;
  border-top: 1px solid var(--kz-hover-list-line);
}

.kodza-hover-list__items > .kodza-hover-list__group:first-child {
  padding-top: 0;
  border-top: 0;
}

.kodza-hover-list__group > * {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin: 0;
  color: var(--kz-hover-list-muted);
  font-family: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.kodza-hover-list__group-count {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-variant-numeric: tabular-nums;
}

.kodza-hover-list__group-count::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}

/* A row: its lines stay under the picture, its words come in front of it when it is current */
.kodza-hover-list__row {
  position: relative;
  display: grid;
  grid-template-columns: var(--kz-hover-list-columns);
  align-items: baseline;
  column-gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--kz-hover-list-line);
  color: var(--kz-hover-list-ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.kodza-hover-list__name,
.kodza-hover-list__detail,
.kodza-hover-list__meta {
  position: relative;
  transition: color 0.35s ease, transform 0.55s var(--kz-hover-list-ease);
}

.kodza-hover-list__name {
  justify-self: start;
  font-size: var(--kz-hover-list-size);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.kodza-hover-list__detail {
  justify-self: start;
  color: var(--kz-hover-list-muted);
  font-size: 15px;
  line-height: 1.4;
}

.kodza-hover-list__meta {
  justify-self: end;
  color: var(--kz-hover-list-muted);
  font-family: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.kodza-hover-list__row.is-current .kodza-hover-list__name,
.kodza-hover-list__row.is-current .kodza-hover-list__detail,
.kodza-hover-list__row.is-current .kodza-hover-list__meta {
  z-index: 3;
}

/* Where its words cross the picture, they sit on frosted glass: the colour of the background
   behind the list (found by the script), so it only shows on the picture */
.kodza-hover-list:not(.kodza-hover-list--panel):not(.is-inline) .kodza-hover-list__row.is-current .kodza-hover-list__name::before,
.kodza-hover-list:not(.kodza-hover-list--panel):not(.is-inline) .kodza-hover-list__row.is-current .kodza-hover-list__detail::before,
.kodza-hover-list:not(.kodza-hover-list--panel):not(.is-inline) .kodza-hover-list__row.is-current .kodza-hover-list__meta::before {
  content: "";
  position: absolute;
  inset: -3px -8px;
  z-index: -1;
  border-radius: 8px;
  background: var(--kz-hover-list-tint, rgba(255, 255, 255, 0.6));
  pointer-events: none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* While a row is pointed at, it steps forward and the others step back */
.kodza-hover-list.is-active .kodza-hover-list__row.is-current .kodza-hover-list__name {
  transform: translateX(var(--kz-hover-list-nudge));
}

.kodza-hover-list.is-active .kodza-hover-list__row:not(.is-current) .kodza-hover-list__name,
.kodza-hover-list.is-active .kodza-hover-list__row:not(.is-current) .kodza-hover-list__detail,
.kodza-hover-list.is-active .kodza-hover-list__row:not(.is-current) .kodza-hover-list__meta {
  color: var(--kz-hover-list-dim);
}

.kodza-hover-list.is-active .kodza-hover-list__row.is-current .kodza-hover-list__detail {
  color: var(--kz-hover-list-ink);
}

/* The focus ring is drawn above the picture */
.kodza-hover-list__row:focus-visible {
  outline: none;
}

.kodza-hover-list__row:focus-visible::after {
  content: "";
  position: absolute;
  inset: 4px -8px;
  z-index: 4;
  border-radius: 10px;
  box-shadow: 0 0 0 2px var(--kz-hover-list-ink);
  pointer-events: none;
}

/* The frame (made by the script): placed in the list's own pixels, cut open from below */
.kodza-hover-list__frame {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: var(--kz-hover-list-width);
  pointer-events: none;
  will-change: transform;
}

.kodza-hover-list__media {
  position: relative;
  display: block;
  aspect-ratio: var(--kz-hover-list-ratio);
  overflow: hidden;
  border-radius: var(--kz-hover-list-radius);
  outline: 1px solid var(--kz-hover-list-line);
  outline-offset: -1px;
  background: var(--kz-hover-list-placeholder);
  clip-path: inset(100% 0 0 0 round var(--kz-hover-list-radius));
}

.kodza-hover-list__reel,
.kodza-hover-list__slide {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}

.kodza-hover-list__reel {
  transform: scale(1.2);
}

.kodza-hover-list__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kodza-hover-list__frame.is-open .kodza-hover-list__media {
  clip-path: inset(0 0 0 0 round var(--kz-hover-list-radius));
  transition: clip-path 0.6s var(--kz-hover-list-ease);
}

.kodza-hover-list__frame.is-open .kodza-hover-list__reel {
  transform: none;
  transition: transform 0.9s var(--kz-hover-list-ease);
}

/* It leaves the way it came in: upwards */
.kodza-hover-list__frame.is-leaving .kodza-hover-list__media {
  clip-path: inset(0 0 100% 0 round var(--kz-hover-list-radius));
  transition: clip-path 0.42s cubic-bezier(0.65, 0, 0.35, 1);
}

.kodza-hover-list__frame.is-leaving .kodza-hover-list__reel {
  transform: none;
}

/* --panel: the frame stands beside the list and keeps the last picture */
.kodza-hover-list--panel.is-ready:not(.is-inline) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--kz-hover-list-panel);
  align-items: start;
  column-gap: clamp(32px, 5vw, 72px);
}

.kodza-hover-list--panel .kodza-hover-list__frame {
  position: sticky;
  top: var(--kz-hover-list-sticky);
  z-index: auto;
  width: auto;
  will-change: auto;
}

/* Its number, on a chip of the same glass, rolls the way you go through the list */
.kodza-hover-list__caption {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: flex;
  gap: 0.5em;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--kz-hover-list-tint, rgba(255, 255, 255, 0.6));
  color: var(--kz-hover-list-ink);
  font-family: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.kodza-hover-list__count {
  display: grid;
  overflow: hidden;
}

.kodza-hover-list__count > span {
  grid-area: 1 / 1;
}

/* Touch screens and narrow columns: no pointer to follow, so a thumbnail in each row */
.kodza-hover-list__thumb {
  display: none;
}

.kodza-hover-list.is-inline .kodza-hover-list__frame {
  display: none;
}

.kodza-hover-list.is-inline .kodza-hover-list__row {
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  row-gap: 2px;
  padding: 12px 0;
}

.kodza-hover-list.is-inline .kodza-hover-list__items > .kodza-hover-list__group:not(:first-child) {
  padding-top: 32px;
}

.kodza-hover-list.is-inline .kodza-hover-list__thumb {
  display: block;
  grid-row: 1 / span 2;
  aspect-ratio: var(--kz-hover-list-ratio);
  overflow: hidden;
  border-radius: 8px;
  outline: 1px solid var(--kz-hover-list-line);
  outline-offset: -1px;
  background: var(--kz-hover-list-placeholder);
}

.kodza-hover-list__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s var(--kz-hover-list-ease);
}

.kodza-hover-list.is-inline .kodza-hover-list__row:active .kodza-hover-list__thumb img {
  transform: scale(1.08);
}

.kodza-hover-list.is-inline .kodza-hover-list__name {
  grid-column: 2;
  align-self: end;
  font-size: min(var(--kz-hover-list-size), 22px);
}

.kodza-hover-list.is-inline .kodza-hover-list__detail {
  grid-column: 2;
  align-self: start;
  font-size: 14px;
}

.kodza-hover-list.is-inline .kodza-hover-list__meta {
  grid-column: 3;
  grid-row: 1 / span 2;
}

@media (prefers-reduced-motion: reduce) {
  .kodza-hover-list__name,
  .kodza-hover-list__detail,
  .kodza-hover-list__meta,
  .kodza-hover-list__media,
  .kodza-hover-list__reel,
  .kodza-hover-list__thumb img {
    transition-duration: 0.01ms !important;
  }
}

/* Theming example — on a dark background:
.dark-section .kodza-hover-list {
  --kz-hover-list-ink: #f2f2f0;
  --kz-hover-list-muted: rgba(242, 242, 240, 0.62);
  --kz-hover-list-dim: rgba(242, 242, 240, 0.26);
  --kz-hover-list-line: rgba(255, 255, 255, 0.12);
  --kz-hover-list-placeholder: rgba(255, 255, 255, 0.06);
}
*/