.hero-transformation {
  position: fixed;
  inset: 0;
  z-index: 3;
  visibility: hidden;
  pointer-events: none;
}

.hero-transformation-backdrop {
  position: absolute;
  inset: 0;
  background: #fff;
}

.hero-transformation-film {
  position: absolute;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent),
    linear-gradient(transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent),
    linear-gradient(transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.hero-transformation-video,
.hero-transformation-final {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  border: 0;
  outline: 0;
  box-shadow: none;
}

.hero-transformation-final { opacity: 0; }

.has-hero-transformation .hero-section {
  min-height: calc(var(--hero-original-height) + var(--transformation-distance));
}

.has-hero-transformation .imagination-section {
  margin-top: calc(-1 * var(--transformation-overlap));
}

.has-hero-transformation .hero-copy { opacity: var(--transformation-hero-copy, 1); }
.has-hero-transformation .hero-info,
.has-hero-transformation .hero-system-strip { opacity: var(--transformation-hero-info, 1); }
.has-hero-transformation .hero-portrait { opacity: var(--transformation-portrait, 1); }

.has-hero-transformation .imagination-copy,
.has-hero-transformation .imagination-copy.reveal {
  opacity: var(--transformation-scene-copy, 0);
  transform: none;
  transition: none;
}

.hero-section.is-transforming { z-index: 30; background: transparent; pointer-events: none; }
.hero-section.is-transforming .hero-frame { background: transparent; }
.hero-section.is-transforming .hero-frame::before { opacity: 0; }

@media (max-width: 640px) {
  .has-hero-transformation .hero-portrait { opacity: calc(var(--transformation-portrait, 1) * 0.82); }
}