/* Filmbot-style passage: a tall image travels with the document while its
   horizontal crop opens from a centred portrait into a full-bleed landscape. */
.ab-expand {
  --expand-inset: 30%;
  --expand-radius: 6.5px;
  position: relative;
  height: 132svh;
  background: var(--ab-paper);
  overflow: hidden;
}

.ab-expand__stage {
  position: relative;
  height: 100%;
}

.ab-expand__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  margin: 0;
  background: #271f2d;
  clip-path: inset(0 var(--expand-inset) round var(--expand-radius));
  will-change: clip-path;
}

.ab-expand__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 13, 21, 0) 48%, rgba(17, 13, 21, .12) 62%, rgba(17, 13, 21, .82) 100%);
  pointer-events: none;
}

.ab-expand__frame img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 52%;
  filter: saturate(.93) contrast(1.03) brightness(.95);
}

.ab-expand__frame figcaption {
  position: absolute;
  z-index: 2;
  top: 76%;
  left: 50%;
  width: min(92vw, 94rem);
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
}

.ab-expand__frame figcaption p {
  margin: 0;
  font: 650 clamp(2.7rem, 6.3vw, 7.75rem)/.86 var(--ab-sans);
  letter-spacing: -.065em;
  text-transform: uppercase;
  text-wrap: balance;
}

@media (min-width: 760px) {
  .ab-expand {
    height: 148svh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ab-expand { --expand-inset: 0%; --expand-radius: 0px; }
  .ab-expand__frame { will-change: auto; }
}