.el-hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #f2eef5 0%, #f8e4ea 25%, #fbd9d0 42%, #efe4d6 43%, #ffffff 100%);
  z-index: 0;
}

.el-hero__poster,
.el-hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.el-hero__poster {
  display: none;
  object-fit: cover;
  object-position: 50% 50%;
}

.el-hero__canvas {
  opacity: 0;
  transition: opacity 1.4s ease;
}

.el-hero__bg.is-ready .el-hero__canvas { opacity: 1; }
.el-hero__bg.is-static .el-hero__poster { display: block; }
.el-hero__bg.is-static .el-hero__canvas,
.el-hero__bg.is-static .el-hero__cards { display: none; }

.el-hero__cards {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.el-figure {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  will-change: transform;
}

.el-card {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  will-change: transform, opacity;
}

/* ver docs/escena.md#figuras — la línea va por detrás de las figuras y el punto por delante */
.el-card--dot {
  z-index: 2;
}

.el-card__dot {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--card-color);
  box-shadow: 0 0 0 3px #ffffff, 0 0 10px 3px var(--card-color);
}

.el-card__leader {
  position: absolute;
  left: 0;
  top: 0;
  height: 1px;
  background: var(--card-color);
  opacity: 0.8;
  transform-origin: 0 0;
}