/* Home only. The first project remains usable with JavaScript disabled. */
.hero-slides, .hero-slide { position: absolute; inset: 0; }
.hero-carousel {
  background: #0b0e11;
  /* Native Saudade picture is 1920×754. Keep the stage within that size
     and no wider in aspect, so its faces never need a vertical crop. */
  min-height: clamp(620px, calc(100vw * 754 / 1920), 754px);
  max-height: 754px;
}
.hero-slides { max-width: 1920px; margin-inline: auto; }
.hero-slide {
  opacity: 0;
  transform: translateX(2.5%);
  transition: opacity 700ms ease, transform 900ms var(--ease);
  pointer-events: none;
}
.hero-slide.is-active { opacity: 1; transform: translateX(0); }
.hero-slide .hero-image { object-fit: contain; object-position: center; }
.hero-clean-frame { position: absolute; inset: 0; overflow: hidden; }
.hero-clean-frame .hero-image {
  height: calc(100% * 1080 / 754);
  top: 50%; bottom: auto;
  transform: translateY(-50%);
  object-fit: cover;
  object-position: 65% 50%;
}
@media (min-width: 1400px) {
  /* Keep the actors to the right of the headline when there is room. */
  .hero-clean-frame .hero-image { object-position: 15% 50%; }
}
.hero-carousel .hero-content { max-width: 1920px; margin-inline: auto; }
.hero-carousel .hero-top, .hero-carousel .hero-bottom {
  left: max(var(--gutter), calc((100% - 1920px) / 2 + var(--gutter)));
  right: max(var(--gutter), calc((100% - 1920px) / 2 + var(--gutter)));
}
.hero-carousel .hero-bottom { align-items: flex-end; }
.hero-controls { display: flex; align-items: center; gap: 8px; }
.hero-controls[hidden] { display: none; }
.hero-controls button {
  width: 44px; height: 44px; flex: 0 0 44px;
  display: grid; place-items: center;
  border: 1px solid transparent; background: transparent;
  color: var(--paper); cursor: pointer;
  font: 500 12px var(--font-sans); letter-spacing: .04em;
  transition: background var(--fast), border-color var(--fast);
}
.hero-controls .hero-choice { border-bottom-color: rgba(255,255,255,.45); }
.hero-controls .hero-choice[aria-pressed="true"] { border-bottom: 3px solid var(--paper); background: rgba(255,255,255,.12); }
.hero-controls button:hover { background: rgba(255,255,255,.2); }
.hero-controls button:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.hero-controls .hero-toggle { border: 1px solid rgba(255,255,255,.55); border-radius: 50%; margin-left: 8px; font-size: 14px; }
.hero-carousel .spotlight { width: 340px; max-width: 42%; min-width: 0; }
.hero-carousel .spotlight-title [data-hero-title] {
  font: inherit; letter-spacing: inherit; transform: none;
}
.hero-carousel .spotlight-title { gap: 24px; }
.hero-carousel .spotlight-credit { line-height: 1.5; }
@media (max-width: 1050px) {
  /* Show the whole frame above the copy instead of enlarging a landscape
     image to fill a tall phone screen. Keep a stable stage across slides. */
  .hero-carousel { display: flex; flex-direction: column; height: auto; min-height: 0; max-height: none; }
  .hero-carousel .hero-top { position: relative; inset: auto; order: 0; padding: 22px var(--gutter); }
  .hero-slides { position: relative; inset: auto; order: 1; width: 100%; aspect-ratio: 16 / 9; margin: 0; }
  .hero-carousel .hero-shade { display: none; }
  .hero-carousel .hero-content { order: 2; width: 100%; padding: 28px var(--gutter) 0; }
  .hero-carousel .hero-bottom { position: relative; inset: auto; order: 3; margin: 28px var(--gutter) 24px; flex-direction: column; align-items: stretch; gap: 18px; }
  .hero-carousel .spotlight { width: 100%; max-width: none; padding-top: 12px; }
  .hero-carousel .spotlight .eyebrow { margin-bottom: 8px; font-size: 11px; }
  .hero-carousel .spotlight-credit { margin-top: 8px; }
  .hero-controls { order: 2; }
  .hero-carousel .hero-content p { margin-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; transform: none; }
}