/* Gallery (js/gallery.js): a pinned strip sliding sideways. It opens on white, where the hero's
   flash left off; then the heading slides in alone and stays; then one row of big prints, each at
   its photo's own shape, in turn under and over the heading. */
.gallery {
  /* The opening screen with the line from the flash; the prints start after it. */
  --lead: 100vw;
  /* The heading's own screen: it slides in alone and settles before the first print follows. */
  --title: 100vw;
  /* Print height. Phones: an upright print a little narrower than the screen. */
  --row: min(56svh, 95vw);
  --outline-width: 1px;

  position: relative;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-bg);
}

/* The white the hero's flash left behind; fades to the paper colour as the opening leaves. */
.gallery__wash {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: var(--color-flash);
  pointer-events: none;
}

.gallery__top {
  position: absolute;
  z-index: 5;
  top: var(--gutter);
  inset-inline: var(--gutter);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  pointer-events: none;
}

.gallery__intro {
  max-width: 18rem;
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-align: right;
}

/* --span: the prints' row length in print heights, set from JS. */
.gallery__canvas {
  position: relative;
  z-index: 1;
  width: calc(var(--lead) + var(--title) + var(--span, 0) * var(--row));
  min-width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gallery__lead {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--lead);
  height: 100%;
  display: flex;
  align-items: center;
  padding-inline: var(--gutter);
}

.gallery__lead-text {
  display: flex;
  flex-direction: column;
  font-family: var(--font-heading);
  font-size: min(15vw, 26svh);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.035em;
  white-space: nowrap;
  color: var(--color-text);
}

.gallery__lead-line {
  display: block;
  will-change: transform, opacity, filter;
}

.gallery__lead-line:nth-child(even) {
  padding-left: 0.6em;
  font-style: italic;
  font-weight: 400;
}

/* The giant heading. Prints under it (.card--back), the outlined copy, then prints over it. */
.gallery__type {
  position: absolute;
  z-index: 2;
  top: 33svh;
  left: calc(var(--lead) + var(--gutter));
  display: flex;
  flex-direction: column;
  font-family: var(--font-heading);
  font-size: min(24svh, 23vw);
  font-weight: 500;
  line-height: 0.82;
  letter-spacing: -0.035em;
  white-space: nowrap;
  color: var(--color-text);
  pointer-events: none;
  user-select: none;
}

.gallery__type-line:nth-child(even) {
  padding-left: 0.6em;
  font-style: italic;
  font-weight: 400;
}

/* Over the prints under the heading, the heading shows as a hairline in the paper colour,
   as on the hero; clipped to those prints from JS, hidden until then. */
.gallery__outline {
  z-index: 4;
  color: transparent;
  -webkit-text-stroke: var(--outline-width) var(--color-bg);
  clip-path: inset(0 100% 0 0);
}

/* ---- Bottom line: label, a hairline that fills, the current number ---- */
.gallery__bar {
  position: absolute;
  z-index: 400;
  bottom: var(--gutter);
  inset-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  pointer-events: none;
}

.gallery__bar-label {
  color: var(--color-muted);
}

.gallery__rail {
  position: relative;
  flex: 1;
  height: 1px;
  background: var(--color-line);
}

.gallery__progress {
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

.gallery__counter {
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

.gallery__counter-total {
  color: var(--color-muted);
}

/* ---- One print: --x (position) and --a (width / height) in print heights, set from JS ---- */
.card {
  position: absolute;
  top: calc(50% - var(--row) / 2);
  left: calc(var(--lead) + var(--title) + var(--x, 0) * var(--row));
  list-style: none;
}

.card--back {
  z-index: 3;
}

.card--front {
  z-index: 5;
}

.card:hover {
  z-index: 300; /* above the giant type and every other print */
}

.card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.card__link:hover {
  color: inherit;
}

/* A dark block until the photo opens over it. */
.card__frame {
  position: relative;
  height: var(--row);
  aspect-ratio: var(--a, 0.75);
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-text);
}

.card__media {
  position: absolute;
  inset: 0;
}

.card__image,
.card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.card__video {
  object-fit: contain;
  opacity: 0;
  transition: opacity 600ms var(--ease);
}

.card[data-playing] .card__video {
  opacity: 1;
}

/* Zero width + min-width 100%: the caption never makes the card wider than its photo. */
.card__caption {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  width: 0;
  min-width: 100%;
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-muted);
  opacity: 0;
  transition: opacity var(--duration) var(--ease);
}

.card:hover .card__caption {
  opacity: 1;
}

.card__number {
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

.card__title {
  overflow: hidden;
  text-overflow: ellipsis;
}

.card__film {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-left: auto;
}

.card__dot {
  width: 6px;
  height: 6px;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  transition: background-color var(--duration) var(--ease);
}

.card[data-playing] .card__dot {
  background: var(--color-accent);
}

@media (min-width: 64rem) {
  .gallery {
    --row: 70svh;
    --outline-width: 1.25px;
  }

  .gallery__type {
    top: 30svh;
  }
}

/* Without motion the strip does not slide: it starts on the prints and scrolls sideways by hand. */
@media (prefers-reduced-motion: reduce) {
  .gallery {
    --lead: 0px;
    --title: 0px;

    overflow-x: auto;
  }

  .gallery__wash,
  .gallery__lead {
    display: none;
  }
}