/* The interface is the entire card. Preserve the films' native proportions. */
.sd-showreel {
  --showreel-fade: 400ms;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  align-self: start;
  overflow: hidden;
  isolation: isolate;
  border-radius: 16px;
  background: #faf9f6;
}
.sd-showreel-poster,
.sd-showreel-film {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.sd-showreel-film {
  opacity: 0;
  transition: opacity var(--showreel-fade) var(--ease-out, cubic-bezier(.23, 1, .32, 1));
}
/* Keep the previous film opaque under the incoming one: no dip to a poster. */
.sd-showreel-film.is-current { opacity: 1; }
.sd-showreel-toggle {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: #171719;
  cursor: pointer;
  touch-action: manipulation;
}
.sd-showreel .sd-showreel-toggle:focus-visible { outline: 2px solid #171719; outline-offset: -6px; }
@media (prefers-reduced-motion: reduce) {
  .sd-showreel-film { visibility: hidden; transition: none; }
  .sd-showreel-toggle { display: none; }
}