* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #050505;
}

.stage,
.poster,
.poster img,
.film,
.play-gate {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

.stage {
  overflow: hidden;
  background: #050505;
}

.poster {
  z-index: 0;
  display: block;
}

.poster img,
.film {
  display: block;
  object-fit: cover;
}

.film {
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.film--intro {
  z-index: 2;
}

.film.is-visible {
  opacity: 1;
  visibility: visible;
}

.play-gate {
  z-index: 3;
  padding: 0;
  border: 0;
  background: transparent;
  touch-action: manipulation;
}

.play-gate[hidden] {
  display: none;
}