/* The poster and film share a frame, crop and position: no placeholder swap. */
#door-scene { overflow: hidden; }
#door-scene > .scene-poster,
#door-scene > .hero-film {
  position: absolute;
  top: 0;
  left: 50%;
  width: auto;
  height: 100%;
  max-width: none;
  transform: translateX(-50%);
  pointer-events: none;
  object-fit: contain;
  /* Hide the outermost codec edge without masking the door or its shadow. */
  --film-edge-mask: linear-gradient(to right,transparent,#000 20%,#000 80%,transparent),
    linear-gradient(to bottom,transparent,#000 9%,#000 90%,transparent);
  -webkit-mask-image: var(--film-edge-mask);
  mask-image: var(--film-edge-mask);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
#door-scene > .scene-poster { opacity: 1; }
#door-scene > .hero-film { opacity: 0; }
#door-scene.film-ready > .hero-film { opacity: 1; }
#door-scene.film-ready > .scene-poster { opacity: 0; }
#door-scene > .hero-film-play {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid #b9ac94;
  border-radius: 99px;
  background: #eee8dded;
  color: #343a35;
  font: inherit;
  font-size: 12px;
  white-space: nowrap;
}
#door-scene > .hero-film-play svg { width: 14px; height: 14px; }
#door-scene > .hero-film-play:hover { background: #e4dac8; }
#door-scene > .hero-film-play:focus-visible { outline: 2px solid #675f4f; outline-offset: 4px; }