.tectonic-piece-video-transition {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  visibility: hidden;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

/* Full-viewport black bridge used only after the authored film reaches its
   black ending. It covers outer scroll-video remnants without resizing or
   moving the film itself; the fixed detail page then takes over above it. */
.tectonic-piece-video-transition__black-handoff {
  position: fixed;
  inset: 0;
  z-index: 11900;
  visibility: hidden;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 180ms cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 180ms;
}

.tectonic-piece-video-transition__black-handoff.is-active {
  visibility: visible;
  opacity: 1;
  transition:
    opacity 180ms cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 0s;
}

.tectonic-piece-video-transition__viewport {
  position: absolute;
  top: var(--tectonic-video-viewport-top, 0);
  left: var(--tectonic-video-viewport-left, 0);
  width: var(--tectonic-video-viewport-width, 100%);
  height: var(--tectonic-video-viewport-height, 100%);
  overflow: hidden;
  background: #000;
  contain: strict;
}

.tectonic-piece-video-transition.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  cursor: none;
}

.tectonic-piece-video-transition.is-ended {
  pointer-events: none;
  cursor: auto;
}

.tectonic-piece-video-transition.is-expanded {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.tectonic-piece-video-transition.is-resetting,
.tectonic-piece-video-transition.is-resetting .tectonic-piece-video-transition__viewport,
.tectonic-piece-video-transition.is-resetting .tectonic-piece-video-transition__video,
.tectonic-piece-video-transition.is-resetting .tectonic-piece-video-transition__poster,
.tectonic-piece-video-transition.is-resetting .tectonic-piece-video-transition__poster-blur {
  transition: none !important;
}

.tectonic-piece-video-transition__video,
.tectonic-piece-video-transition__poster-blur,
.tectonic-piece-video-transition__poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.tectonic-piece-video-transition__video {
  z-index: 0;
  background: #000;
  object-fit: fill;
  opacity: 1;
  image-rendering: auto;
  transform:
    translate3d(var(--tectonic-video-shift-x, 0%), var(--tectonic-video-shift-y, 0%), 0)
    scale(var(--tectonic-video-scale-x, 1), var(--tectonic-video-scale-y, 1));
  transform-origin: 50% 50%;
  will-change: opacity;
}

.tectonic-piece-video-transition.is-expanded .tectonic-piece-video-transition__video {
  transform: translate3d(0, 0, 0) scale(1);
}

.tectonic-piece-video-transition__poster {
  z-index: 2;
  opacity: 1;
  pointer-events: none;
  transform: scale(1);
  transform-origin: 50% 50%;
  object-fit: fill;
}

.tectonic-piece-video-transition__poster-blur {
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transform: scale(1);
  transform-origin: 50% 50%;
  object-fit: fill;
}

#stage .tectonic-piece-video-transition__poster {
  outline: 0;
}

.tectonic-piece-video-transition__poster.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.tectonic-piece-video-transition__poster-blur.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.tectonic-piece-video-transition__poster.is-soft-release {
  opacity: 0;
  transition: opacity var(--tectonic-video-release-duration, 180ms)
    cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

.tectonic-piece-video-transition__poster-blur.is-soft-release {
  animation: tectonic-video-preblur-release
    var(--tectonic-video-release-duration, 180ms)
    cubic-bezier(0.4, 0, 0.2, 1)
    both;
  will-change: opacity, transform;
}

@keyframes tectonic-video-preblur-release {
  0% { opacity: 0; }
  18% { opacity: 0.82; }
  100% { opacity: 0; }
}

.tectonic-piece-video-transition.is-ending .tectonic-piece-video-transition__video,
.tectonic-piece-video-transition.is-ended .tectonic-piece-video-transition__video,
.tectonic-piece-video-transition.is-ended .tectonic-piece-video-transition__poster-blur,
.tectonic-piece-video-transition.is-ended .tectonic-piece-video-transition__poster {
  opacity: 0;
}

body.is-piece-video-transition-active #app > :not(#stage) {
  opacity: 0;
  transition: opacity 360ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

#stage.has-active-letterbox-atmosphere .tectonic-piece-video-transition {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0, 0, 0, 0.18) var(--tectonic-letterbox-feather-soft),
    rgba(0, 0, 0, 0.72) var(--tectonic-letterbox-feather-dense),
    #000 var(--tectonic-letterbox-feather),
    #000 calc(100% - var(--tectonic-letterbox-feather)),
    rgba(0, 0, 0, 0.72) calc(100% - var(--tectonic-letterbox-feather-dense)),
    rgba(0, 0, 0, 0.18) calc(100% - var(--tectonic-letterbox-feather-soft)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0, 0, 0, 0.18) var(--tectonic-letterbox-feather-soft),
    rgba(0, 0, 0, 0.72) var(--tectonic-letterbox-feather-dense),
    #000 var(--tectonic-letterbox-feather),
    #000 calc(100% - var(--tectonic-letterbox-feather)),
    rgba(0, 0, 0, 0.72) calc(100% - var(--tectonic-letterbox-feather-dense)),
    rgba(0, 0, 0, 0.18) calc(100% - var(--tectonic-letterbox-feather-soft)),
    transparent 100%
  );
}