.scroll-expand {
  position: relative;
  width: 100%;
  background: var(--bg);
}

.scroll-expand__track {
  position: relative;
  width: 100%;
}

.scroll-expand__stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  --se-title-size: 4rem;
}

.scroll-expand__frame {
  position: absolute;
  inset: 0;
  clip-path: inset(21% 29% 21% 29% round 24px);
  will-change: clip-path;
  background: var(--surface);
}

.scroll-expand__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  will-change: transform;
  transform-origin: center;
  transform: scale(1.35);
  user-select: none;
  -webkit-user-drag: none;
}

.scroll-expand__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(12, 10, 9, .88),
    rgba(12, 10, 9, .18) 45%,
    rgba(12, 10, 9, .5)
  );
  opacity: 0;
}

.scroll-expand__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  padding: 6%;
  opacity: 0;
  will-change: opacity, transform;
}

.scroll-expand__overlay-title {
  font-size: clamp(1.8rem, 4.5vw, 3.4rem);
  color: #fff;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .55);
}

.scroll-expand__overlay-text {
  max-width: 52ch;
  color: rgba(244, 244, 245, .82);
  font-size: var(--fs-lead);
  text-shadow: 0 1px 20px rgba(0, 0, 0, .6);
}

.scroll-expand__title {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: var(--se-title-max, 42%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--se-title-size);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
  pointer-events: none;
  will-change: opacity, transform;
  mix-blend-mode: difference;
}

.scroll-expand__hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.5rem;
  text-align: center;
  font-size: var(--fs-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  pointer-events: none;
  will-change: opacity, transform;
}

.scroll-expand.is-static .scroll-expand__stage {
  position: relative;
  height: 70svh;
}
.scroll-expand.is-static .scroll-expand__title,
.scroll-expand.is-static .scroll-expand__hint { display: none; }