.Stills__section {
  position: relative;
  display: grid;
  gap: clamp(2rem, 6vh, 5rem);
  padding: clamp(4rem, 14vh, 12rem) clamp(2rem, 6vw, 7rem);
  overflow: hidden;
  isolation: isolate;

  opacity: 0.5;
  filter: saturate(0.25);
  transition:
    opacity var(--dur) var(--ease),
    filter var(--dur) var(--ease);
}

.Stills__section.Stills__resolved {
  opacity: 1;
  filter: saturate(1);
}

@media (min-width: 1024px) and (hover: hover) {
  .Stills__section {
    filter: saturate(0.25) blur(4px);
  }

  .Stills__section.Stills__resolved {
    filter: saturate(1) blur(0px);
  }
}

.Stills__heading {
  white-space: pre-line;
  color: var(--fg);
}

.Stills__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: clamp(1rem, 2.5vw, 2.5rem);
}

.Stills__column {
  display: grid;
  gap: clamp(1rem, 2.5vw, 2.5rem);
}

.Stills__item {
  position: relative;
  margin: 0;
  transition: opacity var(--dur-fast) var(--ease);
}

/**
 * Hovering one frame pushes every other one back. Written as a descendant
 * rule so the whole effect is CSS — no pointer listeners, no React render on
 * hover, nothing running per frame.
 */
.Stills__grid:hover .Stills__item:not(:hover) {
  opacity: 0.4;
}

/**
 * The part that flies in. The figure itself stays put, so the caption keeps its
 * coordinate space and the hover dimming keeps sole ownership of the figure's
 * opacity — GSAP writing opacity inline on the figure would outrank the hover
 * rule and kill it the moment the frame landed.
 */
.Stills__plate {
  position: relative;
}

.Stills__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.75rem;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}

.Stills__item:hover .Stills__caption,
.Stills__item:focus-within .Stills__caption {
  opacity: 1;
}

@media (max-width: 720px) {
  .Stills__grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .Stills__section,
  .Stills__section.Stills__resolved {
    filter: none;
  }

  .Stills__section {
    transition: opacity var(--dur) var(--ease);
  }

  .Stills__column,
  .Stills__plate {
    transform: none !important;
  }

  .Stills__plate {
    opacity: 1 !important;
  }
}