.hero-marquee {
  min-height: var(--hero-height);
  display: grid;
  grid-template-rows: 1fr auto;
  padding-bottom: var(--spacing-medium);
  overflow: hidden;
}

.hero-marquee-track-wrap {
  align-self: center;
  min-width: 0;
  overflow: hidden;
  padding: var(--spacing-xsmall) 0 var(--spacing-xxxlarge);
  touch-action: pan-y;
  cursor: grab;
}

.hero-marquee-track {
  display: flex;
  gap: var(--spacing-small);
  width: max-content;
  will-change: transform;
}

.hero-marquee-item {
  position: relative;
  flex: none;
  height: clamp(240px, min(48vh, 90vw), 540px);
  margin: 0;
}

.hero-marquee-frame,
.hero-marquee-title {
  cursor: pointer;
}

.hero-marquee-frame {
  display: block;
  height: 100%;
  aspect-ratio: var(--ratio);
  overflow: hidden;
  clip-path: inset(100% 0 0 0);
  animation: hero-marquee-reveal 1.4s var(--ease-glide) var(--delay) forwards;
}

.hero-marquee-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  transform: scale(1.12);
  animation: hero-marquee-settle 2.2s var(--ease-glide) var(--delay) forwards;
}

.hero-marquee-caption {
  position: absolute;
  top: 100%;
  left: 0;
  width: 280px;
  padding-top: var(--spacing-xsmall);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--duration-fade) var(--ease-glide), transform var(--duration-fade) var(--ease-glide);
}

.hero-marquee-item.is-active .hero-marquee-caption {
  opacity: 1;
  transform: none;
}

.hero-marquee-caption > * {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hero-marquee-title {
  font: var(--text-headline);
  letter-spacing: var(--text-headline-tracking);
}

.hero-marquee-foot {
  max-width: none;
  display: flex;
  align-items: flex-end;
  gap: 10vw;
}

.hero-marquee-wordmark {
  flex: none;
  width: 60%;
  clip-path: inset(0 0 100% 0);
  animation: hero-marquee-rise 1.4s var(--ease-glide) 0.6s forwards;
}

.hero-marquee-about {
  flex: 1;
  min-width: 0;
}

@keyframes hero-marquee-reveal {
  to { clip-path: inset(0 0 0 0); }
}

@keyframes hero-marquee-settle {
  to { transform: scale(1); }
}

@keyframes hero-marquee-rise {
  to { clip-path: inset(0 0 0 0); }
}

@media (max-width: 768px) {
  .hero-marquee-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-medium);
  }

  .hero-marquee-wordmark {
    width: 100%;
  }
}

@media (hover: none) {
  .hero-marquee-caption {
    width: 100%;
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-marquee-frame,
  .hero-marquee-wordmark {
    clip-path: none;
  }

  .hero-marquee-image {
    transform: none;
  }
}